Maison > interface Web > tutoriel CSS > Pierre, papier, ciseaux (avec JavaScript)

Pierre, papier, ciseaux (avec JavaScript)

Barbara Streisand
Libérer: 2024-12-31 07:15:10
original
457 Les gens l'ont consulté

Rock, Paper, Scissors (with JavaScript)

Ce projet est parfait pour les apprenants intermédiaires car il mélange HTML, CSS et JavaScript pour créer un jeu complet et fonctionnel.


? Structure des fichiers

rock-paper-scissors/
│-- index.html    ← HTML structure
│-- styles.css    ← CSS styling
└-- script.js     ← JavaScript functionality
Copier après la connexion

?️ Comment exécuter le projet

  1. Créer les fichiers :

    • Créez un dossier appelé pierre-papier-ciseaux.
    • Dans ce dossier, créez trois fichiers : index.html, styles.css et script.js.
  2. Copiez le code :

    • Collez le code HTML, CSS et JavaScript dans les fichiers respectifs.
  3. Ouvrez le fichier HTML :

    • Ouvrez index.html dans votre navigateur pour jouer au jeu.

? Comment fonctionne le jeu

  1. Sélectionnez un choix :

    • Cliquez sur l'un des boutons : Rock ?, Paper ?, ou Ciseaux ✂️.
  2. Choix de l'ordinateur :

    • L'ordinateur sélectionne au hasard Pierre, Papier ou Ciseaux.
  3. Afficher les résultats :

    • Le jeu montre votre choix, celui de l'ordinateur et qui gagne.
  4. Jouer à nouveau :

    • Cliquez sur le bouton "Jouer à nouveau" pour réinitialiser le jeu.

? Concepts clés pour l'apprentissage

Concepts JavaScript

  1. Auditeurs d'événements :

    • Utilisation de addEventListener pour gérer les clics sur les boutons.
  2. Génération de nombres aléatoires :

    • Math.random() pour générer un choix aléatoire pour l'ordinateur.
  3. Conditions :

    • déclarations if-else pour déterminer le gagnant.
  4. Manipulation du DOM :

    • Mise à jour dynamique du contenu HTML à l'aide de textContent.

Voir sur GitHub

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal