Faire un jeu basé sur un navigateur avec Vanilla JS et CSS - SitePoint

Cet article démontre la construction d'un jeu de permission de drapeau basé sur un navigateur en utilisant uniquement Vanilla JavaScript et CSS, présentant la puissance des technologies Web modernes sans bibliothèques externes ni frameworks. Plongeons-nous pour créer ce jeu attrayant étape par étape.

Concept:

Le jeu présente un emoji de drapeau et des options à choix multiples. Les joueurs sélectionnent un pays, recevant des commentaires et progressant à travers des rondes.

Étape 1: Structure de base

Nous aurons besoin d'une liste de pays et de leurs drapeaux (en utilisant des emojis). Une interface simple affiche l'indicateur et cinq boutons de réponse. CSS utilise une disposition de grille pour une conception réactive. La structure du projet comprend un fichier HTML, un fichier data.json contenant des données de pays et des dossiers pour JavaScript, des fonctions d'assistance, CSS et des images.

Étape 2: prototype simple

Nous chargeons data.json en utilisant fetch , puis démarrez le jeu. La fonction startGame randomise la liste des pays, sélectionne une réponse, choisit quatre autres pays et met à jour le DOM avec les boutons de drapeau et de réponse. La fonction checkAnswer évalue les choix de joueurs, fournissant des commentaires. Un algorithme Shuffle Fisher-Yates randomise l'ordre du pays.

Étape 3: code modulaire

Pour améliorer l'organisation du code, nous utiliserons les modules JavaScript. Le HTML importe step3.js , qui importe des fonctions d'assistance ( loadCountries et shuffle ) à partir de fichiers séparés. La logique de jeu est encapsulée dans une classe Game , améliorant l'intégrité des données et la maintenabilité.

Étape 4: notation et jeu

Le constructeur Game comprend désormais numTurns . Le DOM est mis à jour pour inclure un écran de score, un bouton de relecture et un écran de jeu. La méthode start initialise le compteur de score et de virage, et la méthode nextTurn gère la progression ronde, la mise à jour du score et le déclenchement de l'état de jeu lorsque tous les virages sont terminés. La méthode gameOver affiche le score final.

Étape 5: Animations

Les animations CSS améliorent l'expérience utilisateur. Les images clés créent des animations coulissantes pour la liste des pays, apparaissant et disparaissant en douceur entre les virages. L'événement animationend assure des transitions en douceur.

Étape 6: touches finales

Un écran de titre est ajouté pour fournir un contexte. Un système de notation des joueurs est implémenté en fonction du score final. Des animations sont ajoutées pour célébrer les bonnes réponses.

Améliorations supplémentaires:

L'article suggère plusieurs améliorations:

• Ajout d'effets sonores.
• Activation du jeu hors ligne à l'aide de travailleurs Web.
• Stockage des statistiques de jeu dans le stockage local.
• Ajout de capacités de partage des médias sociaux.

Ce tutoriel montre efficacement comment créer un jeu fonctionnel et engageant avec un code minimal, mettant en évidence les capacités de Vanilla JavaScript et CSS. L'approche modulaire et l'utilisation des animations CSS présentent les meilleures pratiques pour le développement Web moderne.

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!