Créer un site Web de jeu Pierre Feuille Ciseaux

Introduction

Bonjour, amis développeurs ! Je suis ravi de vous présenter mon dernier projet : un Jeu Pierre Papier Ciseaux. Ce jeu classique est une façon amusante de mettre en pratique vos compétences JavaScript et de créer une expérience utilisateur interactive. Que vous débutiez dans le codage ou que vous cherchiez à ajouter un jeu simple mais attrayant à votre portfolio, ce projet offre une excellente opportunité d'améliorer vos capacités de développement front-end.

Aperçu du projet

Le Jeu Pierre Papier Ciseaux est une application Web où les utilisateurs peuvent jouer au jeu populaire contre un ordinateur. Le projet montre comment gérer les entrées de l'utilisateur, générer des mouvements informatiques aléatoires et déterminer le résultat du jeu. C'est un excellent exercice pour travailler avec la logique conditionnelle et la manipulation DOM.

Caractéristiques

• Gameplay interactif : les utilisateurs peuvent sélectionner Pierre, Papier ou Ciseaux et voir le résultat instantanément.
• Suivi des scores : Le jeu garde une trace des scores du joueur et de l'ordinateur.
• Conception réactive : garantit une expérience cohérente et agréable sur différents appareils.

Technologies utilisées

• HTML : Structure la page Web et les éléments du jeu.
• CSS : stylise l'interface du jeu pour un design épuré et réactif.
• JavaScript : gère la logique du jeu, y compris les interactions des utilisateurs et le suivi des scores.

Structure du projet

Voici un aperçu rapide de la structure du projet :

Rock-Paper-Scissors/
├── index.html
├── style.css
└── script.js

• index.html : Contient la structure HTML du jeu Pierre Papier Ciseaux.
• style.css : inclut des styles CSS pour améliorer l'apparence et la réactivité du jeu.
• script.js : gère la logique du jeu, y compris les interactions des utilisateurs et le suivi des scores.

Installation

Pour démarrer le projet, suivez ces étapes :

1. Cloner le dépôt :
   

   git clone https://github.com/abhishekgurjar-in/Rock-Paper-Scissors.git
   

2. Ouvrez le répertoire du projet :
   

   cd Rock-Paper-Scissors
   

3. Exécuter le projet :

   • Ouvrez le fichier index.html dans un navigateur Web pour commencer à jouer au jeu Pierre Papier Ciseaux.

Usage

1. Ouvrez le site Web dans un navigateur Web.
2. Sélectionnez votre mouvement en cliquant sur les boutons Pierre, Papier ou Ciseaux.
3. Voir le résultat du jeu et voir les scores se mettre à jour automatiquement.

Explication du code

HTML

Le fichier index.html fournit la structure du jeu, y compris les boutons Pierre, Papier et Ciseaux, ainsi que les éléments qui affichent le résultat et les scores. En voici un extrait :

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Rock Paper Scissors Game6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    473a967da286a3c736825b4619e7dc30
      4a249f0d628e2318394fd9b75b4636b1Rock Paper Scissors Game473f0a7621bec819994bb5020d29372a
      e388a4556c0f65e1904146cc1a846beeChoose your move:94b3e26ee717c64999d7867364b1b4a3
      cfc30845dcc69087db4670cfb20dbb15
        06909a81795c7b20fc7f465c5650f5e5👊65281c5ac262bf6d81768915a4a77ac0
        8f650b08ee1baf9097487bb7690c2cfe🖐65281c5ac262bf6d81768915a4a77ac0
        c434bb80fc2caadf54d6803b6423b351✌65281c5ac262bf6d81768915a4a77ac0
      16b28748ea4df4d9c2150843fecfba68
      9369b95c0a54fa14078c71ff87b92a5394b3e26ee717c64999d7867364b1b4a3
      9c3cee03555a05e7fda6c3ddcac84285
        Your score: d8a54a40a42473022fcf25a18ceeb0b8054bdf357c58b8a65c66d7c19c8e4d114 Computer score:
        9777042b948140f7c37ec825c7ba0124054bdf357c58b8a65c66d7c19c8e4d114
      94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

Le fichier style.css stylise le jeu Rock Paper Scissors, offrant une mise en page moderne et conviviale. Voici quelques styles clés :

body {
  background-color: #f1f1f1;
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin: 100px;
}

p {   
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.5rem;
}

.buttons {
  display: flex;
  justify-content: center;
}

button {
  border: none;
  font-size: 3rem;
  margin: 0 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

button:hover {
  opacity: 0.7;
}

#rock {
  background-color: #ff0000;
}

#paper {
  background-color: #2196f3;
}

#scissors {
  background-color: #4caf50;
}

#user-score {
  color: #2196f3;
}

#computer-score {
  color: #ff0000;
}

.footer {
  margin-top: 250px;
  text-align: center;
}

.footer p {
  font-size: 16px;
  font-weight: 400;
}

Javascript

Le fichier script.js gère la logique du jeu Pierre Papier Ciseaux, y compris la gestion des entrées de l'utilisateur, la génération de mouvements informatiques et la détermination du gagnant. En voici un extrait :

const buttons = document.querySelectorAll("button");
const resultEl = document.getElementById("result");
const playerScoreEl = document.getElementById("user-score");
const computerScoreEl = document.getElementById("computer-score");

let playerScore = 0;
let computerScore = 0;

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const result = playRound(button.id, computerPlay());
    resultEl.textContent = result;
  });
});

function computerPlay() {
  const choices = ["rock", "paper", "scissors"];
  const randomChoice = Math.floor(Math.random() * choices.length);
  return choices[randomChoice];
}

function playRound(playerSelection, computerSelection) {
  if (playerSelection === computerSelection) {
    return "It's a tie!";
  } else if (
    (playerSelection === "rock" && computerSelection === "scissors") ||
    (playerSelection === "paper" && computerSelection === "rock") ||
    (playerSelection === "scissors" && computerSelection === "paper")
  ) {
    playerScore++;
    playerScoreEl.textContent = playerScore;
    return "You win! " + playerSelection + " beats " + computerSelection;
  } else {
    computerScore++;
    computerScoreEl.textContent = computerScore;
    return "You lose! " + computerSelection + " beats " + playerSelection;
  }
}

Démo en direct

Vous pouvez consulter la démo en direct du jeu Pierre Papier Ciseaux ici.

Conclusion

Construire le jeu Pierre Papier Ciseaux a été une expérience amusante et éducative qui m'a aidé à pratiquer la manipulation JavaScript et DOM. J'espère que ce projet vous incitera à explorer davantage de projets JavaScript et à continuer à développer vos compétences en codage. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mon parcours visant à améliorer mes compétences en développement front-end, en me concentrant sur la création d'applications Web interactives et dynamiques.

Auteur

• Abhishek Gurjar
  • Profil 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!