Projecte Frogger 
https://www.dropbox.com/s/31s55fc2cx8ieca/Frogger.rar?dl=0
Carreguem els gràfics 
1. Carreguem el gràfic de la granota (fitxer “Frog_1” a la 
carpeta de gràfics) 
2. Creem un segon vestit per la granota carregant un altre 
gràfic de la granota (fitxer “Frog_2” a la carpeta de gràfics) 
3. Eliminem el gràfic del gat
Moviment bàsic de la granota 
1. Inicialitzar la granota a la posició central inferior 
2. Fer que es mogui cap amunt fins que toqui el límit 
superior de la pantalla 
– Fer moviments de X passos cada vegada 
– Alternar entre els dos vestits de la granota entre dos 
desplaçaments consecutius per donar sensació de moviment 
– Introduir una pausa abans de cada desplaçament per 
visualitzar correctament el moviment 
3. Introduir variables pel nº de passos del desplaçament i 
per la durada de la pausa 
4. Provar diferents combinacions del nº de passos que 
s’avança a cada moviment i la durada de la pausa per 
veure com influeixen a la velocitat del moviment
Desplaçament en totes direccions 
1. Fer que la granota només es desplaci si es prem 
alguna de les fletxes de direcció 
2. Quan es prem una de les fletxes de direcció la granota 
ha de fer un únic moviment complet en aquella direcció 
– Un moviment complet inclourà dos desplaçaments, un amb 
cadascun dels vestits de la granota, amb la durada i nº de 
passos que hagueu fixat en el pas anterior
Possible solució 
Mateix codi. Només 
diferent en el valor 
de la direcció 
Es pot simplificar 
utilitzant FUNCIONS
Funcions 
Idea  Dividir els programes en un conjunt de mòduls més petits i més fàcils de 
manipular (programar, depurar, reutilitzar, etc...). 
Cada mòdul (funció) fa una tasca concreta i independent que es pot executar (cridar) 
tantes vegades com faci falta des de qualsevol altre punt del programa. 
Avantatges d’utilitzar funcions: 
• Simplificació del codi 
• Estructuració i claredat del codi 
• Facilitat per la localització d’errors 
Divisió en funcions 
Funció 1 
Funció 2 
Funció 3 
Execució del programa 
Crides a les funcions
Funcions 
1. Definició de la funció: 
– Què ha de fer la funció? 
 Fer un únic moviment complet en una direcció determinada (un moviment 
complet inclou dos desplaçaments, un amb cadascun dels vestits de la 
granota, amb una durada i nº de passos determinats) 
– Quins valors “externs” necessita la funció per poder-se 
executar? 
 Direcció del moviment 
 Durada de la pausa 
 Nº de passos 
Paràmetres 
2. Execució (crida) de la funció: 
‒ L’execució del programa salta a l’inici de la funció 
‒ S’ha de proporcionar un valor per cadascun dels 
paràmetres 
‒ Quan s’acaba l’execució de la funció es torna al 
punt de la crida
Definició de funcions en Scratch 
2. Nom de la funció 
3. Afegir paràmetres 
1 
4. Afegir tants paràmetres com calgui 
5. Donar nom a cada paràmetre
Definició de funcions en Scratch 
• Afegir el codi de la funció 
• Utilitzar el valor dels paràmetres
Crida a funcions en Scratch 
X 
Especificar un valor per tots els paràmetres
Anem a fer una mica de proves 
• Revisem que tot funciona com abans d’introduir la funció 
• Comprovem què passa si la granota arriba als límits 
laterals o inferior de la pantalla 
– Funciona correctament? 
– Detecteu algun problema? Per què? Com ho podeu solucionar?
Modifiquem l’objectiu de la granota 
• Canviem l’objectiu final del joc 
– Afegim un nou sprite que correspon a la cova on s’ha d’amagar 
la granota (fitxer “Cova” a la carpeta de gràfics) 
– Posicionem aquest nou sprite a la posició central superior 
– Canviem el final del bucle del joc: s’ha d’acabar quan la granota 
està dins de la cova 
Posició (x,y) de la cova 
Posició (x,y) de la granota 
 Per simplificar el codi pot ser convenient: 
