Difference between revisions of "Ejercicio: Pong"

From Edutec Wiki
Jump to: navigation, search
 
Line 1: Line 1:
−
<languages/>
+
== Introducción ==
−
<translate>
+
−
<!--T:1-->
+
−
[[Category: Scratch]]
+
−
[[Category: 8 a 10 años]]
+
−
[[Category: 10 a 12 años]]
+
  
 +
Lo primero que haremos es partir de cero, es decir, elegiremos la opción 'Nuevo' del menú 'Archivo'. Ahora tenemos el gatito en el escenario y lo sacaremos. Ya sabéis cómo hacerlo: escogemos las tijeras y eliminamos el gatito. La idea es quedarnos sin nada! Vamos a construir los objetos necesarios para el programa. Primero dibujaremos un pelota. En el menú nuevo objeto hacemos clic sobre el pincel y se abrirá la herramienta de dibujo
  
−
==Introducción== <!--T:2-->
+
[[File:Ejercicio Pong 01.png|center|400px|Ejercicio Pong 01.png]]
  
−
<!--T:3-->
+
Seleccionamos la herramienta circulo [[File:Seleccionherramientacirculo.png|Archivo:Seleccionherramientacirculo.png]]y elegimos el circulo relleno [[File:Pong03.png|Archivo:Pong03.png]]. Hacemos un circulo ni demasiado pequeño ni demasiado grande(con la tecla mayúsculas presionada conseguimos dibujar un circulo y no una elipse) Ahora tenemos un objeto nuevo con el que podemos hacer cosas,le ponemos de nombre "Pelota".
−
Lo primero que haremos es partir de cero, es decir, elegiremos la opción 'Nuevo' del menú 'Archivo'. Ahora tenemos el gatito en el escenario y lo sacaremos. Ya sabéis cómo hacerlo: escogemos las tijeras y eliminamos el gatito. La idea es quedarnos sin nada!
+
−
Vamos a construir los objetos necesarios para el programa. Primero dibujaremos un pelota. En el menú nuevo objeto hacemos clic sobre el pincel y se abrirá la herramienta de dibujo
+
  
−
<!--T:4-->
+
&nbsp;
−
[[Archivo:Ejercicio Pong 01.png|400px|centro]]
+
  
−
<!--T:5-->
+
== Moviendo la pelota ==
−
Seleccionamos la herramienta circulo [[Archivo:Seleccionherramientacirculo.png|Archivo:Seleccionherramientacirculo.png]]y elegimos el circulo relleno [[Archivo:Pong03.png|Archivo:Pong03.png]]. Hacemos un circulo ni demasiado pequeño ni demasiado grande(con la tecla mayúsculas presionada conseguimos dibujar un circulo y no una elipse) Ahora tenemos un objeto nuevo con el que podemos hacer cosas,le ponemos de nombre "Pelota".
+
  
−
 
−
==Moviendo la pelota== <!--T:6-->
 
−
 
−
<!--T:7-->
 
 
Primero de todo, será necesario que volvamos al lienzo de programación, podemos hacerlo pulsando el botón de Programas:
 
Primero de todo, será necesario que volvamos al lienzo de programación, podemos hacerlo pulsando el botón de Programas:
  
−
<!--T:8-->
+
[[File:Pong04.png|center|Pong04.png]]
−
[[Archivo:Pong04.png|centro]]
+
  
−
<!--T:9-->
+
¿Qué podemos hacer? Para empezar podemos iniciar el programa al pulsar la banderita verde.
−
¿Qué podemos hacer? Para empezar podemos iniciar el programa al pulsar la banderita verde.  
+
  
−
<!--T:10-->
+
[[File:Pong01-1.png|center|Pong01-1.png]]
−
[[Archivo:Pong01-1.png|centro]]
+
  
−
<!--T:11-->
+
Colocamos este código en el escenario, Escribamos el código de la "Pelota". Ya sabemos cómo hacerlo, ¿verdad? Ya conocemos las instrucciones 'muévete', 'rebota al tocar un borde', la estructura iterativa 'para siempre' y la instrucción que detecta si hemos enviado un mensaje. Combinando todo esto podemos hacer el programita sencillo
−
Colocamos este código en el escenario,
+
−
Escribamos el código de la "Pelota".
+
−
Ya sabemos cómo hacerlo, ¿verdad? Ya conocemos las instrucciones 'muévete', 'rebota al tocar un borde', la estructura iterativa 'para siempre' y la instrucción que detecta si hemos enviado un mensaje. Combinando todo esto podemos hacer el programita sencillo
+
  
−
<!--T:12-->
+
[[File:Pong06.png|center|Pong06.png]]
−
[[Archivo:Pong06.png|centro]]
+
  
−
<!--T:13-->
 
 
Ahora presionemos la bandera verde y pongamos el programa en funcionamiento. Comprobemos como funciona el rebote.
 
Ahora presionemos la bandera verde y pongamos el programa en funcionamiento. Comprobemos como funciona el rebote.
  
−
<!--T:14-->
 
 
Vamos a añadir un nuevo objeto para detectar cuando la pelota toca la parte inferior del escenario.
 
Vamos a añadir un nuevo objeto para detectar cuando la pelota toca la parte inferior del escenario.
  
−
<!--T:15-->
 
 
Cada vez que pulsemos la bandera verde la pelota ira a la parte superior central del escenario (0,160) y se moverá en dirección hacia abajo (180). Si dejamos el código de esta forma la pelota siempre tendría el mismo movimiento, vamos a hacer que la dirección sea distinta cada vez, con la siguiente instrucción.
 
Cada vez que pulsemos la bandera verde la pelota ira a la parte superior central del escenario (0,160) y se moverá en dirección hacia abajo (180). Si dejamos el código de esta forma la pelota siempre tendría el mismo movimiento, vamos a hacer que la dirección sea distinta cada vez, con la siguiente instrucción.
  
−
<!--T:16-->
+
[[File:Pong01-2.png|center|Pong01-2.png]]
−
[[Archivo:Pong01-2.png|centro]]
+
  
 +
&nbsp;
  
−
==La paleta== <!--T:17-->
+
== La paleta ==
  
−
<!--T:18-->
 
 
Ya tenemos la pelota en movimiento, construyamos un nuevo objeto para interactuar con la pelota, A este objeto le vamos a llamar "Paleta"
 
Ya tenemos la pelota en movimiento, construyamos un nuevo objeto para interactuar con la pelota, A este objeto le vamos a llamar "Paleta"
  
−
<!--T:19-->
+
[[File:Pong01-4.png|center|Pong01-4.png]]
−
[[Archivo:Pong01-4.png|centro]]
+
  
−
<!--T:20-->
+
En el editor de dibujos dibujamos un rectángulo, procurando que el centro quede bien colocado
−
En el editor de dibujos dibujamos un rectángulo, procurando que el centro quede bien colocado
+
  
−
<!--T:21-->
+
[[File:Pong02-1.png|center|400px|Pong02-1.png]]
−
[[Archivo:Pong02-1.png|400px|centro]]
+
  
−
<!--T:22-->
 
 
A este objeto le añadimos el siguiente código.
 
A este objeto le añadimos el siguiente código.
  
−
<!--T:23-->
+
[[File:Pong02-2.png|center|Pong02-2.png]]
−
[[Archivo:Pong02-2.png|centro]]
+
  
−
<!--T:24-->
+
Con este código conseguimos que el objeto "Paleta" siga el movimiento en "x" del ratón. Ahora tenemos que conseguir que la paleta y la pelota interactuen. Para ello modificaremos el código de la paleta de la siguiente forma.
−
Con este código conseguimos que el objeto "Paleta" siga el movimiento en "x" del ratón.
+
−
Ahora tenemos que conseguir que la paleta y la pelota interactuen. Para ello modificaremos el código de la paleta de la siguiente forma.
+
  
−
<!--T:25-->
+
[[File:Pong10-1.png|center|Pong10-1.png]]
−
[[Archivo:Pong10-1.png|centro]]
+
  
 +
&nbsp;
  
−
==Más rebotes== <!--T:26-->
+
== Más rebotes ==
  
−
<!--T:27-->
 
 
Escribamos el código de rebotar.
 
Escribamos el código de rebotar.
  
−
<!--T:28-->
+
[[File:Pong10-2.png|center|Pong10-2.png]]
−
[[Archivo:Pong10-2.png|centro]]
+
  
 +
&nbsp;
  
−
==La línea de fondo== <!--T:29-->
+
== La línea de fondo ==
  
−
<!--T:30-->
+
Comprobemos como funciona el rebote. Vamos a añadir un nuevo objeto, que nos servirá para detectar cuando la pelota toca la linea de fondo y por tanto perdemos el punto. Vamos a crear nuevo objeto, abrimos el editor de dibujo y dibujamos un objeto como se muestra en la siguiente imagen y le llamamos fondo.
−
Comprobemos como funciona el rebote. Vamos a añadir un nuevo objeto, que nos servirá para detectar cuando la pelota toca la linea de fondo y por tanto perdemos el punto.
+
−
Vamos a crear nuevo objeto, abrimos el editor de dibujo y dibujamos un objeto como se muestra en la siguiente imagen y le llamamos fondo.
+
  
−
<!--T:31-->
+
[[File:PongLineadefondo.png|center|400px|PongLineadefondo.png]]
−
[[Archivo:PongLineadefondo.png|400px|centro]]
+
  
−
<!--T:32-->
 
 
Modifiquemos el código de la "Pelota" para que esta interactue con el "Fondo"
 
Modifiquemos el código de la "Pelota" para que esta interactue con el "Fondo"
  
−
<!--T:33-->
+
[[File:PongTocandofondo.png|center|PongTocandofondo.png]]
−
[[Archivo:PongTocandofondo.png|centro]]
+
  
−
<!--T:34-->
 
 
Seria conveniente que pudiésemos contar las veces que la pelota toca el fondo. Para ello creamos una variable a la que llamamos "marcador".
 
Seria conveniente que pudiésemos contar las veces que la pelota toca el fondo. Para ello creamos una variable a la que llamamos "marcador".
  
−
<!--T:35-->
+
[[File:PongVariablemarcador.png|center|PongVariablemarcador.png]]
−
[[Archivo:PongVariablemarcador.png|centro]]
+
  
−
<!--T:36-->
 
 
Cada vez que la "Pelota" toca la linea de fondo incrementamos esta variable en uno.
 
Cada vez que la "Pelota" toca la linea de fondo incrementamos esta variable en uno.
  
−
<!--T:37-->
+
[[File:PongCodigomarcador.png|center|PongCodigomarcador.png]]
−
[[Archivo:PongCodigomarcador.png|centro]]
+
  
−
<!--T:38-->
 
 
Cuando iniciemos la partida tendremos que poner esta variable a cero. Para ello escribimos el siguiente código en el escenario. Hemos construido un nuevo mensaje "inicia" que utilizaremos mas adelante para fijar la posición inicial de todos los objetos
 
Cuando iniciemos la partida tendremos que poner esta variable a cero. Para ello escribimos el siguiente código en el escenario. Hemos construido un nuevo mensaje "inicia" que utilizaremos mas adelante para fijar la posición inicial de todos los objetos
  
−
<!--T:39-->
+
[[File:PongMensajeinicia.png|center|PongMensajeinicia.png]]
−
[[Archivo:PongMensajeinicia.png|centro]]
+
  
 +
&nbsp;
  
