Apprenez à créer le jeu Tetris avec JavaScript et HTML5.
Ce cours est la suite direct de celui avec Pacman, allez plus loin avec la programmation orientée objet.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Développez le jeu tetris avec JavaScript HTML5 et la Programmation Orientée Objet POO
Bonjour et bienvenu sur Développement Facile.
On continu ensemble la série des cours JavaScript dédiés à la création de jeux HTML 5 JavaScript sur les mobiles, les tablettes et le Web, et cette fois vous allez apprendre à créer le jeu Tetris donc j’ai repris un code source existant, j’ai appliqué la méthode développement facile dessus et c’est ce que vous allez voir, justement.
Rappelez-vous c’est la suite directe des cours avec les cours avec le jeu pacman que vous avez reçu il y a quelques jours, alors comment ça se passe ?
Vous avez toujours votre fichier index.html avec l’inclusion des différents fichiers vu que j’étais en mode développement j’ai désactivé le cache, après vous pouvez tous les intégrer directement comme ceci sauf game qui est le fichier modifié le plus souvent, Tetris également. Vous avez votre id game div ici, dans la classe main, qu’est-ce que vous faites ? Vous initialisez, le jeu vous récupérez id game div vous faites un Tetris avec, rappelez-vous la fameuse classe statique.init en transmettant la div et sinon si ce n’est pas possible en affichant un message à l’utilisateur, tout simplement. Dans game vous avez toutes les variables globales donc à tous JavaScript, et la fameuse classe Tetris avec l’initialisation, l’écoute des touches pressées par le joueur ou on sélectionne gauche droite bas et la rotation donc ça, ça doit être haut plutôt je pense et la rotation et si la touche existe, si c’est bien une touche qui est écoutée, on fait un rendu du jeu et on informe la carte qu’il y a eu une touche pressée tout simplement avec ce système de classe rappelez-vous on initialise ici, les objets audio, map, Tetris.Audio, Tetris.map, Tetris.New game, ogame Tetris.Engine et on fait un setInterval, c’est-à-dire on appelle ogame.render toutes les 30 ms tout simplement et ogame omap.Newgame la méthode publique newgame sur la classe map et sur la classe audio on va charger tous les éléments audio, audio.load, il n’y a qu’un seul fichier winLigne ça fait un bruit quand le joueur gagne tout simplement, et là on affiche des messages de debug lorsque tous les fichiers sont chargés, après libre à vous d’organiser les fichiers, différemment par exemple plutôt que de lancer le rendu, ça et ça directement à un nouveau jeu directement, vous pouvez attendre la fin du chargement des fichiers audio et le lancer ici, ce que l’on va faire d’ailleurs, on va le déplacer ici. Voilà, en direct à la fin du chargement des fichiers on fera un set intervalle, on écoutera également les touches directionnelles, ça sert à rien de les écouter avant c’est clair et on va lancer une nouvelle partie une fois les fichiers sont chargés pas avant, ce n’est pas la peine, donc voilà ce qui fait que si je recharge le jeu voilà le fichier son s’est chargé et volontairement je vais renommer le fichier son pour générer une erreur de chargement et là je recharge, la partie ne se lance pas et on devrait avoir un message d’erreur… Ah non il n’y a pas de message d’erreur que je n’ai pas fait gérer les messages d’erreur, c’est un truc que vous pouvez rajouter également les messages d’erreurs dans la classe audio avec load, s’il y a une erreur vous pouvez très bien n’afficher ici dans la gestion, là on fait un chargement, si il y a une erreur ça va afficher un message comme quoi il y a eu une erreur dans progression, dans la progression du chargement tout simplement, là je renomme le fichier correctement, le jeu se charge bien, c’est un jeu tetris classique voilà, je vais assez vite pour vous montrer lorsque le joueur perd, ah oui je vous montrer au moins comment ça se passe lorsque l’on termine une ligne, là j’ai vraiment mal commencé, voilà donc là il y a une ligne vous entendrez pas le son parce que je n’enregistre pas, voilà la ligne est tombée, et donc quand le joueur perd je vais vous montrer ce qui se passe, ça arrête le jeu et il y a un message d’erreur, vous avez perdu fin de partie.
Vous initialisez le jeu ici, game.init avec la div, vous créez tous les différents éléments, la taille, vous initialisez vos classes, le test, est ce que le navigateur prend en charge le fichier hog ou un fichier MP3, la liste des fichiers donc là il y a un seul fichier audio et vous chargez tout simplement tous les fichiers donc ici, vous bouclez sur un tableau et vous appelez la méthode load de la classe audio que vous avez déclarée ici, à la fin tous les fichiers sont chargés vous lancez la partie, vous écoutez les touches du clavier pressées et si c’est une des gauche, droite, bas, rotation qui est pressée, une de ces touches en fait qui est pressée, donc rotation c’est la touche haut enfaite, vous faites un rendu du jeu, et vous informez la carte comme quoi une touche a été pressée en transmettant la touche pressée et toutes les 30 ms vous appelez le rendu du jeu, vous avez la possibilité de désactiver le jeu et là il y a uniquement, regardez, uniquement la méthode init qui peut être appelée de l’extérieur toutes ces autres méthodes sont privées, donc ça c’est des méthodes publiques de la classe qui sont disponibles, donc uniquement init, les autres sont privées après vous avez la classe Tetris bien évidemment avec la création d’une nouvelle forme, les méthodes publiques de la classe, donc il y a newgame pour gérer une nouvelle partie, pour obtenir le statut, est ce que le joueur à perdu, pour afficher un message, d’ailleurs l’affichage…
Je peux laisser l’affichage d’un message, et keypress qui est appelé ici, après j’ai commenté tous le code source pour vous aider, pas tout ligne par ligne mais la majorité de ce que fait chaque fonction, donc get statut ça permet d’arrêter des set intervalle, regardez il y a plusieurs setinterval, un setinterval qui est lancé là, donc ça c’est appelé tout le temps même quand le joueur a perdu donc ici vous pouvez rajouter, effectuer un arrêt du setinterval, ça vous permettra d’économiser les ressources mémoire, donc ça c’est que vous pouvez ajouter dans le jeu pour l’améliorer, voilà à quoi ça sert, vous avez l’affichage dialogue ici qui vous permet d’afficher des messages à l’écran, on arrête l’intervalle qui est lancé, qui appel tick en perpétuel sur le jeu donc là vous affichez votre message à l’écran, tout simplement avec background que vous avez vu dans un cours précédent, du texte multi ligne que vous avez vu dans un cours précédent, la rotation s’il y a des lignes complètes on les efface, on fait un audio.play winLigne, comment winLigne, eh bien ici au chargement des fichiers audio on a donné un identifiant à chaque fichier audio donc c’est très facile, vous pouvez rajouter du coup une musique d’ambiance de fond, il faudrait juste faire audio.play la musique d’ambiance de fond du Tetris et ici lancer le chargement de la musique bien évidemment, avec la bonne extension tout simplement, là en fonction des touches pressées, vous effectuez les différentes actions demandées par l’utilisateur. Là c’est si la forme peut être déplacée ou non, si il y a une autre forme, s’il y a un mur voilà et là c’est pour lancer une nouvelle partie du jeu, donc la classe audio, vous avez vu avec pacman, donc c’est la même classe audio exactement pareil, rien n’a changé, c’est fabuleux, là vous commencez à découvrir la puissance de JavaScript ou vous réutilisez les mêmes fichiers JavaScript, même pas besoin de les recoder, vous avez juste besoin de les utiliser donc là, Play donc l’audio vous savez pour tous vos jeux, l’audio est géré et là c’est le moteur de rendu donc la carte du jeu pour créer des blocs, le rendu, déplacer les blocs et la méthode de la classe accessible .render.
Un jeu vraiment, avec du code source simple qui vous montre la puissance des classes par exemple, vous avez la classe audio que vous pouvez déjà réutiliser dans tous vos projets en faisant un copier-coller, vous savez que vous pouvez jouer des fichiers audio quelques soit le navigateur sur tablette, mobile, le Web, ça fonctionnera. Profitez-en vous avez un exemple très simple avec très peu de fichiers pour utiliser le framework modernise, Tetris.init pour lancer un jeu ici ça vous permet de lancer un jeu, de gérer vos formes là, quand le joueur perd, à gagner Win Line quand il a perdu c’est juste ici pour afficher un message à l’écran du joueur, vous appelez dialogue, rendu.
Comme d’habitude vous trouverez le code source de ce jeu sous ce cours vidéo en téléchargement, si vous avez des questions posez les directement sous ce cours vidéo, l’équipe développement facile vous répondra et si vous voulez aller vraiment beaucoup plus loin avec JavaScript HTML cinq la création de jeux d’applications performantes, complexes et vous souhaitez être accompagné par une équipe d’experts qui ont 10 ans d’expérience dans le développement, que ce soit le Web, le C, assembleur, PHP et JavaScript, il suffit de cliquer au-dessus de ce cours, vous avez une bannière, un lien cliquable au-dessus, vous serez redirigé vers une deuxième vidéo et dans la deuxième vidéo connaîtrez tous les détails, comment travailler en équipe, créer deux à trois fois plus rapidement vos applications JavaScript, vos jeux JavaScript, qui soit compatibles sur mobile, tablette, le Web, simultanément, vous allez également apprendre comment créer une architecture solide pour vos applications, quel outil utiliser, quel éditeur utiliser, comment les utiliser, donc vous allez découvrir tout ça dans la deuxième vidéo et bien plus également avec plein de surprises cliquez simplement sur la bannière, le lien cliquable, au dessus de cette vidéo je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Télécharger le code source du jeu Tetris
Retrouvez le code source commenté du jeu Tétris qui vous a été présenté dans la vidéo.
