21 Javasript: Piccolo serpente. Aggiunte 2.

 

Funzione mostra punteggio. 

Aggiungi tra le variabili la variabile:    punteggio = 0;

 

Per ora il punteggio è 0, ma creiamo una funzione carina per mostrare il punteggio e per mostrare le coordinate x e y del serpente:

function mostraPunteggio() {

grafica.clearRect(0,0, 150, 40); // pulisce una zona

grafica.strokeStyle = "black"; // tratto nero

grafica.shadowBlur = 0; // ombra no

grafica.strokeRect(0, 0, 150, 40); // disegna bordo rettangolo 

grafica.lineWidth = 1; // spessore scritte

score = "Punteggio " + punteggio; // stringa del punteggio

grafica.strokeText(score, 10, 30);  // scrive stringa

}

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.