Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Il s'agit de la 6ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson6.html.

Après avoir modifié la mechanique du Gameplay, nous sommes maintenant capable de perdre - Et ça c'est top car on a enfin l'impression de jouer à un vrai jeu ! Cependant, ça devient vite ennuyant si la balle ne fait que rebondir sur le paddle. Ce dont a vraiment besoin un jeu de casse-brique c'est de... casser des briquer avec la balle ! Et c'est ce que nous allons créer maintenant.

Mettre en place les variables "Brique"

Le principal objectif de cette leçon est d'avoir quelques lignes de codes pour afficher les briques, en utilisant une boucle imbriquée qui va marcher à travers un tableau à deux dimensions. Cependant nous avons besoin d'établir quelques variables pour définir les informations des briques telles qu'une largeur, une hauteur, des colonnes et des lignes, etc. Ajoutez les lignes suivantes dans votre code, sous les variables que vous aviez préalablement déclarées.

var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes des briques, mais également une hauteur une largeur et un padding entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord de la toile

Nous allons faire rentrer nos briquer dans un tableau à deux dimensions. Il contiendra les colonnes de briques (c), qui à son tour contiendra les lignes de briques (r), qui contiendra à chaque fois un objet contenant une position x et y pour afficher chaque brique sur l'écran.
Ajoutez le code suivant juste en-dessous vos variables :

var bricks = [];
for(var c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(var r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0 };
    }
}

Le code ci-dessus va parcourir les lignes et les colonnes et créer de nouvelles briques. REMARQUE : les objets briques seront également utilisés pour un autre objectif de détection de collision.

Logique du dessinage des briques

Maintenant créons une fonction pour boucler toutes les briques dans le tableau et les dessiner sur l'écran. Notre code pourrait ressembler à ça :

function drawBricks() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            bricks[c][r].x = 0;
            bricks[c][r].y = 0;
            ctx.beginPath();
            ctx.rect(0, 0, brickWidth, brickHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
    }
}

Une nouvelles fois, nous bouclons à travers les colonnes et les lignes pour attribuer une position x et à chaque brique, et nous affichons également les briques sur le canvas — taille : brickWidth x brickHeight  — pour chaque boucle itérative. Le problème est que nous les affichons toutes au même endroit, aux coordonées (0,0). Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position x et y de chaque brique à chaque boucle itérative :

var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;

Chaque position brickX est déterminé avec brickWidth + brickPadding, multiplié par le nombre de colonne, c, plus le brickOffsetLeft; la logique pour la brickY est identique excepté qu'il utilise la valeur pour les lignes, r,brickHeight, et brickOffsetTop. Maintenant chaque brique peut être placée à la bonne place - ligne et colonne, avec un padding entre chaque brique, dessiné avec un espace de la gauche et du haut du contours du canvas.

La version finale de la fonction drawBricks(), après avoir assigné les valeurs brickX et brickY comme coordonnées, plutot que (0,0) à chaque fois, va ressembler à ceci  — ajouter la fonction ci-dessous après drawPaddle() :

function drawBricks() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
    }
}

Faire enfin afficher les briques

La dernière chose à faire dans cette leçon est d'ajouter un appel à drawBricks() quelquepart dans la fonction draw(), preferablement au départ, entre le nettoyage du Canvas and le dessin de la balle. Ajoutez le ligne suivante juste en dessous du drawBall() :

drawBricks();

Comparez votre codre

À ce niveau, le jeu est un peu plus interessant :

Exercice: Essayer de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position.

Prochaines étapes

Nous avons donc maintenant des briques !  
Mais la balle n'a toujours d'interaction direct avec elles. On va donc changer ça au chapitre sept : Détection des collisions 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : socadance
Dernière mise à jour par : socadance,