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 choses à mettre en place :
- Les formes doivent arriver de manière aléatoire
- Il faut afficher la prochaine forme qui va arriver
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" :
- initialiser la variable "numForme" en utilisant la fonction "nouvelleForme"
- initialiser la variable "formeSuivante" en utilisant la fonction "nouvelleForme"
Dans la fonction "refreshCanvas", quand une forme arrive en bas de l'écran ou se "pose" sur une autre pièce :
- Copier la variable "formeSuivante" dans "numForme"
- Affecter une nouvelle valeur aléatoire à la variable "formeSuivante"
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 :
Travail à faire : Modifier la fonction "refreshCanvas"
En utilisant la fonction "drawForme", afficher la prochaine forme en dessous du texte "Prochaine forme".
Vous pouvez utiliser clearRect pour effacer une zone du canvas.
Résultat attendu :
