Track the score and win

This translation is incomplete. Please help translate this article from English

Ceci est la 8ème étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source après avoir terminé cette leçon à : Gamedev-Canvas-workshop/lesson8.html.

Détruire les briques est vraiment cool, mais pour être encore meilleur le jeu pourrait attribuer des points pour chaque brique touchée et compter le score total.

Compter le score

Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos amis. Vous avez besoin d'une variable pour stocker le score. Ajoutez ce qui suit dans votre JavaScript après le reste de vos variables: 

var score = 0;

Vous avez aussi besoin d'une fonction drawScore(), pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision collisionDetection():

function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}

Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode   font(). Puis utilisez fillStyle() pour définir la couleur de la police et fillText() pour définir la position de texte sur le canvas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canvas.

Pour attribuer le score à chaque collision d'une brique, ajoutez une ligne à la fonction collisionDetection() afin d'incrémenter la valeur de la variable score à chaque détection d'une collision. Ajoutez la ligne suivante en surbrillance à votre code :

function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                }
            }
        }
    }
}

Appelez la fonction drawScore() dans la fonction draw() pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction draw(), en dessous de l'appel à drawPaddle() :

drawScore();

Ajoutez un message de victoire lorsque toutes les briques ont été détruites

Le compte des points fonctionne bien, mais vous ne les compterez pas de manière indéfinie. Alors qu'en est-il du score lorsque toutes les briques ont été détruites ? Après tout c'est l'objectif principal du jeu. Vous devez donc afficher un message de victoire si toutes les briques ont été détruites. Ajoutez la section suivante en surbrillance dans votre fonction collisionDetection():

function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                    if(score == brickRowCount*brickColumnCount) {
                        alert("YOU WIN, CONGRATULATIONS!");
                        document.location.reload();
                        clearInterval(interval); // Needed for Chrome to end game
                    }
                }
            }
        }
    }
}

Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction document.location.reload() recharge la page et redémarre le jeu au clic sur le bouton d'alerte.

Comparez votre code

Le code réalisé ressemble (et fonctionne) à cela, au cas où vous voudriez comparer avec le vôtre: 

Exercice: Ajoutez plus de points par brique touchée et indiquez le nombre de points collectés dans la boîte d'alerte de fin de partie.

Prochaine étape

Le jeu est plutôt beau à ce stade. Dans la prochaine leçon, vous élargirez l'attrait du jeu en ajoutant les contrôles de la souris.