Da WIKI CoderDojo Firenze.
Riga 110: Riga 110:
 
sostituire il blocco:
 
sostituire il blocco:
  
[[File:Ctb014.png|Image:ctb014.png]]
+
[[File:Ctb014.png|Image:ctb014.png]] con il blocco
con il blocco
+
  
 
[[File:Ctb015.png|Image:ctb015.png]]
 
[[File:Ctb015.png|Image:ctb015.png]]
  
 
+
<br/><br/><br/>Allo Sprite '''Pallina''' va poi aggiunto un miniblocco che all’avvio lo nasconda:
<br/><br/>Allo Sprite '''Pallina''' va poi aggiunto un miniblocco che all’avvio lo nasconda:
+
  
 
[[File:Ctb016.png|Image:ctb016.png]]
 
[[File:Ctb016.png|Image:ctb016.png]]
 +
  
  
Riga 136: Riga 135:
  
 
[[File:Ctb018.png|Image:ctb018.png]]
 
[[File:Ctb018.png|Image:ctb018.png]]
 +
  
  
Riga 166: Riga 166:
 
Definire uno Sprite con una scritta di “'''Livello Terminato'''” che appaia alla fine della partita in caso di successo, cioè quando tutti i mattoni sono stati distrutti (la variabile '''numero_mattoni''' arriva a zero).
 
Definire uno Sprite con una scritta di “'''Livello Terminato'''” che appaia alla fine della partita in caso di successo, cioè quando tutti i mattoni sono stati distrutti (la variabile '''numero_mattoni''' arriva a zero).
  
[[File:Ctb022.png|Image:ctb022.png]]
+
[[File:Ctb022.png|Image:ctb022.png]]<br/><br/>Definire uno Sprite di “'''Game Over'''” che appare quando la missione fallisce, cioè le palline finiscono e sono presenti ancora mattoni.
<br/><br/>Definire uno Sprite di “'''Game Over'''” che appare quando la missione fallisce, cioè le palline finiscono e sono presenti ancora mattoni.
+
  
 
[[File:Ctb023.png|Image:ctb023.png]]
 
[[File:Ctb023.png|Image:ctb023.png]]
Riga 204: Riga 203:
 
[[File:Ctb025.png|Image:ctb025.png]]
 
[[File:Ctb025.png|Image:ctb025.png]]
  
=== Appendice (per i pigri): tutti gli script ===
+
== Appendice (per i pigri): tutti gli script ==
  
==== PALLINA ====
+
=== PALLINA ===
  
 
[[File:Ctb026.png|Image:ctb026.png]]
 
[[File:Ctb026.png|Image:ctb026.png]]
  
==== ZONA MANGIA PALLE ====
+
=== ZONA MANGIA PALLE ===
  
 
[[File:Ctb027.png|Image:ctb027.png]]
 
[[File:Ctb027.png|Image:ctb027.png]]
  
==== RACCHETTA ====
+
=== RACCHETTA ===
  
 
[[File:Ctb028.png|Image:ctb028.png]]
 
[[File:Ctb028.png|Image:ctb028.png]]
  
==== MATTONE ====
+
=== MATTONE ===
  
 
[[File:Ctb029.png|Image:ctb029.png]]
 
[[File:Ctb029.png|Image:ctb029.png]]
  
==== LIVELLO TERMINATO ====
+
=== LIVELLO TERMINATO ===
  
 
[[File:Ctb030.png|Image:ctb030.png]]
 
[[File:Ctb030.png|Image:ctb030.png]]
  
==== GAME OVER ====
+
=== GAME OVER ===
  
 
[[File:Ctb031.png|Image:ctb031.png]]
 
[[File:Ctb031.png|Image:ctb031.png]]
 
 
[[Category:Scratch|B]]
 
[[Category:Scratch|B]]

Versione delle 23:03, 15 nov 2015

Coderdojo Firenze -- Tutorial Breakout

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

Scopo del gioco è demolire il muro di mattoni nella parte alta dello schermo utilizzando la pallina rimbalzante. Tutte le volte che la pallina tocca un mattone questo viene demolito e scompare. Quando tutti i mattoni sono scomparsi hai vinto.

Se la pallina tocca la parte bassa dello schermo questa viene persa. Ci sono più palline, quanto tutte vengono perse, il gioco termina.

Per evitare che la pallina arrivi in fondo allo schermo, essa deve essere rinviata verso l’alto utilizzando una racchetta. La racchetta viene controllata dal giocatore utilizzando, per esempio, i tasti freccia destra e sinistra, oppure il puntatore del mouse.


La pallina: movimento nell’area di gioco

