Recréer des éléments de jeu pour le Web: le balayage de la carte parmi nous

Les développeurs Web s'inspirent souvent de la conception de jeux vidéo. Des interfaces utilisateur de titres populaires comme Overwatch aux mécanismes engageants de jeux tels que Pokémon Go , les éléments de jeu offrent de riches possibilités pour améliorer les projets de développement Web. Cette approche permet le développement des compétences ciblées en s'attaquant aux fonctionnalités spécifiques du jeu plutôt qu'à la construction de jeux entiers. Cette approche ciblée expose souvent les développeurs à de nouvelles technologies et techniques.

Cet article montre la recréation du mécanicien de balayage par carte parmi nous. Pour ceux qui ne sont pas familiers, parmi nous est un jeu multijoueur où les joueurs doivent identifier les imposteurs parmi les coéquipiers tout en effectuant des tâches. La tâche de balayage de la carte, malgré sa simplicité, a atteint le statut Memetic en raison de sa difficulté.

Démo interactive

Voici une récréation du balayage parmi les cartes parmi les États-Unis: (La démo serait intégrée ici)

Explorons les techniques utilisées pour construire cette démo.

Gestion des événements de souris et de touche

La fonctionnalité principale implique de rendre la carte dragable. La carte suit le pointeur horizontalement tout en restant verticalement aligné avec le lecteur. La traînée est limitée à une plage spécifique, et la carte réinitialise sa position d'origine lors de la sortie.

Ceci est réalisé à l'aide de gestionnaires d'événements de souris et de toucher. Trois fonctions - pour mousedown , mousemove et mouseup (ou leurs équivalents tactiles) - gérez l'interaction. Voici un extrait de code JavaScript simplifié:

 const card = document.getElementById ('card');
const Reader = document.getElementById ('Reader');
Soit actif = false;
Laissez initialX;

// Écouteurs d'événements
Document.AddeventListener («Mousedown», dragstart);
Document.AddeventListener («MouseMove», drag);
document.addeventListener ('MouseUp', dragend);
document.addeventListener ('TouchStart', dragstart);
document.addeventListener ('TouchMove', glisser);
document.addeventListener («Touchend», dragend);

// ... (Fonctions DragStart, Drag, Dragend et SetTranslate comme dans l'original) ...

Valider les balayages avec performance.now()

Le glissement de validation vérifie la vitesse et la distance. Une distance insuffisante ou une vitesse incorrecte entraîne un glissement non valide.

La position de la carte par rapport au lecteur est vérifiée dans dragEnd :

 Soit le statut;
// ... (Vérifiez si la carte n'a pas été glissée jusqu'au bout) ...

La durée de glissement est mesurée à dragStart aide performance.now() dragEnd

 // ... (horodatrices prises au début de glisser et à la fin à l'aide de performances.now ()) ...

L'attribut data-status de l'élément de lecteur est mis à jour en fonction du résultat de validation. CSS affiche ensuite le message approprié et illumine un feu vert ou rouge.

 / * CSS pour les messages d'état et les indicateurs de lumière * /

Améliorer les visuels et l'audio

D'autres raffinements incluent l'utilisation d'une police personnalisée (DSEG) pour un look LCD rétro, ajoutant une animation de gigue subtile au texte à l'aide de CSS:

 / * Css pour l'animation de gigue * /

Et enfin, incorporant les effets sonores du jeu original:

 // ... (lecture audio pour les balayages valides / non valides) ...

Cela améliore l'expérience utilisateur globale.

Reproduire les mécanismes de jeu

Ce parmi les loisirs de cartes de carte américaine montre comment la réplication des éléments de jeu peut élargir les compétences en développement Web. En se concentrant sur un mécanicien de jeu spécifique, les développeurs peuvent explorer diverses technologies et aspects de conception dans une portée gérable. Essayez de reproduire vos mécanismes de jeu préférés - vous pourriez être surpris de ce que vous apprenez!

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!