Da WIKI CoderDojo Firenze.
Versione del 15 nov 2015 alle 22:17 di Fpiantini (Discussione | contributi)

(diff) ← Versione meno recente | Versione attuale (diff) | Versione più recente → (diff)
Coderdojo Firenze -- Tutorial Breakout


Ctb001.png


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.


1: La pallina: movimento nell’area di gioco[[Image:]]

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

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 a lato).

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).[[Image:]]

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.


[[Image:]]


Il programma risultante è riportato sotto.

[[Image:]]

2. 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).[[Image:]]

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.

[[Image:]]

A questo punto aggiungere allo Sprite Pallina lo script a lato.


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!

3. 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


[[Image:]]


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.

[[Image:]]

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”.


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” (vedi sotto a sinistra).


[[Image:]]


[[Image:]]


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


4. Il muro da abbattere[[Image:]]

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.


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...


[[Image:]]


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


[[Image:]]


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 [[Image:]] con il blocco [[Image:]]


[[Image:]]


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


5. 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:


[[Image:]]


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.


[[Image:]]


6. Migliorie[[Image:]]
6.1. 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:


6.3. 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:


[[Image:]]


6.2. Inserire le schermate di fine gioco[[Image:]]

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).

[[Image:]]


[[Image:]]


Definire uno Sprite di “Game Over” che appare quando la missione fallisce, cioè le palline finiscono e sono presenti ancora mattoni.

[[Image:]]


7. 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??
[[Image:]]


Appendice (per i pigri): tutti gli script
PALLINA
[[Image:]]


ZONA MANGIA PALLE
[[Image:]]


RACCHETTA
[[Image:]]


MATTONE
[[Image:]]
LIVELLO TERMINATO
[[Image:]]


GAME OVER
[[Image:]]