35 Javasript: Flappy Bird 1.

 

Partiamo dall’animazione con un solo quadratino che viaggia sullo schermo e rimbalza sui bordi (Scheda 30).

Dovreste trovarla nella cartella col nome Flappy0.html.

 

Passo 1. Forza di Gravità.

Prova se funziona poi metti vx = 0 e vy = 0.

Metti anche posx = 100  e posy = 400.

Per simulare la forza di gravità nella funzione aggiornaPosizione() metti come prima riga   vy -= 0.2; 

Riprova se funziona. Dovresti avere un quadratino che rimbalza sul fondo.

 

Passo 2. Immagine di Flappy Bird.

Tra le variabili all’inizio aggiungi:

var bird = new Image();

bird.src = “flappy.png”;

Nella funzione animazione() al posto della chiamata alla funzione quadrato metti il seguente comando per disegnare l’immagine di flappy bird:

g.drawImage( bird, posx, posy,   50, 50);

Riprova, dovrebbe esserci flappy bird rimbalzante.

 

Passo 3. Vola in alto premendo i tasti.

Vogliamo creare una funzione da eseguire tutte le volte che viene premuto un tasto:

function vola() {

vy += 5;

}

Per associare la funzione alla pressione di un tasto possiamo usare il seguente comando:

addEventListener(“keypress”, vola);

 

Adesso flappy bird dovrebbe alzarsi quando premi un tasto. Prova e prova a variare il valore della forza di gravità ed il valore nella funzione vola() che determina di quanto risale l’uccellino ad ogni pressione del tasto. 

 

Passo 4. Ostacoli.

Aggiungi le variabili:

ostx = 1000; // posizione ostacolo 

ostvx = 10; // velocità ostacolo

osth = 200; // altezza ostacolo

Ostlarg = 300;  // larghezza ostacolo

Nella funzione aggiornaPosizione() metti i comandi per aggiornare la posizione dell’ostacolo:

ostx -= vx;

if(ostx <0 ) {

ostx = 1000;

}

Nella funzione animazione() mettiamo il comando per disegnare l’ostacolo:

g.fillStyle = “yellow”;

g.fillRect(x, 0, ostlarg, osth ); // cordinate x,y poi larghezza ed altezza

 

Prova se funziona.

 

Passo 5. Collisioni con l’ostacolo.

Nella funzione animazione dovrai mettere un if  per controllare se l’uccellino sta toccando l’ostacolo.

Le coordinate dell’uccellino sono posx, posy .

L’ostacolo comincia alla coordinata ostx ed ha larghezza ostlarg e altezza osth:

 

if( posx>ostx  && posx<ostx+ostlarg && posy<osth )    { // da completare   

animazione = 0; // questo comando distrugge la funzione animazione

}