Une fois n’est pas coutume, sortons de SAP et de l’ABAP pour nous plonger un peu dans le développement Web. Aujourd’hui nous allons parler HTML, CSS, Javascript, three.js et… Squid Game.
Je suis tombé récemment sur cette vidéo de Angle Brace (que je ne connaissais pas auparavant) et j’ai trouvé rigolo de reproduire l’exercice (oui, je m’ennuyais un peu, je l’avoue).
Je vais tâcher ici de décrire succinctement ce que j’ai réalisé.
Concept
L’idée est d’avoir une page web qui permette de jouer au célèbre jeu de cour de récré Un, deux, trois… soleil ! Apparemment, l’idée du youtubeur était de s’inspirer de la série Netflix Squid Game mais je ne l’ai pas encore vue à l’heure où j’écris ces lignes. Bref.
L’idée, donc, c’est d’avoir un joueur représenté à l’écran qui doive parcourir une certaine distance en respecant deux simples règles :
- effectuer la traversée sans dépasser une limite temporelle ;
- ne pas être vu en train de bouger.
La seconde règle fait tout l’intérêt du jeu : une tierce personne effectue des séries de rotation sur elle-même, une fois face au joueur, une fois dos à lui. Ledit joueur ne doit se déplacer que lorsque la personne ne le regarde pas. La durée de chacune des positions de cette personne est aléatoire, décidée uniquement par celle-ci.
La partie est gagnée si le joueur arrive au bout ; elle est perdue si le temps imparti est écoulé ou si le joueur se fait repérer en plein mouvement.
Structure HTML
Maintenant que ce rappel inutile est fait, passons aux choses sérieuses.
Commençons par le code HTML. Plutôt simple, il se décompose en trois sections : un entête qui affichera l’état de la partie, mais également un lien pour recommencer, une partie qui récapitule le principe et la façon de jouer (une seule touche !), et le pied-de-page qui liste les crédits.
On le voit, le HTML n’a pas directement de section dédiée au jeu proprement dit. Ce dernier sera rattaché à l’élément body. De ce fait, les éléments susmentionnés seront positionnés de façon fixed pour faciliter les choses.
Enfin, les fichiers javascript principaux sont chargés. On aura donc la bibliothèque d’animation GSAP, celle de three.js ainsi que le module GLTFLoader qui lui est associée, et notre javascript maison.
CSS
Je ne vais pas trop m’attarder sur le CSS qui est plutôt simple, même pour moi. Compte-tenu de la nature du projet (et de mes compétences actuelles), je n’ai pas mis l’accent sur le côté responsive ni sur l’accessibilité.
Comme je le disais plus haut, tout est positionné en fixed. J’ai aussi pris le pli de systématiquement mettre un peu d’ombre aux textes ; je trouve que ça le fait ressortir un peu plus.
Javascript
Le gros du travail, évidemment, se fait sur le javascript. Contrairement au youtubeur, j’ai choisi de tout découper en classes ; je n’ai donc aucune fonction proprement dite.
Le script principal – qui est un module, afin de pouvoir importer d’autres sources javascript – se contente de déclencher l’initialisation du jeu sur l’évènement DOMContentLoaded.
On aura ensuite une classe Game qui sert de contrôleur de la partie. Elle contient quelques constantes de fonctionnement, telles que la durée maximum à ne pas dépasser.
Elle est surtout chargée d’une part d’initialiser les différents éléments du jeu – par l’intermédiaire d’autres classes décrites plus bas –, et d’autre part de s’assurer du bon déroulement de la partie, notamment en contrôlant si celle-ci est terminée (perdue ou remportée).
Chronologiquement, la classe va :
- créer la scène 3D three.js principale ;
- ajouter la poupée (c’est-à-dire la tierce personne qui surveille les déplacements du joueur) via un modèle 3D ;
- ajouter le joueur via un modèle 3D également (oui, Cloud, parce que pourquoi pas ?) ;
- démarrer la partie automatiquement (donc sans action de l’utilisateur) après un compte à rebours qui sera affiché à l’écran ;
- faire en sorte que le temps imparti restant soit visible ;
- ordonner à la poupée de commencer à se retourner ;
- vérifier si la partie est terminée (temps écoulé, joueur repéré ou joueur arrivé à destination).
La classe Scene est utilisée pour situer le jeu. C’est un peu le plateau de jeu, mais en trois dimensions. Elle utilise abondamment la librairie three.js. Elle est en charge de :
- générer la scène, positionner la caméra (le point de vue de l’utilisateur) et les lumières ;
- faire en sorte que la scène ne soit pas cassée si l’utilisateur redimensionne sa fenêtre de navigateur ;
- réagir lorsque l’utilisateur utilise les contrôles associés au jeu (en l’occurrence : faire avancer le joueur si la touche
↑est pressée, et l’arrêter si la touche est relâchée). - créer la piste de jeu : modéliser l’espace que le joueur devra parcourir ;
- animer le tout, sinon rien ne bouge et on ne peut pas jouer ;
- attacher la scène à un élément HTML donné (ici, le
body).
C’est aussi cette classe qui se charge d’intégrer la poupée et le joueur.
La classe Doll, comme son nom l’indique gère la poupée, tierce personne observatrice des mouvements du joueur.
Le fonctionnement n’est là encore pas très compliqué :
- Chargement du modèle 3D via three.js et GLTFLoader.
- Une méthode pour la faire se tourner dos à l’utilisateur et une autre pour la faire se retourner, avec à chaque fois une durée aléatoire d’immobilité.
Le tout en conservant une trace de son état, afin de pouvoir déterminer si la poupée peut voir le joueur en plein déplacement.
Enfin, la classe Player s’occupe, quant à elle, de la modélisation du joueur.
À l’instar de la classe Doll, elle va charger le modèle 3D représentant le joueur.
Elle stocke, au cours de la vie de l’instance, sa position ainsi que sa vitesse. Ceci nous permettra de déterminer si le joueur a terminé son parcours.
C’est bien sûr cette classe qui se charge de modifier la position du joueur lorsque la touche ↑ est pressée – et de l’arrêter si la touche est relâchée.
C’est aussi depuis cette classe qu’est appelée la méthode de vérification de l’état de jeu, méthode qui appartient à la classe Game.
Game over
Et c’est à peu près tout pour les gros principes. Le code source est disponible depuis cette page ; il suffit de faire un clic-droit > afficher la source.
Ce n’est clairement pas parfait ni optimisé : la page rame pas mal sur un PC sans carte graphique, par exemple ; et ne fonctionne pas sur mobile (car pas de touche ↑), mais c’est un premier pas dans l’utilisation de la librairie three.js et rien que pour ça, c’était intéressant à réaliser.