Formations à l'informatique et à l'électronique

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

Programmer le jeu Tetris en Javascript - Partie 3 - Les formes en mouvement

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.

Travail à faire : Faire tomber les formes

Dans la fonction "handleKeyDown", 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 (descende d'une case = augmenter 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é dans la fonction "refreshCanvas" par la fonction "setTimeout".

Travail à faire : Diriger les formes

Modifier la fonction "handleKeyDown" 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 "largeurGrille" (ce point sera amélioré dans la suite).

Explications sur les collisions...

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 "handleKeyDown") :

case 38: // flèche haut
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;

Principe de la fonction collision

Parcourir toutes les cases de la forme (3x3 ou 4x4) comme dans la fonction "drawForme".

Pour chaque case dont la valeur est "1", vérifier que :

Si un de ces 2 cas est vrai on renvoi "true", "false" sinon.

Travail à faire : la fonction collision

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.

La suite (partie 4)


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

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