‒ Crear una variable que ens indiqui en cada moment si la granota ha 
arribat a la cova (valor de la variable = 1) o si encara no hi ha arribat 
(valor de la variable = 0) 
‒ Crear una funció que comprovi si la granota ha arribat a la cova. Quan 
hi arriba es posa el valor de la variable anterior a 1
Una mica més de proves... 
• Comprovem que el joc s’acaba correctament quan la 
granota entra a la cova completament 
• Fem una altra prova: 
– La granota pot travessar les parets de la cova? 
– Com ho podem solucionar?
Introduïm temps límit 
• La granota ha de tenir un temps límit per arribar fins a la 
cova 
• Scratch ens proporciona un timer que ens permet 
controlar el temps que va passant: 
– Inicialitzar el timer 
– Recuperar el valor del timer 
• El joc ha d’acabar si la granota arriba a la cova o si el 
timer arriba a un temps màxim predeterminat
Introduïm nº de vides 
• Fixem un nº de vides inicial per la granota (p. ex. 3) 
• Si el timer arriba al màxim sense haver pogut entrar a la 
cova s’ha de perdre una vida i tornar a començar el joc 
amb la granota a la seva posició inicial i el timer 
reinicialitzat a 0 
• Quan el nº de vides arriba a 0 o la granota entra a la 
cova s’ha d’acabar la partida 
• Al final de tot hem de mostrar un missatge dient si hem 
perdut (nº de vides = 0) o si hem guanyat (la granota ha 
arribat a la cova)
Canvi en l’estructura del programa 
• Per introduir correctament el nº de vides, és 
aconsellable canviar l’estructura bàsica del programa 
Nº de vides = 0 o granota entra a la cova 
Granota entra a la cova o timer supera temps màxim 
Control de tota la partida 
Control d’una execució 
(vida) del joc 
Inicialització de tota la partida 
Inicialització d’una execució (vida) del joc 
Final d’una execució (vida) del joc 
Final de tota la partida
Introduim els cotxes 
• Afegim un nou gràfic per un cotxe (fitxer “Car_1” a la 
carpeta de gràfics) 
• Moviment bàsic del cotxe: 
– Inicialització a l’extrem esquerre d’una fila predeterminada 
– Moviment continu d’esquerra a dreta fins que el cotxe arriba a 
l’extrem dret 
• Velocitat del moviment controlada pel nº de passos de cada desplaçament i 
la durada de la pausa entre dos desplaçaments consecutius 
• Aquest moviment bàsic del cotxe es repeteix 
contínuament durant tot el programa
Aturem el cotxe 
• Problema: quan s’acaba el joc el cotxe es continua 
movent 
• Solució: utilitzar una variable global que indica si hem 
arribat al final del joc (valor = 1) o encara no (valor = 0) 
– La variable s’activa a la granota al finalitzar el joc 
– S’utilitza al cotxe per controlar el final del moviment del cotxe 
 Assegurar-se que el moviment del cotxe s’acaba immediatament després 
d’acabar el joc i no continua fins arribar a l’extrem dret 
Variable global 
 Atenció amb les variables globals
Col·lisió granota-cotxe 
• A la granota: 
– Es perd una vida 
– La granota torna a la posició inicial 
• Al cotxe: 
– S’atura el moviment del cotxe i torna a començar per l’extrem 
esquerre 
• Comproveu si sempre detecta la col·lisió correctament 
als dos gràfics, a la granota i al cotxe. Per què? Com ho 
podem solucionar?
Afegim nivells de dificultat 
• Afegim una variable (global) que indiqui el nivell de 
dificultat actual del joc 
• Quan la granota arriba a la cova, s’incrementa el nivell 
de dificultat i el joc torna a començar amb la granota a la 
seva posició inicial 
– Ara el joc només s’acaba quan ens quedem sense vides 
• Incrementar el nivell de dificultat ha d’implicar: 
– Incrementar la velocitat de moviment de la granota 
– Incrementar la velocitat de moviment del cotxe 
– Decrementar el temps màxim per arribar a la cova 
• Tingueu en compte que tots els valors que depenen del 
nivell de dificultat s’han de reinicialitzar cada cop que la 
granota o el cotxe tornen a la seva posició incial
Extensió a tots els cotxes 
• Afegim gràfics per tots els cotxes carregant la resta de 
fitxers que hi ha a la carpeta gràfics 
• Cada cotxe tindrà una posició y determinada, una 
velocitat pròpia diferent dels altres cotxes i una direcció 
de moviment fixada (alguns cotxes aniran d’esquerra a 
dreta i altres de dreta a esquerra) 
• Posició inicial dels cotxes:
Extensió a tots els cotxes 
• La granota ha de perdre una vida si col·lisiona amb 
qualsevol dels cotxes 
• Per detectar-ho de forma simple és convenient crear una 
funció que s’encarregui de comprovar si la ha xocat amb 
algun dels cotxes. 
– Si hi ha hagut col·lisió posa a 1 el valor d’una variable que 
controla la col·lisió 
– A la condició del bucle de control del joc només hem de mirar el 
valor d’aquesta variable per saber si hi ha hagut col·lisió o no

