Retrouvez les explications pour réaliser un Tetris nouvelle génération en JavaScript et HTML5
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Découvrez le code source commenté d’un nouveau jeu Tetris ! HTML5 et JavaScript
Bonjour et bienvenu sur Développement Facile.
Dans ce nouveau cours toujours consacré à l’apprentissage pour créer des jeux JavaScript HTML5, pour le Web, pour tablette et pour Smartphone, vous allez découvrir un Tetris nouvelle génération donc le code source d’un Tetris nouvelle génération qui est très bien organisé avec plusieurs fichiers d’utilisation de framework, déjà pour vous présenter le jeu, c’est une sorte de tétris, donc il suffit d’aligner trois parties pareilles, vous avez une aide ici qui est traduite en français et pause, et vous pouvez mettre même un lien ou faire une nouvelle partie en cliquant ici ou en reprenant la partie, donc les bleus vont disparaître, là il y a deux bleu donc ils restent, deux jaunes et dès qu’il y a 3 couleurs identiques comme là, voilà, c’est un Tetris nouvelle génération donc vraiment très sympa, les jaunes vont disparaître et au fur et à mesure de l’avancée du jeu le jeu devient de plus en plus difficile avec les cases de de plus en plus rapides.
Comment créer ce jeu ?
Ce qui est bien dans ce Tetris, vous avez une utilisation des Framework jQuery, que vous avez découverts sur développement facile avec une vingtaine de tutoriels en vidéo entièrement gratuit pour apprendre à l’utiliser, ça ne vous posera aucun problème pour connaître ce code source, key presse vous avez reçu un cours complet sur l’utilisation de ce Framework qui permet d’écouter les touches du clavier ou plusieurs touches du clavier en même temps, un combo de touches, AMER et format JISUP. Le jeu commence avec l’initialisation, le fichier JavaScript initialisation qui va lancer les autres fichiers, il va lancer le jeu, ce qui advient c’est que le jeu est séparé en fichiers JavaScript indépendants les uns des autres pour sauvegarder la partie, les vues, la génération des effets, les maths, les blocs, le texte, les parties combo timer, vérification ,mise à jour, le moteur de rendu, l’écoute des touches, les mains… Alors c’est vraiment un jeu très… dont vous pouvez vous inspirer, ce n’est pas moi qui l’ai créé, je vous ai mis l’URL vers le code source d’origine, le créateur du jeu comme ça vous pourrez voir, et ce que j’ai rajouté c’est des commentaires dans tous les fichiers pour vous permettre de savoir comment fonctionne tel ou tel choses. Là vous avez la balise canvas qui va accueillir le jeu et les balises divs qui sont gérées via jQuery pour effectuer l’affichage du jeu avec mode d’emploi, cause etc. Alors dans l’initialisation tout le jeu est entièrement commenté donc je vous laisserais, je ne vais pas relire ce qui est écrit, c’est écrit en français, on initialise le jeu, on prépare les couleurs des blocs, voilà, il y a des animations, le jeu est compatible mobile Android, iPhone, iPad, BlackBerry, IE, Opera Mini, vous avez tout ce qu’il faut donc voilà il restait une partie en anglais, donc le but de ce jeu, je vais vous la traduire en direct voilà, de l’écran pour, je vous laisserais traduire, vous comprenez le principe c’est ici, que vous traduisez tout le jeu donc je traduirai à la fin de cette vidéo bien évidemment, ensuite vous avez la gestion des blocs, ça détermine si un bloc, qui reposait, en fait c’est lorsque le bloc est posé sur la zone centrale et qu’il y a trois blocs alignés, ça entraîne la suppression des blocs, comme vous pouvez le voir, voilà suppression des blocs, on peut tourner l’Hexagone, suppression des blocs quand il y en a trois côte à côte avec gestion des effets et ce qu’il y a de bien c’est que vraiment tout est organisé en fichier, le combo la partie combo, ici, vous pouvez gagner des points en plus pendant le timer, la vérification des cases avec une fonction de recherche à deux dimensions, la gestion de l’hexadécimale, l’écoute du clavier avec key presse, on ajoute un key listener, un écouteur des touches appuyées, gauche, droite, bas, A, D, etc. donc là je vous renvoie directement au cours dédié au Framework key presse pour savoir comment il fonctionne, la classe main qui s’occupe de gérer le jeu avec le système de pause, vérification des éléments, pour cacher les éléments, bouton pause, les cacher les faire apparaître, les nationalisations voilà le bouton pause, le bouton d’aide, le faire disparaître, pause, tout est géré dans ce fichier main, la classe de mathématiques, le moteur de rendu à l’écran, vous pouvez aussi sauvegarder, si je recharge la page, je reprends la partie en cours, ce qui est génial, je mets en pause et je recharge la page, pile poil sur la partie en cours parce qu’elle est sauvegardée, très pratique vous avez des exemples pour afficher du texte, pour mettre à jour l’interface du jeu, la vue, c’est tout simplement l’affichage du jeu avec tous les textes et la génération des effets de vagues. C’est vraiment un jeu très complet vous avez le code source complet et commenté à votre disposition donc sous cette vidéo, vous retrouverez le code source complet commenté en français à télécharger, si vous avez des questions posez les directement à l’équipe développement facile sous ce cours vidéo, et maintenant si vous voulez aller beaucoup plus loin juste au-dessus de ce cours vidéo il y a une image, un lien cliquable, je vous invite à cliquer dessus, vous serez redirigé dans une deuxième vidéo, dans la deuxième vidéo vous allez apprendre comment créer des jeux, des applications, qui soient sur les mobiles, les Smartphones ou le Web, à travailler en équipe, à créer des architectures d’applications qui soient solides, souples et à la fois évolutives, qui aient une architecture solide pour rajouter des complexités, gérer plusieurs fonctionnalités plus ou moins complexes dans votre jeu, dans votre application, pouvoir ajouter des évolutions, des nouvelles évolutions dans votre application, ou votre jeu suite à la demande de votre client, les experts de l’équipe développement facile sont à votre disposition pour répondre à toutes vos questions sur les codes source que vous recevez, comment utiliser telle ou telle fonctionnalité dans votre projet, pour cela cliquez simplement sur la bannière au-dessus de ce cours vidéo, je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.
