21 Javasript: Piccolo serpente. Aggiunte 2.

 

Funzione mostra punteggio. 

Aggiungi tra le variabili la variabile:    punteggio = 0;



Per ora il punteggio è 0 ma prova intanto a creare una funzione per mostrare il punteggio.
Dovrai usare clearRect (per cancellare una zona), strokeRect (per disegnare un rettangolino) e strokeText (per scrivere un testo sul canvas):

function mostraPunteggio() {

// da completare

}

Infine aggiungi la chiamata alla funzione mostraPunteggio() dentro alla funzione animazione dopo la chiamata della funzione correggiXY().

 

Calcolo punteggio. 

Aggiungi tra le variabili le seguenti variabili che indicano la posizione della mela:

xmela = Math.random()*600;

ymela = Math.random()*600;

 

Aggiungi la seguente funzione per vedere se il serpente passa abbastanza vicino alla mela:

function aggiornaPunteggio() {

// se la testa del serpente passa sulla mela …

if( x>xmela-5 && y>ymela-5 && x<xmela+10 && y<ymela+10) {

punteggio += 1; // aumenta punteggio

grafica.clearRect(xmela, ymela, 10, 10); // cancella mela mangiata

xmela = Math.random()*600; // nuova posizione mela

ymela = Math.random()*600;

}

}

 

Aggiungi la seguente funzione per disegnare la "mela":

function disegnaMela() {

grafica.fillStyle = "green";

grafica.fillRect(xmela, ymela, 10, 10);

}

 

Modifica la funzione animazione nel seguente modo:

function animazione() {

spostaXY();

correggiXY();

aggiornaPunteggio();

mostraPunteggio();

disegnaMela();

disegna(); 

requestAnimationFrame(animazione); // rifai tutto appena possibile

}

 

Gioca e crea varianti.