Frogger alumnes

  • 1.
  • 2.
    Carreguem els gràfics 1. Carreguem el gràfic de la granota (fitxer “Frog_1” a la carpeta de gràfics) 2. Creem un segon vestit per la granota carregant un altre gràfic de la granota (fitxer “Frog_2” a la carpeta de gràfics) 3. Eliminem el gràfic del gat
  • 3.
    Moviment bàsic dela granota 1. Inicialitzar la granota a la posició central inferior 2. Fer que es mogui cap amunt fins que toqui el límit superior de la pantalla – Fer moviments de X passos cada vegada – Alternar entre els dos vestits de la granota entre dos desplaçaments consecutius per donar sensació de moviment – Introduir una pausa abans de cada desplaçament per visualitzar correctament el moviment 3. Introduir variables pel nº de passos del desplaçament i per la durada de la pausa 4. Provar diferents combinacions del nº de passos que s’avança a cada moviment i la durada de la pausa per veure com influeixen a la velocitat del moviment
  • 4.
    Desplaçament en totesdireccions 1. Fer que la granota només es desplaci si es prem alguna de les fletxes de direcció 2. Quan es prem una de les fletxes de direcció la granota ha de fer un únic moviment complet en aquella direcció – Un moviment complet inclourà dos desplaçaments, un amb cadascun dels vestits de la granota, amb la durada i nº de passos que hagueu fixat en el pas anterior
  • 5.
    Possible solució Mateixcodi. Només diferent en el valor de la direcció Es pot simplificar utilitzant FUNCIONS
  • 6.
    Funcions Idea Dividir els programes en un conjunt de mòduls més petits i més fàcils de manipular (programar, depurar, reutilitzar, etc...). Cada mòdul (funció) fa una tasca concreta i independent que es pot executar (cridar) tantes vegades com faci falta des de qualsevol altre punt del programa. Avantatges d’utilitzar funcions: • Simplificació del codi • Estructuració i claredat del codi • Facilitat per la localització d’errors Divisió en funcions Funció 1 Funció 2 Funció 3 Execució del programa Crides a les funcions
  • 7.
    Funcions 1. Definicióde la funció: – Què ha de fer la funció?  Fer un únic moviment complet en una direcció determinada (un moviment complet inclou dos desplaçaments, un amb cadascun dels vestits de la granota, amb una durada i nº de passos determinats) – Quins valors “externs” necessita la funció per poder-se executar?  Direcció del moviment  Durada de la pausa  Nº de passos Paràmetres 2. Execució (crida) de la funció: ‒ L’execució del programa salta a l’inici de la funció ‒ S’ha de proporcionar un valor per cadascun dels paràmetres ‒ Quan s’acaba l’execució de la funció es torna al punt de la crida
  • 8.
    Definició de funcionsen Scratch 2. Nom de la funció 3. Afegir paràmetres 1 4. Afegir tants paràmetres com calgui 5. Donar nom a cada paràmetre
  • 9.
    Definició de funcionsen Scratch • Afegir el codi de la funció • Utilitzar el valor dels paràmetres
  • 10.
    Crida a funcionsen Scratch X Especificar un valor per tots els paràmetres
  • 11.
    Anem a feruna mica de proves • Revisem que tot funciona com abans d’introduir la funció • Comprovem què passa si la granota arriba als límits laterals o inferior de la pantalla – Funciona correctament? – Detecteu algun problema? Per què? Com ho podeu solucionar?
  • 12.
    Modifiquem l’objectiu dela granota • Canviem l’objectiu final del joc – Afegim un nou sprite que correspon a la cova on s’ha d’amagar la granota (fitxer “Cova” a la carpeta de gràfics) – Posicionem aquest nou sprite a la posició central superior – Canviem el final del bucle del joc: s’ha d’acabar quan la granota està dins de la cova Posició (x,y) de la cova Posició (x,y) de la granota  Per simplificar el codi pot ser convenient: ‒ Crear una variable que ens indiqui en cada moment si la granota ha arribat a la cova (valor de la variable = 1) o si encara no hi ha arribat (valor de la variable = 0) ‒ Crear una funció que comprovi si la granota ha arribat a la cova. Quan hi arriba es posa el valor de la variable anterior a 1
  • 13.
    Una mica mésde proves... • Comprovem que el joc s’acaba correctament quan la granota entra a la cova completament • Fem una altra prova: – La granota pot travessar les parets de la cova? – Com ho podem solucionar?
  • 14.
    Introduïm temps límit • La granota ha de tenir un temps límit per arribar fins a la cova • Scratch ens proporciona un timer que ens permet controlar el temps que va passant: – Inicialitzar el timer – Recuperar el valor del timer • El joc ha d’acabar si la granota arriba a la cova o si el timer arriba a un temps màxim predeterminat
  • 15.
    Introduïm nº devides • Fixem un nº de vides inicial per la granota (p. ex. 3) • Si el timer arriba al màxim sense haver pogut entrar a la cova s’ha de perdre una vida i tornar a començar el joc amb la granota a la seva posició inicial i el timer reinicialitzat a 0 • Quan el nº de vides arriba a 0 o la granota entra a la cova s’ha d’acabar la partida • Al final de tot hem de mostrar un missatge dient si hem perdut (nº de vides = 0) o si hem guanyat (la granota ha arribat a la cova)
  • 16.
    Canvi en l’estructuradel programa • Per introduir correctament el nº de vides, és aconsellable canviar l’estructura bàsica del programa Nº de vides = 0 o granota entra a la cova Granota entra a la cova o timer supera temps màxim Control de tota la partida Control d’una execució (vida) del joc Inicialització de tota la partida Inicialització d’una execució (vida) del joc Final d’una execució (vida) del joc Final de tota la partida
  • 17.
    Introduim els cotxes • Afegim un nou gràfic per un cotxe (fitxer “Car_1” a la carpeta de gràfics) • Moviment bàsic del cotxe: – Inicialització a l’extrem esquerre d’una fila predeterminada – Moviment continu d’esquerra a dreta fins que el cotxe arriba a l’extrem dret • Velocitat del moviment controlada pel nº de passos de cada desplaçament i la durada de la pausa entre dos desplaçaments consecutius • Aquest moviment bàsic del cotxe es repeteix contínuament durant tot el programa
  • 18.
    Aturem el cotxe • Problema: quan s’acaba el joc el cotxe es continua movent • Solució: utilitzar una variable global que indica si hem arribat al final del joc (valor = 1) o encara no (valor = 0) – La variable s’activa a la granota al finalitzar el joc – S’utilitza al cotxe per controlar el final del moviment del cotxe  Assegurar-se que el moviment del cotxe s’acaba immediatament després d’acabar el joc i no continua fins arribar a l’extrem dret Variable global  Atenció amb les variables globals
  • 19.
    Col·lisió granota-cotxe •A la granota: – Es perd una vida – La granota torna a la posició inicial • Al cotxe: – S’atura el moviment del cotxe i torna a començar per l’extrem esquerre • Comproveu si sempre detecta la col·lisió correctament als dos gràfics, a la granota i al cotxe. Per què? Com ho podem solucionar?
  • 20.
    Afegim nivells dedificultat • Afegim una variable (global) que indiqui el nivell de dificultat actual del joc • Quan la granota arriba a la cova, s’incrementa el nivell de dificultat i el joc torna a començar amb la granota a la seva posició inicial – Ara el joc només s’acaba quan ens quedem sense vides • Incrementar el nivell de dificultat ha d’implicar: – Incrementar la velocitat de moviment de la granota – Incrementar la velocitat de moviment del cotxe – Decrementar el temps màxim per arribar a la cova • Tingueu en compte que tots els valors que depenen del nivell de dificultat s’han de reinicialitzar cada cop que la granota o el cotxe tornen a la seva posició incial
  • 21.
    Extensió a totsels cotxes • Afegim gràfics per tots els cotxes carregant la resta de fitxers que hi ha a la carpeta gràfics • Cada cotxe tindrà una posició y determinada, una velocitat pròpia diferent dels altres cotxes i una direcció de moviment fixada (alguns cotxes aniran d’esquerra a dreta i altres de dreta a esquerra) • Posició inicial dels cotxes:
  • 22.
    Extensió a totsels cotxes • La granota ha de perdre una vida si col·lisiona amb qualsevol dels cotxes • Per detectar-ho de forma simple és convenient crear una funció que s’encarregui de comprovar si la ha xocat amb algun dels cotxes. – Si hi ha hagut col·lisió posa a 1 el valor d’una variable que controla la col·lisió – A la condició del bucle de control del joc només hem de mirar el valor d’aquesta variable per saber si hi ha hagut col·lisió o no