Iniziare un nuovo progetto ed eliminare lo sprite del gatto Scratch che per questo gioco non serve.

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione
Creare un nuovo sprite, scegliendo dalla libreria una pallina, per esempio la “Beachball”. Cambiargli il nome in “Pallina”. Scrivere uno script che fa muovere la pallina a velocità costante all’interno del campo di gioco. Fare in modo che tutte le volte che si riavvia il programma, la pallina parta da una posizione all’interno dello schermo che abbia come x un valore a caso tra tutti quelli possibili e come y il valore 0. Con questa scelta tutte le volte che il gioco inizia la pallina si troverà in un punto a caso della linea orizzontale che attraversa il centro dell’area di gioco (vedi figura).
Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


Fare in modo che la pallina si muova in una direzione a caso verso il basso. Per impostare la direzione, ricordarsi di come si misurano gli angoli nello stage di gioco. Fare riferimento alla figura sotto; in particolare notare come gli angoli si possano misurare in due modi: da 0 a 360 gradi girando in senso orario e da -180 a 180 passando per lo zero (che indica sempre la direzione verso l’alto).

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


Per evitare che la pallina sia troppo grossa, ridurre inoltre la dimensione utilizzando il blocco “porta dimensione al NN%”. Nel caso della BeachBall portare la sua dimensione al 20%. Ultima cosa: la pallina deve rimbalzare quando tocca il bordo. Il programma risultante è riportato sotto.

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

La pallina: come farla scomparire e far terminare il programma se tocca la parte bassa dello schermo?

Per realizzare questo esistono vari modi, oggi proveremo quello della “zona Mangia Palle”.

Definiamo un nuovo sprite, di nome “ZonaMangiaPalle” costituito da una semplice linea orizzontale di colore giallo che attraversa tutto lo schermo e collochiamolo nella parte bassa dello schermo.

Tip 1: per fare in modo che la linea venga perfettamente orizzontale, mentre si disegna tenere premuto il tasto “Maiuscolo” (o Shift).

Tip 2: ricordarsi centrare lo sprite in modo preciso.

Fare in modo che all’avvio che questo sprite si collochi nella parte bassa del campo di gioco tramite lo script mostrato a lato.

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

A questo punto aggiungere allo Sprite Pallina lo script sotto:

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


Dopo questa modifica il gioco risulterà estremamente corto! Infatti all’avvio del gioco Pallina partirà diretta verso il basso e come dopo pochi secondi toccherà ZonaMangiaPalle scomparirà dando termine al gioco. Dobbiamo trovare il modo di controllare la palllina in modo da reinviarla verso l’alto!

La racchetta: rispedire la pallina verso l’alto

Per far durare il gioco di più costruiamo un nuovo Sprite chiamato “Racchetta” che altro non è che un rettangolo nero che si può spostare solo in orizzontale nella zona immediatamente sopra la zona mangia palle.

Tip 3: definire lo stile di rotazione dello Sprite di tipo “solo orizzontale”.

Per far muovere la racchetta si possono utilizzare diversi metodi, tra cui:

  • utilizzare i tasti freccia sinistra e destra
  • seguire la posizione del mouse

Qui sotto viene riportato il programma da realizzare per ciascuno dei due casi

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


A questo punto rimane da aggiungere a Pallina il codice per farla rimbalzare quando tocca Racchetta.

ATTENZIONE: questa è la vera parte complicata di questo tutorial. L’algoritmo che implementa il rimbalzo è particolarmente complicato. Se siete dei veri Ninja provate a farlo da solo. Se non ci riuscite trovate la risposta nella prossima pagina.

Vista la sua complessità l’algoritmo di “rimbalzo” merita di essere contenuto all’interno di un blocco dedicato, realizzato tramite il sistema degli “Altri Blocchi”. Per fare questo andare nella sezione “Altri blocchi” e cliccare sul tasto “Crea un blocco”.

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione



Dare al blocco il nome “RIMBALZA”, quindi scrivere il codice da eseguire sotto il “cappello viola” con nome “definisci RIMBALZA” (vedi sotto a destra). Adesso tutte le volte che vorremo far rimbalzare la pallina basterà utilizzare il nuovo blocco “RIMBALZA”.

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

A questo punto è possibile divertirsi a far rimbalzare la pallina verso l’alto in modo da non farla cadere nella “Zona Mangia Palle”.

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

Il muro da abbattere

Adesso passiamo alla costruzione del muro da abbattere con la pallina. Come sappiamo, il muro è formato da mattoni. Costruiamo quindi un nuovo sprite chiamato “Mattone”, che altro non è che un rettangolo di colore più o meno marrone. Aiutarsi con la “grid” e fare più o meno un rettangolo delle dimensioni in figura.

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


Per costruire il muro occorrono molti mattoni. Per evitare di dover definire molti sprite utilizzeremo la funzione di “Clonazione”.

Ricordiamoci inoltre che il muro deve occupare solo la parte superiore dello Stage (y > 0).


