Bonjour bonjour !
Il y a quelques temps de cela je me suis amusé à créer un Tetris en Javascript en utilisant WebGL en passant par la génialissime librairie PixiJS. Il faut savoir que je n'ai jamais réellement créé de jeu vidéo et j'avais envie de voir ce que ça pouvait donner de créer un simple Tetris avec les dernières technologies web. J'ai donc également utilisé Babel et Browserify pour pouvoir développer le tout avec les dernières versions de Javascript.
Alors quitte à l'avoir fait, autant le partager ici !
Si vous voulez le tester, c'est par là !
Les flèches pour gérer les blocs (Tetrominos), la barre espace pour faire descendre un Tetromino tout en bas en un instant et "P" pour faire pause !
Je ne rentrerai pas dans les détails du code, que vous pouvez retrouver entièrement sur mon compte GitHub, mais j'ai pris soin de le commenter le plus clairement possible donc vous devriez vous y retrouver. L'architecture du projet est assez simple :
- Le fichier index.html contient l'interface du jeu et une div qui est prête à contenir le canvas WebGL
Gameest la classe qui gère le cycle global du jeu : chute des Tetrominos (les briques du Tetris), interactions avec le clavier- La fonction
_loopest la boucle principale du jeu
- La fonction
Stagegère l'affichage de la zone de jeu, les collisions des Tetrominos qui chutent avec ceux qui sont déjà fixés, la disparition des lignes complètesTetrominoreprésente un bloc Tetris (les fameux S, L, O et Z)ScoreManagergère... le score !BlockContainerpermet de créer plus simplement les objets WebGL permettant d'affiches les cubes des Tetrominos, j'ai également créé une fonction getTexture afin d'économiser la création de textures. Je ne suis pas totalement sûr de moi mais ça a l'air de fonctionner !
Je pense clairement qu'il y a matière à faire des optimisations pour avoir de meilleures performances mais je n'ai pas pris le temps d'y réfléchir plus que cela.
Si vous avez des questions ou des suggestions je suis tout ouï !