−
==Perder la partida== <!--T:40-->
+
== Perder la partida ==
  
−
<!--T:41-->
 
 
Hagamos que la partida dure un numero determinado de puntos. Cambiemos el bucle "por siempre" del código de la pelota por un "repetir hasta que ..." con la condición deseada.
 
Hagamos que la partida dure un numero determinado de puntos. Cambiemos el bucle "por siempre" del código de la pelota por un "repetir hasta que ..." con la condición deseada.
  
−
<!--T:42-->
+
[[File:PongCodigocomarcador.png|center|PongCodigocomarcador.png]]
−
[[Archivo:PongCodigocomarcador.png|centro]]
+
  
−
<!--T:43-->
 
 
Añadamos un mensaje (enviar "fin") al código para activar las condiciones de final de partida
 
Añadamos un mensaje (enviar "fin") al código para activar las condiciones de final de partida
  
−
<!--T:44-->
+
[[File:PongFinpartida.png|center|PongFinpartida.png]]
−
[[Archivo:PongFinpartida.png|centro]]
+
  
−
<!--T:45-->
 
 
Dibujemos un nuevo escenario para el fin de partida.
 
Dibujemos un nuevo escenario para el fin de partida.
  
−
<!--T:46-->
+
[[File:PongFondofinal.png|center|400px|PongFondofinal.png]]
−
[[Archivo:PongFondofinal.png|400px|centro]]
+
  
−
<!--T:47-->
 
 
Modifiquemos el código del escenario para que responda a los mensajes "inicia" y "fin".
 
Modifiquemos el código del escenario para que responda a los mensajes "inicia" y "fin".
  
−
<!--T:48-->
+
[[File:PongEscenariocodigofinal.png|center|PongEscenariocodigofinal.png]]
−
[[Archivo:PongEscenariocodigofinal.png|centro]]
+
  
−
<!--T:49-->
 
 
Para terminar añadamos los comportamientos "inicia" y "fin" a los otros objetos.
 
Para terminar añadamos los comportamientos "inicia" y "fin" a los otros objetos.
  
−
<!--T:50-->
 
 
Para la pelota:
 
Para la pelota:
  
−
<!--T:51-->
+
[[File:PongPelotafin.png|center|PongPelotafin.png]]
−
[[Archivo:PongPelotafin.png|centro]]
+
  
−
<!--T:52-->
 
 
Para la paleta:
 
Para la paleta:
  
−
<!--T:53-->
+
[[File:PongPelotafin.png|center|PongPelotafin.png]]
−
[[Archivo:PongPelotafin.png|centro]]
+
 
 +
== Link ==
  
−
==Link==
 
 
[https://scratch.mit.edu/projects/20324156/ Pong]
 
[https://scratch.mit.edu/projects/20324156/ Pong]
−
</translate>
+
 
 +
[[Category:Scratch]] [[Category:8 a 10 años]] [[Category:10 a 12 años]]

Latest revision as of 09:11, 1 December 2017

Introducción

Lo primero que haremos es partir de cero, es decir, elegiremos la opción 'Nuevo' del menú 'Archivo'. Ahora tenemos el gatito en el escenario y lo sacaremos. Ya sabéis cómo hacerlo: escogemos las tijeras y eliminamos el gatito. La idea es quedarnos sin nada! Vamos a construir los objetos necesarios para el programa. Primero dibujaremos un pelota. En el menú nuevo objeto hacemos clic sobre el pincel y se abrirá la herramienta de dibujo

Ejercicio Pong 01.png

Seleccionamos la herramienta circulo Archivo:Seleccionherramientacirculo.pngy elegimos el circulo relleno Archivo:Pong03.png. Hacemos un circulo ni demasiado pequeño ni demasiado grande(con la tecla mayúsculas presionada conseguimos dibujar un circulo y no una elipse) Ahora tenemos un objeto nuevo con el que podemos hacer cosas,le ponemos de nombre "Pelota".

 

Moviendo la pelota

Primero de todo, será necesario que volvamos al lienzo de programación, podemos hacerlo pulsando el botón de Programas:

Pong04.png

¿Qué podemos hacer? Para empezar podemos iniciar el programa al pulsar la banderita verde.

Pong01-1.png

Colocamos este código en el escenario, Escribamos el código de la "Pelota". Ya sabemos cómo hacerlo, ¿verdad? Ya conocemos las instrucciones 'muévete', 'rebota al tocar un borde', la estructura iterativa 'para siempre' y la instrucción que detecta si hemos enviado un mensaje. Combinando todo esto podemos hacer el programita sencillo

Pong06.png

Ahora presionemos la bandera verde y pongamos el programa en funcionamiento. Comprobemos como funciona el rebote.

Vamos a añadir un nuevo objeto para detectar cuando la pelota toca la parte inferior del escenario.

Cada vez que pulsemos la bandera verde la pelota ira a la parte superior central del escenario (0,160) y se moverá en dirección hacia abajo (180). Si dejamos el código de esta forma la pelota siempre tendría el mismo movimiento, vamos a hacer que la dirección sea distinta cada vez, con la siguiente instrucción.

Pong01-2.png

 

La paleta

Ya tenemos la pelota en movimiento, construyamos un nuevo objeto para interactuar con la pelota, A este objeto le vamos a llamar "Paleta"

Pong01-4.png

En el editor de dibujos dibujamos un rectángulo, procurando que el centro quede bien colocado

Pong02-1.png

A este objeto le añadimos el siguiente código.

Pong02-2.png

Con este código conseguimos que el objeto "Paleta" siga el movimiento en "x" del ratón. Ahora tenemos que conseguir que la paleta y la pelota interactuen. Para ello modificaremos el código de la paleta de la siguiente forma.

Pong10-1.png

 

Más rebotes

Escribamos el código de rebotar.

Pong10-2.png

 

La línea de fondo

Comprobemos como funciona el rebote. Vamos a añadir un nuevo objeto, que nos servirá para detectar cuando la pelota toca la linea de fondo y por tanto perdemos el punto. Vamos a crear nuevo objeto, abrimos el editor de dibujo y dibujamos un objeto como se muestra en la siguiente imagen y le llamamos fondo.

PongLineadefondo.png

Modifiquemos el código de la "Pelota" para que esta interactue con el "Fondo"

PongTocandofondo.png

Seria conveniente que pudiésemos contar las veces que la pelota toca el fondo. Para ello creamos una variable a la que llamamos "marcador".

PongVariablemarcador.png

Cada vez que la "Pelota" toca la linea de fondo incrementamos esta variable en uno.

PongCodigomarcador.png

Cuando iniciemos la partida tendremos que poner esta variable a cero. Para ello escribimos el siguiente código en el escenario. Hemos construido un nuevo mensaje "inicia" que utilizaremos mas adelante para fijar la posición inicial de todos los objetos

PongMensajeinicia.png

 

Perder la partida

Hagamos que la partida dure un numero determinado de puntos. Cambiemos el bucle "por siempre" del código de la pelota por un "repetir hasta que ..." con la condición deseada.

PongCodigocomarcador.png

Añadamos un mensaje (enviar "fin") al código para activar las condiciones de final de partida

PongFinpartida.png

Dibujemos un nuevo escenario para el fin de partida.

PongFondofinal.png

Modifiquemos el código del escenario para que responda a los mensajes "inicia" y "fin".

PongEscenariocodigofinal.png

Para terminar añadamos los comportamientos "inicia" y "fin" a los otros objetos.

Para la pelota:

PongPelotafin.png

Para la paleta:

PongPelotafin.png

Link

Pong

Retrieved from "http://wiki.edutec.citilab.eu/index.php?title=Ejercicio:_Pong&oldid=13011"