Difference between revisions of "Exercici: Pong"

From Edutec Wiki
Jump to: navigation, search
 
Line 4: Line 4:
 
[[File:Ejercicio Pong 01.png|center|400px|Ejercicio Pong 01.png]]
 
[[File:Ejercicio Pong 01.png|center|400px|Ejercicio Pong 01.png]]
 
<p style="text-align: justify;">Seleccionem l'eina cercle [[File:Seleccionherramientacirculo.png|Archivo:Seleccionherramientacirculo.png]] i escollim la opció de dibuixar el cercle ple [[File:Pong03.png|Archivo: Pong03.png]]. Obtenim doncs un nou objecte, al qual li canviem el nom er "pilota".</p> <p style="text-align: justify;">&nbsp;</p>  
 
<p style="text-align: justify;">Seleccionem l'eina cercle [[File:Seleccionherramientacirculo.png|Archivo:Seleccionherramientacirculo.png]] i escollim la opció de dibuixar el cercle ple [[File:Pong03.png|Archivo: Pong03.png]]. Obtenim doncs un nou objecte, al qual li canviem el nom er "pilota".</p> <p style="text-align: justify;">&nbsp;</p>  
 +
 
== Moviment de la pilota ==
 
== Moviment de la pilota ==
 
<p style="text-align: justify;">Primer de tot, caldrà que tornem a la pestanya de programació, podem fer-ho prement el botó de "programes":</p>  
 
<p style="text-align: justify;">Primer de tot, caldrà que tornem a la pestanya de programació, podem fer-ho prement el botó de "programes":</p>  
Line 15: Line 16:
 
<p style="text-align: center;">&nbsp;</p> <p style="text-align: justify;">Pressionem la bandera verda i posem el programa en funcionament. Comprovem com funciona el rebot i ens adonem que la pilota sempre executa el mateix moviment. Podem modificar aquest a través de la següent instrucció:</p>  
 
<p style="text-align: center;">&nbsp;</p> <p style="text-align: justify;">Pressionem la bandera verda i posem el programa en funcionament. Comprovem com funciona el rebot i ens adonem que la pilota sempre executa el mateix moviment. Podem modificar aquest a través de la següent instrucció:</p>  
 
[[File:Pong01-2.png|center|Pong01-2.png]]
 
[[File:Pong01-2.png|center|Pong01-2.png]]
<p style="text-align: justify;">Us preguntareu per què hem utilitzat un nombre a l'atzar entre 120 i 240 quant el sistema de graus d'Scratch va de 0 a 180 tal com veiem a la imatge inferior..</p> <p style="text-align: justify;">[[File:Sistemagraus.PNG|200px|Sistemagraus.PNG]]</p> <p style="text-align: justify;">L'explicació és que per determinar l'angle en que volem que apunti la pilota el valorem segons el sistema tradicional de graus, és a dir, tenim en compte que una volta sencera compren 360º. D'aquí l'angle comprès entre 120 i 240.&nbsp;</p> <p style="text-align: justify;">&nbsp;</p>  
+
<p style="text-align: justify;">Us preguntareu per què hem utilitzat un nombre a l'atzar entre 120 i 240 quant el sistema de graus d'Scratch va de 0 a 180 tal com veiem a la imatge inferior..</p> <p style="text-align: center;">[[File:Sistemagraus.PNG|200px|Sistemagraus.PNG]]</p> <p style="text-align: justify;">L'explicació és que per determinar l'angle en que volem que apunti la pilota el valorem segons el sistema tradicional de graus, és a dir, tenim en compte que una volta sencera compren 360º. D'aquí l'angle comprès entre 120 i 240.&nbsp;</p> <p style="text-align: justify;">&nbsp;</p>
 +
 
 
== La paleta ==
 
== La paleta ==
 
<p style="text-align: justify;">Ja tenim la pilota en moviment, construïm un nou objecte per interactuar amb la pilota seguint els mateixos passos que hem fet amb la pilota, A aquest objecte l'anomenem "paleta".</p>  
 
<p style="text-align: justify;">Ja tenim la pilota en moviment, construïm un nou objecte per interactuar amb la pilota seguint els mateixos passos que hem fet amb la pilota, A aquest objecte l'anomenem "paleta".</p>  

Latest revision as of 15:32, 4 December 2017

Introducció 

En aquest apartat desenvoluparem el disseny del joc del Pong.

El primer que farem és suprimir el gat que tenim a la pantalla tot seleccionant la icona de les tisores que tenim a la barra de menú i fent clic sobre el personatge. També tenim la opció de prémer botó dret sobre el personatge i seleccionar la opció eliminar. Un cop tenim el projecte en blanc, és hora de construir els personatges que ens són necessaris per crear el joc. Comencem dibuixant una pilota, anant al menú d'objectes i fent clic sobre el pinzell. Ens apareixerà l'eina de dibuix i és aquí on dibuixarem la pilota. 

Ejercicio Pong 01.png

Seleccionem l'eina cercle Archivo:Seleccionherramientacirculo.png i escollim la opció de dibuixar el cercle ple Archivo: Pong03.png. Obtenim doncs un nou objecte, al qual li canviem el nom er "pilota".

 

Moviment de la pilota

Primer de tot, caldrà que tornem a la pestanya de programació, podem fer-ho prement el botó de "programes":

Pong04.png

Comencem creant un missatge com a indicador d'inici del joc "al pressionar la bandera verda", seguit d'un missatge que indicarà les primeres accions que s'executaran. Anomenem aquest missatge com a "saque".

 

Pong01-1.png

A continuació escrivim el codi de la pilota. Per inicialitzar l'acció que programem farem ús del bloc "al rebre saque" que fa referència al missatge que hem creat en el pas anterior, de manera que quan premem la bandera verda, s'inicïn les ordres que li hem programat. 

Tot seguit escrivim la següent línia de codi, la qual fa possible que la pilota comenci en un punt en concret, es mogui i apunti en direcció cap avall (180º).

 

Pong06.png

 

Pressionem la bandera verda i posem el programa en funcionament. Comprovem com funciona el rebot i ens adonem que la pilota sempre executa el mateix moviment. Podem modificar aquest a través de la següent instrucció:

Pong01-2.png

Us preguntareu per què hem utilitzat un nombre a l'atzar entre 120 i 240 quant el sistema de graus d'Scratch va de 0 a 180 tal com veiem a la imatge inferior..

Sistemagraus.PNG

L'explicació és que per determinar l'angle en que volem que apunti la pilota el valorem segons el sistema tradicional de graus, és a dir, tenim en compte que una volta sencera compren 360º. D'aquí l'angle comprès entre 120 i 240. 

 

La paleta

Ja tenim la pilota en moviment, construïm un nou objecte per interactuar amb la pilota seguint els mateixos passos que hem fet amb la pilota, A aquest objecte l'anomenem "paleta".

Pong01-4.png

A l'editor de dibuixos dibuixem un rectangle, procurant que el centre quedi ben col·locat.

Pong02-1.png

A aquest objecte li afegim el següent codi:

Pong02-2.png

Amb aquest codi aconseguim que l'objecte "Paleta" segueixi el moviment en "x" del ratolí. Ara hem d'aconseguir que la paleta i la pilota interactuïn. Per això modificarem el codi de la paleta de la següent forma:

Pong10-1.png

 

El rebot

Anem a escriure el codi de rebotar. 

Pong10-2.png

 

La línia de fons

Comprovem com funciona el rebot. Anem a afegir un nou objecte, que ens servirà per detectar quan la pilota toca la línia de fons i per tant podrem utilitzar aquesta per tal de perdre punts cada vegada que la pilota la toqui. Creemun nou objecte, obrim l'editor de dibuix i dibuixem un objecte com es mostra en la següent imatge i l'anomenem línia de fons.

PongLineadefondo.png

Modifiquem el codi de la "Pilota" perquè aquesta interactuï amb el "Fons":

PongTocandofondo.png

Seria convenient que poguéssim comptar les vegades que la pilota toca el fons. Per fer-ho creem una variable que anomenem "marcador".

PongVariablemarcador.png

Cada vegada que la "Pilota" toca la línia de fons incrementem aquesta en un.

PongCodigomarcador.png

Quan iniciem la partida haurem de posar aquesta variable a zero. Per això escrivim el següent codi a l'escenari. Hem construït un nou missatge "inicia" que utilitzarem més endavant per fixar la posició inicial de tots els objectes

PongMensajeinicia.png

 

Perdre la partida

Fem que la partida duri un nombre determinat de punts. Canviem el bucle "per sempre" del codi de la pilota per un "repetir fins que ..." amb la condició desitjada.

PongCodigocomarcador.png

Afegim un missatge (enviar "fi") al codi per activar les condicions de final de partida.

PongFinpartida.png

Dibuixem un nou escenari per al final de partida.

PongFondofinal.png

Modifiquem el codi de l'escenari perquè respongui als missatges "inicia" i "fi".

PongEscenariocodigofinal.png

Per acabar afegim els comportaments "inicia" i "fi" als altres objectes.

Pera a la pilota

PongPelotafin.png

Per a la paleta:

PongPelotafin.png