Ecco quindi un esempio di script per generare il muro. E’ abbastanza complesso, vanno definite tre variabili (numero_mattoni, indice e riga) e i numeri presenti nell’algoritmo potrebbero dover essere adattati in base alla dimensione del mattone, in modo da generare il muro più regolare e compatto possibile. A voi, come esercizio, capire come funziona...

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


N.B. A seconda della dimensione del mattone, può darsi che i numeri contenuti nell’istruzione “vai a” debbano essere modificati un poco. Cercate rendere il muro il più possibile regolare in modo che non rimanga troppo spazio tra i mattoni.

Da notare poi l’istruzione invia a tutti il segnale “Inizio” che appare nello script principale alla fine delle operazioni di clonazione. Capiremo più tardi a cosa serve questa istruzione.


Nella figura che segue si vede come dovrebbe apparire a questo punto il campo di gioco

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione



PROBLEMA. Si noti come la procedura di creazione del muro con tutte le operazioni di clonazione duri diversi secondi e come durante questa fase la pallina sia già in moto. Questo risulta piuttosto fastidioso. Sarebbe meglio che durante la fase di costruzione del muro il gioco sia ancora fermo e che la pallina cominci a muoversi solo nel momento che il muro è terminato.


Come fare? Prima di proseguire con la lettura, pensateci e provate a risolvere il problema.


SOLUZIONE: utilizzare il segnale “Inizio” inviato dal mattone una volta terminate le operazioni di clonazione. Nello script che governa il movimento della pallina (quello visto a pagina 4)

sostituire il blocco:

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione
con il blocco
Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione




Allo Sprite Pallina va poi aggiunto un miniblocco che all’avvio lo nasconda:

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione



Distruggere il muro!

A questo punto occorre realizzare l’interazione tra muro e pallina.


Cosa succede a una palla quando colpisce il muro? Rimbalza! Al programma di Pallina è quindi necessario aggiungere il seguente Script:

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


N.B. Notare come aver definito l’algoritmo di rimbalzo tramite un nuovo blocco, ci permetta adesso di utilizzarlo in modo semplice


Nel nostro gioco succede poi un’altra cosa: quando la pallina colpisce un mattone, il mattone viene distrutto. Questo si ottiene tramite il seguente script da aggiungere allo Sprite Mattone.

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


Migliorie

Ritardare la partenza della pallina

Appena finito di costruire il muro Pallina compare immediatamente in una posizione causale e parte verso una direzione causale. Per dare tempo al giocatore di posizionare Racchetta sotto la pallina e prepararsi a prenderla, aggiungere il seguente pezzo di codice allo Script di avvio della pallina:

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

Aumentare il numero di palline a disposizione del giocatore

Fare questo comporta una modifica agli script di Pallina.


In particolare introdurre una nuova variabile di nome “numero_palline” e modificare gli script visti a pagina 3 nel seguente modo:

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione



Inserire le schermate di fine gioco

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

Definire uno Sprite con una scritta di “Livello Terminato” che appaia alla fine della partita in caso di successo, cioè quando tutti i mattoni sono stati distrutti (la variabile numero_mattoni arriva a zero).

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


Definire uno Sprite di “Game Over” che appare quando la missione fallisce, cioè le palline finiscono e sono presenti ancora mattoni.
Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione
Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione


Migliorie lasciate come esercizio

Inserire il calcolo di un punteggio

Aumentare la velocità della pallina con il passare del tempo

Ridurre la dimensione della racchetta

(la dimensione della racchetta potrebbe essere ridotta semplicemente con il passare del tempo o quando colpisce qualche “mattone speciale”)

Inserire altri schemi di muro

(una volta terminato un livello invece di terminare il gioco creare nuovi muri cambiando la formula della creazione del muro vista a pagina 6)

Aggiungere suoni

Per esempio aggiungere suoni quando Pallina rimbalza su Racchetta, sui bordi o sui mattoni.

Complicare l’algoritmo di rimbalzo di Pallina

Questa è probabilmente la cosa più interessante (nonché più complicata e quindi divertente…) di tutte. Alcuni spunti:

  • Se la pallina colpisce uno spigolo dovrebbe rimbalzare in modo diverso? Come?
  • Se la pallina colpisce la racchetta in movimento dovrebbe prendere un “effetto” e rimbalzare in modo diverso… Come cambia la formula del rimbalzo?
  • E’ possibile che il modo con cui si colpisce la pallina oltre al cambio di direzione comporti anche un cambio di velocità? Come cambia l’algoritmo del rimbalzo?
  • Altro??
Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

Appendice (per i pigri): tutti gli script

PALLINA

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

ZONA MANGIA PALLE

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

RACCHETTA

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

MATTONE

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

LIVELLO TERMINATO

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

GAME OVER

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione