Formations à l'informatique et à l'électronique

Auteur : SD
Créé le : 27-03-2020

Programmer le jeu Tetris en Javascript - Partie 4 - Empiler les formes

Retour vers la partie 3La suite (partie 5)

Dans notre version actuelle, quand une forme arrive en bas du canvas, elle disparait. Dans cette partie, nous allons faire en sorte que les formes se posent en bas du canvas et qu'elles s'empilent les une sur les autres.

Pour cela nous allons utiliser à nouveau un tableau à 2 dimensions que nous appellerons "grille".

Ce tableau aura pour dimensions "largeurGrille" x "hauteurGrille".

Il va nous permettre de mémoriser les formes qui doivent être mémorisées dans le canvas.

Exemple :

Tetris gestion de la grille

Travail à faire : Déclarer et initialiser le tableau "grille"

Dans la zone de déclaration des variables, insérer la ligne de code ci-dessous :

var grille = new Array(largeurGrille);

Cette ligne permet de créer le tableau "grille" mais sur une seule dimension pour le moment.

Créer une fonction "initGrille", qui, pour chaque case du tableau "grille" actuel, va créer un tableau de "hauteurGrille" cases de manière à obtenir le tableau à 2 dimensions voulu (voir ligne de code ci-dessous).

var grille[x] = new Array(hauteurGrille);

La fonction "initGrille" initialisera également chaque case du tableau "grille" avec la valeur -1.

Appeler la fonction "initGrille" depuis la fonction "init".

Travail à faire : Copier les formes dans la grille

Créer une fonction "trasfertFormeToGrille", qui, comme son nom l'indique, va copier la forme en cours (définie par les variable numForme, rotation, formX et formY) à sa bonne position dans la grille (voir image ci-dessus). Cette fonction sera appelée dans "refreshCanvas".

Aide : vous pouvez vous inspirer très fortement de la fonction "drawForme" (conserver les 3 premières lignes à l'identique) sauf que au lieu de dessiner la forme, il suffit, de copier numForme à l'endroit où est la pièce dans la grille.

tetris grille copie forme

Travail à faire : Afficher la grille

Créer une fonction "drawGrille", qui, comme son nom l'indique, va afficher la grille. Cette fonction sera appelée dans "refreshCanvas".

Cette fonction est assez simple : parcourir toutes les cases de la grille et si une case a une valeur supérieure à -1 afficher un carré de la couleur correspondante dans le tableau "couleursFormes" (il y a en réalité 2 couleurs : la bordure et le remplissage du carré).

tetris afficher grille

Travail à faire : Modifier la fonction "collision

Pour le moment, la fonction "collision", détecte uniquelent les collisions avec le cadre du jeu. Il faut maintenant ajouter le cas où une pièce vient se poser sur une autre pièce déjà présente dans la grille.

Vidéo du résultat attendu à la fin de la partie 4

La suite (partie 5)


Vous avez apprécié cet article ? Partagez le !

Article connexe : Programmer le jeu Tetris en Javascript - Partie 5 - Arrivée aléatoire des pièces