Formations à l'informatique et à l'électronique

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

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

Retour vers la partie 4La suite (partie 6)

Cette partie n'est pas très difficile à réaliser. Il y a deux petites choses à mettre en place :

Arrivée aléatoire des formes

Travail à faire : une fonction "nouvelleForme"

Créer une fonction "nouvelleForme" qui renvoie un nombre compris entre 0 et la taille du tableau "formes" - 1 (nombre de formes possibles - 1)

Ajouter une variable "formeSuivante".

Dans la fonction "init" :

Dans la fonction "refreshCanvas", quand une forme arrive en bas de l'écran ou se "pose" sur une autre pièce :

Afficher la forme suivante

En l'état actuel, la fonction "drawForme" a un inconvénient majeur : elle utilise des variables globales ce qui la rend impossible à réutiliser pour afficher une autre forme que la forme courante définie par les variables "numForme", "formX", "formY" et "rotation".

Travail à faire : Modifier la fonction "drawForme"

Modifier la fonction "drawForme" de manière à ce qu'elle reçoive en paramètre les variables "numForme", "formX", "formY" et "rotation".

Modifier, dans l'ensemble du code, tous les appels à cette fonction de manière à lui transmettre correctement les paramètres nécessaires.

Travail à faire : Modifier la fonction "init"

Dans la fonction "init", élargir le "canvas" de 150 pixels.

Toujours dans la fonction "init", afficher "Prochaine forme" en haut de la zone de 150 pixels ajoutée (voir fillText et font). Ajouter également un trait vertical noir afin de délimiter la zone de jeu et la zone de 150 pixels de droite.

Résultat attendu :

tetris zone affichage forme suivante

Travail à faire : Modifier la fonction "refreshCanvas"

En utilisant la fonction "drawForme", afficher la prochaine forme en dessous du texte "Prochaine forme".

Résultat attendu :

tetris affichage forme suivante

La suite (partie 6)


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

Article connexe : Programmer le jeu Tetris en Javascript - Partie 6 - Détecter les lignes