Retour vers la partie 2La suite (partie 4)
Pour le moment, le canvas est rafraichi à chaque fois que nous appuyons sur une touche. Dans le jeu final, il faut que la pièce en mouvement tombe. Il faut donc mettre en place une fonction qui va s'exécuter automatiquement à intervalles réguliers de tel sorte que la pièce soit en mouvement continu.
Dans la fonction de gestion des évènements clavier, supprimer tous les appels à la fonction "refreshCanvas".
Modifier la fonction "refreshCanvas" de telle sorte qu'elle se rappelle elle même toutes les 250ms (pour cela, vous utiliserez la fonction Javascript "setTimeout").
Toujours dans "refreshCanvas" faire en sorte que la pièce tombe (descendre d'une case = incrémenter sa coordonnée Y) à chaque fois que la fonction est exécutée. Quand la pièce arrive en bas, dans un premier temps, on la fera remonter en haut (coordonnée Y = 0).
Comme dans le jeu final, le temps est amené à s’accélérer, ajouter une variable "delay" initialisée à 250, ce qui permettra dans la suite d'accélérer le jeu. Cette variable sera maintenant utilisée dans la fonction "refreshCanvas" par la fonction "setTimeout".
Tester.
Modifier la fonction de gestion des évènements clavier de telle sorte que :
Remarque :
Pour éviter que la forme sorte du canvas on fera simplement, dans un premier temps, en sorte que les coordonnées de celle-ci soient comprises entre 0 et "LARGEUR_GRILLE - 3" (ce point sera amélioré dans la suite).
Dans le jeu final, plusieurs cas de figure peuvent faire que le mouvement d'une pièce soit bloqué :
Pour faciliter la programmation du jeu, vous allez créer une fonction qui vérifie l'ensemble de ces points et qui renvoie "false" si le mouvement est autorisé et "true" sinon. Cette fonction s’appellera "collision()".
Exemple d'utilisation de la fonction "collision" (extrait de la fonction de gestion des évènements clavier) :
case 'ArrowUp': // flèche haut => rotation horaire de la forme
temp = rotation; // On mémorise la rotation actuelle
rotation++; // On passe à la rotation suivante
if(rotation > forme[numForme].length - 1) rotation = 0;
if(collision()) rotation = temp; // Si la rotation est impossible on revient à la précédente
break;
Parcourir toutes les cases de la forme (3x3 ou 4x4) comme dans la fonction "drawForme" (double boucle for).
Pour chaque case dont la valeur est "1", vérifier que :
Si un de ces 2 cas est vrai on renvoi "true", "false" sinon.
A partir des explications ci-dessus, créer la fonction "collision()".
Utiliser celle-ci à chaque appui sur une des 4 flèches de direction et à chaque mouvement vers le bas de la forme (dans la fonction "refreshCanvas").
Aide : Exemple de fonction revoyant un booléen en Javascript : Introduction au Javascript.
Article connexe : Programmer le jeu Tetris en Javascript - Partie 4 - Empiler les formes