Apprendre en jouant avec HTML5 (10) - Interface de contrôle Tetris (code source)

Au départ, je voulais écrire quelques phrases, mais j'ai vu que la réponse à l'article précédent n'était pas très satisfaisante, donc je n'ai aucune motivation. J'avais initialement prévu d'en écrire un "Snake", alors jetons un coup d'œil et. allez directement au code source.

Cette fois, les fonctions suivantes sont ajoutées en fonction du programme précédent :

1. Contrôle du clavier

2. Démarrer, pause

3. effet de pause des lignes vides lors de l'élimination

4. À mesure que le nombre de lignes éliminées augmente, la vitesse augmente

5 Effets sonores

et ainsi de suite.

Les commentaires dans le code sont très détaillés. Le code du modèle dans l'article précédent n'a pratiquement pas été modifié. Seuls les codes de contrôle et graphiques ont été ajoutés. J'ai l'impression que l'écriture est relativement organisée.

Conseils : Le jeu Tetris dans cet article nécessite le navigateur Chrome pour obtenir les meilleurs résultats d'exécution, le navigateur Firefox fonctionne également, mais n'a pas d'effets sonores.

Il y a deux longues phrases à la fin, si vous voulez le lire, lisez-le simplement.

Cette partie du code se compose principalement de deux minuteries.

Le premier minuteur génère un message TickMessage à chaque intervalle. Le traitement de ce message consiste à faire tomber le bloc à chaque fois qu'il disparaît après la chute, la vitesse de déclenchement sera plus rapide.

Le deuxième minuteur est le message Loop, qui boucle le plus vite possible, donc l'intervalle de temps est réglé sur 0.

Parce que la partie modèle et la partie contrôle de l'ensemble du jeu généreront de nombreux événements, et personne ne sait quand l'utilisateur appuie sur le bouton, donc une file d'attente.

Une fois qu'une nouvelle situation se produit, un message correspondant est ajouté à la file d'attente des messages et la boucle de messages en retire continuellement des messages. Tant qu'il y en a un, elle en retire un et le traite.

Dans la partie graphique, le point clé est de dessiner les petits carrés de sept couleurs à l'avance et de les

mettre en cache, afin qu'ils puissent être utilisés directement en cas de besoin ultérieurement. Sinon, si vous dessinez temporairement, à mesure que le nombre de blocs augmente, le programme restera bloqué.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!