Difference between revisions of "Laika al laberint espacial"

From Edutec Wiki
Jump to: navigation, search
Line 8: Line 8:
 
'''La pràctica que es desenvolupa a continuació permet dissenyar el joc “El Laberint”. Aquest consisteix en aconseguir alliberar la gossa Laika del laberint on es troba.'''
 
'''La pràctica que es desenvolupa a continuació permet dissenyar el joc “El Laberint”. Aquest consisteix en aconseguir alliberar la gossa Laika del laberint on es troba.'''
  
[[File:1.PNG]]
+
[[File:1.PNG|RTENOTITLE]]
  
 
<meta charset="utf-8"></meta>
 
<meta charset="utf-8"></meta>
Line 14: Line 14:
 
'''PREPARACIÓ DEL JOC'''
 
'''PREPARACIÓ DEL JOC'''
  
#
+
#&nbsp;  
'''El primer pas és crear el laberint. Aquest serà un objecte per tal de facilitar la programació del joc aconseguint que un altre objecte el toqui. Així que, obrim l’editor d’imatges de la categoria “objectes”'''[[File:1.01.PNG]] &nbsp;i de les opcions que se’ns despleguen escollim la de “dibuix” [[File:1.1.PNG]][[File:Doss.PNG]]<meta charset="utf-8"></meta>
+
  
 +
'''El primer pas és crear el laberint. Aquest serà un objecte per tal de facilitar la programació del joc aconseguint que un altre objecte el toqui. Així que, obrim l’editor d’imatges de la categoria “objectes”'''[[File:1.01.PNG|RTENOTITLE]] &nbsp;i de les opcions que se’ns despleguen escollim la de “dibuix” [[File:1.1.PNG|RTENOTITLE]][[File:Doss.PNG|RTENOTITLE]]<meta charset="utf-8"></meta>
  
 
'''Fixem-nos en els elements remarcats a la imatge que es mostra a contianuació. Aquests seran els paràmetres que utilitzarem per dibuixar el laberint.'''
 
'''Fixem-nos en els elements remarcats a la imatge que es mostra a contianuació. Aquests seran els paràmetres que utilitzarem per dibuixar el laberint.'''
  
[[File:3.PNG]]
+
[[File:3.PNG|RTENOTITLE]]
  
 
&nbsp;
 
&nbsp;
Line 28: Line 28:
 
'''&nbsp;&nbsp;&nbsp;Dibuixem primer el contron del laberint amb un quadrat buit.'''
 
'''&nbsp;&nbsp;&nbsp;Dibuixem primer el contron del laberint amb un quadrat buit.'''
  
'''[[File:4.PNG]]'''
+
'''[[File:4.PNG|RTENOTITLE]]'''
  
 
&nbsp;
 
&nbsp;
Line 36: Line 36:
 
'''&nbsp;Seguidament dibuixem les línies que separen els carrils del laberint (si mentre dibuixem mentenim premuda la tecla “Shift” del teclat aconseguirem que la línia que dibuixem sigui recte.'''
 
'''&nbsp;Seguidament dibuixem les línies que separen els carrils del laberint (si mentre dibuixem mentenim premuda la tecla “Shift” del teclat aconseguirem que la línia que dibuixem sigui recte.'''
  
'''[[File:5.PNG]]'''
+
'''[[File:5.PNG|RTENOTITLE]]'''
  
 
&nbsp;
 
&nbsp;
Line 44: Line 44:
 
'''Per últim, modifiquem el nom de l’objecte podent-li un nom que ens pugui ser facilment identificable posteriorment.'''
 
'''Per últim, modifiquem el nom de l’objecte podent-li un nom que ens pugui ser facilment identificable posteriorment.'''
  
'''[[File:6.PNG]]'''
+
'''[[File:6.PNG|RTENOTITLE]]'''
  
 
<meta charset="utf-8"></meta>'''&nbsp;&nbsp;&nbsp;&nbsp;El resultat és el següent:'''
 
<meta charset="utf-8"></meta>'''&nbsp;&nbsp;&nbsp;&nbsp;El resultat és el següent:'''
  
'''[[File:7.PNG]]'''
+
'''[[File:7.PNG|RTENOTITLE]]'''
  
<meta charset="utf-8"></meta>'''2) Pugem un segon objecte, que serà el protagonista del joc. Per fer-ho tornem a la categoria &nbsp;''''''[[File:9.PNG]]&nbsp;i fem clic sobre aquesta mateixa icona.'''
+
<meta charset="utf-8"></meta>'''2) Pugem un segon objecte, que serà el protagonista del joc. Per fer-ho tornem a la categoria &nbsp;''''''[[File:9.PNG|RTENOTITLE]]&nbsp;i fem clic sobre aquesta mateixa icona.'''
  
'''[[File:8.PNG]]'''
+
'''[[File:8.PNG|RTENOTITLE]]'''
  
 
<meta charset="utf-8"></meta>'''3) Per acabar amb la preparació del joc, si volem també podem afegir un fons. Fem clic a la icona que trobem a l’escenari &nbsp;i seleccionem un dels fons de la biblioteca del programa.'''
 
<meta charset="utf-8"></meta>'''3) Per acabar amb la preparació del joc, si volem també podem afegir un fons. Fem clic a la icona que trobem a l’escenari &nbsp;i seleccionem un dels fons de la biblioteca del programa.'''
  
[[File:11.PNG]]
+
[[File:11.PNG|RTENOTITLE]]
  
'''[[File:10.PNG]]'''
+
'''[[File:10.PNG|RTENOTITLE]]'''
  
 
&nbsp;
 
&nbsp;
Line 74: Line 74:
 
'''4) Comencem aconseguint que el personatge es mogui i que a més, es mogui seguint el punter del ratolí. Per fer-ho hem d’assegurar-nos que tenim seleccionat el personatge i acte seguit construir el següent programa de codi:'''
 
'''4) Comencem aconseguint que el personatge es mogui i que a més, es mogui seguint el punter del ratolí. Per fer-ho hem d’assegurar-nos que tenim seleccionat el personatge i acte seguit construir el següent programa de codi:'''
  
[[File:12.PNG]][[File:13.PNG]]
+
[[File:12.PNG|RTENOTITLE]][[File:13.PNG|RTENOTITLE]]
  
 
<meta charset="utf-8"></meta>
 
<meta charset="utf-8"></meta>
Line 82: Line 82:
 
'''Seleccionem doncs els blocs que es mostren a continuació i en muntem un petit programa:'''
 
'''Seleccionem doncs els blocs que es mostren a continuació i en muntem un petit programa:'''
  
<br/> [[File:14.PNG]][[File:15.PNG]][[File:16.PNG]]
+
<br/> [[File:14.PNG|RTENOTITLE]][[File:15.PNG|RTENOTITLE]][[File:16.PNG|RTENOTITLE]]
  
[[File:17.PNG]]
+
[[File:17.PNG|RTENOTITLE]]
  
 
&nbsp;
 
&nbsp;
Line 92: Line 92:
 
'''6) Agrupem el nou bloc de programació amb el que haviem fet'''
 
'''6) Agrupem el nou bloc de programació amb el que haviem fet'''
  
[[File:18.PNG]]&nbsp;
+
[[File:18.PNG|RTENOTITLE]]&nbsp;
  
 
<meta charset="utf-8"></meta>'''7) Millorem el programa afegint que al iniciar el joc el nostre personatge comenci sempre al punt d’inici, i es mostri en la direcció correcte.'''
 
<meta charset="utf-8"></meta>'''7) Millorem el programa afegint que al iniciar el joc el nostre personatge comenci sempre al punt d’inici, i es mostri en la direcció correcte.'''
  
[[File:19.PNG]]
+
[[File:19.PNG|RTENOTITLE]]
 +
 
 +
<meta charset="utf-8"></meta>'''8) Donem dinamisme al joc aconseguint moure el personatge. Per aconseguir-ho caldrà utilitzar els blocs que permeten canviar el vestit d’un personatge. Si consulten la pestanya “vestits” del personatge que hem escollit veiem que en té 4:'''
 +
 
 +
[[File:20.PNG]]
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''Eliminem l’últim vestit, és a dir, el número 4 ja que el personatge es mostra d’esquenes i no ens interessa en aquest joc que es visualitzi aquest vestit. Per eliminiar-lo només cal que ens posem sobre el vestit 4 i fem clic a la creu de dalt a la dreta de la casella.'''
 +
 
 +
<br/> '''Seguidament tornem a la pestanya de programació i afegim els blocs que tenim a continuació (els quals ens permeten canviar el vestit del personatge fent així més real el moviment d’aquest):'''
 +
 
 +
'''[[File:21.PNG]][[File:22.PNG]]'''
 +
 
 +
'''[[File:23.PNG]]'''
 +
 
 +
&nbsp;
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''8) Afegim complexitat al programa fent que el joc comenci amb 3 vides i les perdi cada vegada que el personatge topa amb una paret del laberint.'''
 +
 
 +
'''Seleccionem la categoria [[File:24.PNG]]&nbsp;i fem clic sobre https://lh3.googleusercontent.com/VBmhgeGDip7cqUCpzGW1pB9OB_DcGAEPZmaVQbU79C_tCUGgvpwwlsK-udMooCOgBCOSVat6mgVBYatvaY2W2Vd5g8-5tZEFcCutEcRqeck7_hFahhSOSV9NLvvVredSNAMF2WEK, observem que se’ns obra una nova pantalla on podem posar el nom de la variable que volem crear. En aquest cas volem que sigui el comptador de vides, per tant l’anomenem amb aquest nom:'''
 +
 
 +
'''[[File:26.PNG]]'''
 +
 
 +
<meta charset="utf-8"></meta>'''Observem que un cop creada ja ens apareix a l’apartat de variables amb el nom que li hem posat.'''
 +
 
 +
'''[[File:27.PNG]]'''
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''La casella que ens apareix a l’esquerre del bloc serveix perquè la variable se’ns mostri a la pantalla del joc (o per contra, no es mostri si el deixem sense seleccionar).'''
 +
 
 +
&nbsp;
 +
 
 +
'''Afegim al programa ja construït que al tocar una de les parets del laberint, a banda de retornar a l’inici resti també una vida del personatge. https://docs.google.com/a/e-citilab.eu/drawings/d/s0Or6C_WzEjeV-9-VKRMEcg/image?w=210&h=273&rev=8&ac=1&parent=1TfDS-ve6G5aKnelKtMDGkC-ZqscpWq8Jpvn2zQEYg5Q'''
 +
 
 +
&nbsp;
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''Adonem-nos que al iniciar el comptador comença aquest es troba a 0. Per aconseguir que al iniciar el joc ja disposem d’alguna vida cal que fixem a l’inici que el marcador es trobi ja predeterminat amb per exemple 3 vides.'''
 +
 
 +
[[File:29.PNG]]
 +
 
 +
&nbsp;
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''Per acabar de tancar el joc farem que quan el comptador es trobi a 0 s’aturi tot.'''
 +
 
 +
'''Necessitem quatre blocs nous:'''
 +
 
 +
[[File:30.PNG]][[File:31.PNG]][[File:32.PNG]][[File:33.PNG]]
 +
 
 +
[[File:34.PNG]]
 +
 
 +
<meta charset="utf-8"></meta>'''Modifiquem el programa canviant el “per sempre” per el “repeteix fins” que el comptador de vides estigui a 0.'''
 +
 
 +
[[File:35.PNG]]
 +
 
 +
&nbsp;
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''ENVIAMENT DE MISSATGES'''
 +
 
 +
&nbsp;
 +
 
 +
'''L’ús de missatges en la construcció dels programes és un bon mètode per fer que uns objectes es comuniquin amb els altres. En aquest cas ens servirà per reiniciar el joc cada vegada que el personatge toca una paret del laberint i a més ens permetrà sintetitzar el codi.'''
 +
 
 +
'''Necessitem dels dos blocs següents per utilitzar els missatges:'''
 +
 
 +
[[File:36.PNG]]
 +
 
 +
<meta charset="utf-8"></meta>'''El missatge que volem enviar cal que el personalitzem. Podem fer tants missatges com ordres necessitem realitzar. En aquest cas anomenem “Inici del joc” al missatge. '''[[File:37.PNG]]
 +
 
 +
&nbsp;
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''Modifiquem el programa que haviem construir afegint aquest blocs de programació. Per una banda organitzem les ordres d’inici del joc en un primer programa i col·loquem l’enviament de missatge en aquest primer bloc. Seguidament fem un segon bloc amb les accions que realitza el personatge un cop rep l’ordre d’iniciar-se.'''
 +
 
 +
'''També podem utilitzar l’enviament del missatge per quan es toquin les parets del laberint el joc es reinici automàticament. El codi quedaria així:'''
 +
 
 +
[[File:39.PNG]]
 +
 
 +
&nbsp;
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''TANCAMENT DEL JOC<br/> Per finalitzar el joc afegirem un petit programa que permeti detectar quan el personatge ha arribat a la sortida del laberint.'''
 +
 
 +
'''Per fer-ho primer caldrà modificar el laberin i borrar-ne una paret al final:'''
 +
 
 +
[[File:39.PNG]]
 +
 
 +
&nbsp;
 +
 
 +
<meta charset="utf-8"></meta>
 +
 
 +
'''Un cop fet això, afegim el següent programa:&nbsp;'''
 +
 
 +
'''[[File:40.PNG]]'''
 +
 
 +
'''[[File:41.PNG]]'''
 +
 
 +
<meta charset="utf-8"></meta>'''Aquest cop però qui rep el missatge és un nou objecte. Generem un nou objecte i aquest cop fem ús del text de l’editor d’imatges:'''
 +
 
 +
[[File:42.PNG]]
 +
 
 +
<meta charset="utf-8"></meta>'''Per últim agefim el següent codi en aquest nou objecte:'''
 +
 
 +
[[File:43.PNG]]
 +
 
 +
&nbsp;
 +
 
 +
&nbsp;
 +
 
 +
&nbsp;
  
 
&nbsp;
 
&nbsp;

Revision as of 12:42, 30 November 2018

 

<meta charset="utf-8"></meta>

Dissenya el teu laberint

La pràctica que es desenvolupa a continuació permet dissenyar el joc “El Laberint”. Aquest consisteix en aconseguir alliberar la gossa Laika del laberint on es troba.

RTENOTITLE

<meta charset="utf-8"></meta>

PREPARACIÓ DEL JOC

  1.  

El primer pas és crear el laberint. Aquest serà un objecte per tal de facilitar la programació del joc aconseguint que un altre objecte el toqui. Així que, obrim l’editor d’imatges de la categoria “objectes”RTENOTITLE  i de les opcions que se’ns despleguen escollim la de “dibuix” RTENOTITLERTENOTITLE<meta charset="utf-8"></meta>

Fixem-nos en els elements remarcats a la imatge que es mostra a contianuació. Aquests seran els paràmetres que utilitzarem per dibuixar el laberint.

RTENOTITLE

 

<meta charset="utf-8"></meta>

   Dibuixem primer el contron del laberint amb un quadrat buit.

RTENOTITLE

 

<meta charset="utf-8"></meta>

 Seguidament dibuixem les línies que separen els carrils del laberint (si mentre dibuixem mentenim premuda la tecla “Shift” del teclat aconseguirem que la línia que dibuixem sigui recte.

RTENOTITLE

 

<meta charset="utf-8"></meta>

Per últim, modifiquem el nom de l’objecte podent-li un nom que ens pugui ser facilment identificable posteriorment.

RTENOTITLE

<meta charset="utf-8"></meta>    El resultat és el següent:

RTENOTITLE

<meta charset="utf-8"></meta>'2) Pugem un segon objecte, que serà el protagonista del joc. Per fer-ho tornem a la categoria  'RTENOTITLE i fem clic sobre aquesta mateixa icona.

RTENOTITLE

<meta charset="utf-8"></meta>3) Per acabar amb la preparació del joc, si volem també podem afegir un fons. Fem clic a la icona que trobem a l’escenari  i seleccionem un dels fons de la biblioteca del programa.

RTENOTITLE

RTENOTITLE

 

<meta charset="utf-8"></meta>

COMENCEM AMB EL PROGRAMA

 

Fins aquí hem preparat l’estructura del joc, en aquest segon apartat passem a contruir el programa.

 

4) Comencem aconseguint que el personatge es mogui i que a més, es mogui seguint el punter del ratolí. Per fer-ho hem d’assegurar-nos que tenim seleccionat el personatge i acte seguit construir el següent programa de codi:

RTENOTITLERTENOTITLE

<meta charset="utf-8"></meta>

5) Ara que ja tenim el moviment del personatge hem d’aconseguir que detecti les parets del laberint, ja que fins ara pot moure’s per tot l’espai de l’escenari sense cap impediment.

Seleccionem doncs els blocs que es mostren a continuació i en muntem un petit programa:


RTENOTITLERTENOTITLERTENOTITLE

RTENOTITLE

 

<meta charset="utf-8"></meta>

6) Agrupem el nou bloc de programació amb el que haviem fet

RTENOTITLE 

<meta charset="utf-8"></meta>7) Millorem el programa afegint que al iniciar el joc el nostre personatge comenci sempre al punt d’inici, i es mostri en la direcció correcte.

RTENOTITLE

<meta charset="utf-8"></meta>8) Donem dinamisme al joc aconseguint moure el personatge. Per aconseguir-ho caldrà utilitzar els blocs que permeten canviar el vestit d’un personatge. Si consulten la pestanya “vestits” del personatge que hem escollit veiem que en té 4:

20.PNG

<meta charset="utf-8"></meta>

Eliminem l’últim vestit, és a dir, el número 4 ja que el personatge es mostra d’esquenes i no ens interessa en aquest joc que es visualitzi aquest vestit. Per eliminiar-lo només cal que ens posem sobre el vestit 4 i fem clic a la creu de dalt a la dreta de la casella.


Seguidament tornem a la pestanya de programació i afegim els blocs que tenim a continuació (els quals ens permeten canviar el vestit del personatge fent així més real el moviment d’aquest):

21.PNG22.PNG

23.PNG

 

<meta charset="utf-8"></meta>

8) Afegim complexitat al programa fent que el joc comenci amb 3 vides i les perdi cada vegada que el personatge topa amb una paret del laberint.

Seleccionem la categoria 24.PNG i fem clic sobre https://lh3.googleusercontent.com/VBmhgeGDip7cqUCpzGW1pB9OB_DcGAEPZmaVQbU79C_tCUGgvpwwlsK-udMooCOgBCOSVat6mgVBYatvaY2W2Vd5g8-5tZEFcCutEcRqeck7_hFahhSOSV9NLvvVredSNAMF2WEK, observem que se’ns obra una nova pantalla on podem posar el nom de la variable que volem crear. En aquest cas volem que sigui el comptador de vides, per tant l’anomenem amb aquest nom:

26.PNG

<meta charset="utf-8"></meta>Observem que un cop creada ja ens apareix a l’apartat de variables amb el nom que li hem posat.

27.PNG

<meta charset="utf-8"></meta>

La casella que ens apareix a l’esquerre del bloc serveix perquè la variable se’ns mostri a la pantalla del joc (o per contra, no es mostri si el deixem sense seleccionar).

 

Afegim al programa ja construït que al tocar una de les parets del laberint, a banda de retornar a l’inici resti també una vida del personatge. https://docs.google.com/a/e-citilab.eu/drawings/d/s0Or6C_WzEjeV-9-VKRMEcg/image?w=210&h=273&rev=8&ac=1&parent=1TfDS-ve6G5aKnelKtMDGkC-ZqscpWq8Jpvn2zQEYg5Q

 

<meta charset="utf-8"></meta>

Adonem-nos que al iniciar el comptador comença aquest es troba a 0. Per aconseguir que al iniciar el joc ja disposem d’alguna vida cal que fixem a l’inici que el marcador es trobi ja predeterminat amb per exemple 3 vides.

29.PNG

 

<meta charset="utf-8"></meta>

Per acabar de tancar el joc farem que quan el comptador es trobi a 0 s’aturi tot.

Necessitem quatre blocs nous:

30.PNG31.PNG32.PNG33.PNG

34.PNG

<meta charset="utf-8"></meta>Modifiquem el programa canviant el “per sempre” per el “repeteix fins” que el comptador de vides estigui a 0.

35.PNG

 

<meta charset="utf-8"></meta>

ENVIAMENT DE MISSATGES

 

L’ús de missatges en la construcció dels programes és un bon mètode per fer que uns objectes es comuniquin amb els altres. En aquest cas ens servirà per reiniciar el joc cada vegada que el personatge toca una paret del laberint i a més ens permetrà sintetitzar el codi.

Necessitem dels dos blocs següents per utilitzar els missatges:

36.PNG

<meta charset="utf-8"></meta>El missatge que volem enviar cal que el personalitzem. Podem fer tants missatges com ordres necessitem realitzar. En aquest cas anomenem “Inici del joc” al missatge. 37.PNG

 

<meta charset="utf-8"></meta>

Modifiquem el programa que haviem construir afegint aquest blocs de programació. Per una banda organitzem les ordres d’inici del joc en un primer programa i col·loquem l’enviament de missatge en aquest primer bloc. Seguidament fem un segon bloc amb les accions que realitza el personatge un cop rep l’ordre d’iniciar-se.

També podem utilitzar l’enviament del missatge per quan es toquin les parets del laberint el joc es reinici automàticament. El codi quedaria així:

39.PNG

 

<meta charset="utf-8"></meta>

TANCAMENT DEL JOC
Per finalitzar el joc afegirem un petit programa que permeti detectar quan el personatge ha arribat a la sortida del laberint.

Per fer-ho primer caldrà modificar el laberin i borrar-ne una paret al final:

39.PNG

 

<meta charset="utf-8"></meta>

Un cop fet això, afegim el següent programa: 

40.PNG

41.PNG

<meta charset="utf-8"></meta>Aquest cop però qui rep el missatge és un nou objecte. Generem un nou objecte i aquest cop fem ús del text de l’editor d’imatges:

42.PNG

<meta charset="utf-8"></meta>Per últim agefim el següent codi en aquest nou objecte:

43.PNG