Construire un clone Skribbl.io : du concept à l'achèvement

Créer un jeu multijoueur en temps réel comme Skribbl.io est un défi passionnant qui combine divers aspects du développement Web. Dans cet article, je parlerai de ma mise en œuvre et de ma réflexion lors de la création d'un clone en temps réel sur la façon dont vous pouvez gérer un jeu basé sur des tours et un système de minuterie

Si vous souhaitez consulter le code source du projet, vous pouvez le trouver ici Github

Pile technologique

Avant de plonger dans les détails, examinons brièvement la pile technologique utilisée pour ce projet :

• Node.js : Pour le serveur backend.
• Socket.IO : Pour une communication en temps réel.
• Redis : Pour une gestion efficace des données.
• Vite : Pour un développement rapide avec React.
• TypeScript : pour la sécurité des types en frontend et en backend.
• React : Pour créer l'interface utilisateur.
• Docker : Pour conteneuriser l'application.

Configuration du back-end

Le backend est alimenté par Node.js et Socket.IO, qui sont parfaits pour gérer les interactions en temps réel. Voici un bref aperçu des principaux composants :

1. WebSockets pour la communication en temps réel

Socket.IO permet une communication transparente entre le serveur et les clients. Nous l'utilisons pour gérer des événements tels que les joueurs rejoignant des salles, démarrant des jeux et envoyant des données de dessin.

2. Système de salle

Chaque jeu est hébergé dans une salle unique, identifiée par un identifiant de salle. Les joueurs rejoignent une salle en utilisant cet identifiant et interagissent avec les autres personnes dans la même salle. Le système gère également les connexions et déconnexions des joueurs.

Mais ici, nous avons un problème : comment pouvons-nous garantir que notre serveur conserve les données qui étaient dans le jeu si jamais le serveur plante

Ici, nous utilisons une base de données rapide et également un corps distinct du serveur

Redis est un excellent choix pour ce type de cas d'utilisation. C'est une base de données en mémoire qui est rapide et peut être exécutée séparément sur un serveur différent

Nous en reparlerons plus tard dans le post.

3. Gestion des événements

Le serveur écoute et émet divers événements :

• Événements client : connexion, déconnexion, joinRoom, LeaveRoom, startGame, draw, deviner, changeSettings, wordSelect
• Événements du serveur : joindRoom, playerJoined, playerLeft, gameStarted, gameEnded, drawData, deviné, turnEnded, ChooseWord, wordChosen, settingsChanged, GuessFail

Développer le front-end

Pour le frontend, j'ai utilisé React avec TypeScript et Vite pour une expérience de développement fluide.

1. Construire l'interface utilisateur

L'interface utilisateur comprend des composants permettant de dessiner, de deviner et de gérer les paramètres du jeu. L'architecture basée sur les composants de React a facilité la création d'une interface utilisateur dynamique et réactive.

2. Gestion de l'état du jeu

Le frontend gère l'état du jeu, y compris les scores des joueurs, le tour en cours et les données de tirage. TypeScript garantit que les structures de données sont bien définies et sans erreurs.

3. Mises à jour en temps réel

Grâce à Socket.IO, le frontend se met à jour en temps réel en fonction des événements du serveur. Par exemple, lorsqu'un joueur dessine, les données du dessin sont envoyées à tous les clients présents dans la salle.

Gestion de l'état du jeu

Une gestion efficace de l'état du jeu est cruciale pour garantir une expérience fluide et agréable dans un jeu multijoueur en temps réel comme Skribbl.io. Voici un aperçu détaillé de la façon dont les différents aspects de l’état du jeu sont gérés :

Joueur rejoignant et quittant

Gérer les joueurs entrant et sortant d'une salle implique plusieurs étapes clés :

• Rejoindre :

  1. Émission d'événement : Lorsqu'un joueur souhaite rejoindre une salle, il envoie un événement joinRoom avec l'ID de la salle au serveur.
  2. Validation : Le serveur valide l'identifiant de la salle et vérifie si la salle existe.
  3. Ajout d'un joueur : S'il est valide, le joueur est ajouté à la liste des joueurs de la salle. Le serveur met ensuite à jour l'état du jeu et émet un événement playerJoined à tous les clients présents dans la salle, les informant de l'arrivée du nouveau joueur.
  4. Mise à jour de l'interface utilisateur : sur le frontend, la présence du nouveau joueur est reflétée dans la liste des joueurs de la salle, garantissant que tout le monde voit la liste de joueurs la plus récente.

• Départ :

  1. Émission d'événement : Lorsqu'un joueur décide de partir, il envoie un événement LeaveRoom au serveur.
  2. Suppression d'un joueur : Le serveur supprime le joueur de la liste des joueurs de la salle et met à jour l'état du jeu en conséquence.
  3. Notification : Le serveur émet un événement playerLeft à tous les clients restants, les informant que le joueur a quitté la salle.
  4. Mise à jour de l'interface utilisateur : l'interface reflète ce changement en supprimant le joueur de la liste des joueurs et en ajustant les mécanismes de jeu en cours si nécessaire.

Sélection de mots

Choisir un mot et gérer à qui c'est le tour de choisir implique plusieurs mécanismes :

• Tour du joueur actuel :
  1. Gestion des tours : Le serveur conserve un enregistrement de qui c'est le tour de choisir un mot. Ceci est géré par l'état du jeu, qui comprend une propriété indiquant l'ID du joueur actuel.
  2. Invite de sélection de mots : Lorsque c'est au tour d'un joueur de choisir un mot, il reçoit un événement ChooseWord du serveur, l'invitant à sélectionner un mot.

• Prévenir les fuites de mots :

  1. Accès restreint par tour : Le mot choisi n'est pas immédiatement diffusé aux autres joueurs. Au lieu de cela, il n'est partagé que lorsque c'est le tour du tiroir, pour éviter tout avantage injuste.
  2. Emission d'événement : Une fois que le tiroir a choisi le mot, le serveur émet un événement wordChosen à tous les joueurs. Cet événement comprend une notification indiquant que le mot a été sélectionné et est prêt à être deviné.

• Notification de sélection de mots :

  1. Diffusion : L'événement wordChosen inclut une notification indiquant qu'un mot a été sélectionné, qui est envoyée à tous les joueurs de la salle.
  2. Gestion du frontend : côté client, les joueurs sont mis à jour pour indiquer que la phase de tirage a commencé, et ils peuvent maintenant commencer à deviner.

Gestion des délais d'attente pour la sélection de mots

Pour gérer les cas où le joueur actuel pourrait retarder la sélection des mots :

• Affectation automatique :
  1. Mécanisme de délai d'attente : Le serveur implémente un minuteur qui démarre lorsque c'est au tour du joueur de choisir un mot. Si le joueur ne sélectionne pas de mot dans le temps imparti, un événement de timeout est déclenché.
  2. Affectation de mots : Le serveur sélectionne automatiquement un mot dans une liste prédéfinie et l'attribue au joueur. Cela garantit que le jeu continue sans retards inutiles.
  3. Notification : Un événement wordChosen est alors émis pour avertir tous les joueurs qu'un mot a été attribué et que la phase de tirage au sort commence.

Gestion des données de dessin

La gestion des données de tirage est essentielle pour maintenir la synchronisation entre les joueurs :

• Dessin en temps réel :
  1. Événements de dessin : les joueurs envoient des données de dessin au serveur à l'aide de l'événement de tirage. Ces données incluent la couleur du pinceau, le rayon et les coordonnées des points dessinés.
  2. Diffusion : Le serveur reçoit ces données et les diffuse à tous les clients de la salle à l'aide d'un événement drawData. Cela garantit que la toile de chaque joueur est mise à jour en temps réel avec les dernières informations de dessin.

Gestion des événements de devinette du joueur

Gérer les suppositions des joueurs implique de traiter et de valider chaque supposition :

• Devinez la soumission :

  1. Gestion des événements : lorsqu'un joueur fait une supposition, il envoie un événement de supposition au serveur avec son mot de supposition.
  2. Validation : Le serveur traite la supposition, en la vérifiant par rapport au mot correct. Si la supposition est correcte, le serveur met à jour l'état du jeu et les scores des joueurs.

• Résultats de diffusion :

  1. Résultat de la supposition : Le serveur émet un événement deviné à tous les joueurs, indiquant si la supposition était correcte ou non.
  2. Mise à jour de l'interface utilisateur : sur le frontend, le résultat est affiché à tous les joueurs, indiquant qui a bien deviné et mettant à jour la progression du jeu.

Délais d'attente pour dessiner et deviner

La gestion des contraintes de temps est essentielle pour que le jeu reste attrayant :

• Temps de tirage terminé :
  1. Gestion du temps : Chaque tour a une limite de temps définie pour le tirage. Le serveur suit ce temps et déclenche un événement turnEnded lorsque le délai expire.
  2. Transition : Cet événement signale la fin de la phase de tirage au sort et le jeu passe à la phase de devinette ou au tour suivant.

• Tous les joueurs devinés :
  1. Devinez l'achèvement : Si tous les joueurs devinent le mot avant la fin du temps imparti, le serveur déclenche un événement turnEnded plus tôt.
  2. Game Flow : cet événement informe tous les clients que la phase de devinette est terminée et fait passer le jeu à la phase ou au tour suivant.

Cette approche de la gestion de l'état du jeu garantit une expérience fluide, interactive et équitable pour tous les joueurs, améliorant ainsi le plaisir global du jeu.

Conclusion

Construire un clone Skribbl.io implique une interaction complexe de communication en temps réel, de gestion de l'état du jeu et d'interactions avec les utilisateurs. Grâce à ce projet, nous avons exploré diverses facettes du développement de jeux, de la gestion des connexions des joueurs et de la sélection des mots à la gestion des données de dessin et des suppositions des joueurs.

Points clés à retenir

• Communication en temps réel : l'utilisation de Socket.IO permet un jeu transparent et interactif, garantissant que tous les joueurs restent synchronisés.
• Gestion de l'état : une gestion efficace de l'état du jeu, comme l'adhésion des joueurs, la sélection des mots et les données de dessin, est cruciale pour une expérience utilisateur fluide. La mise en œuvre de délais d'attente et d'affectations automatiques garantit le déroulement du jeu sans interruption.
• Expérience utilisateur : le maintien d'une interface attrayante et réactive améliore la satisfaction des joueurs. Des commentaires clairs sur les actions telles que dessiner et deviner, combinés à des mises à jour opportunes, maintiennent les joueurs informés et investis dans le jeu.

Prochaines étapes

Si vous êtes inspiré pour aller plus loin dans ce projet, pensez à :

• Ajout de nouvelles fonctionnalités : implémentez des modes de jeu supplémentaires, des personnalisations ou des améliorations pour rendre le jeu plus dynamique.
• Optimisation des performances : explorez les moyens d'améliorer les performances, comme l'optimisation de la transmission des données de dessin ou la réduction de la latence.
• Amélioration de l'UI/UX : Affinez l'interface utilisateur et l'expérience en fonction des commentaires des joueurs pour rendre le jeu plus agréable.

Ce projet a été un voyage passionnant dans le développement de jeux en temps réel, combinant diverses technologies et techniques pour créer une expérience multijoueur amusante et engageante. J'espère que cet article vous a fourni des informations précieuses sur la gestion de l'état du jeu et vous a inspiré à explorer davantage le monde du développement de jeux.

N'hésitez pas à partager vos réflexions, questions ou améliorations sur ce projet dans les commentaires ci-dessous. Bon codage !

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!