Créer un site Web de jeu Pierre Feuille Ciseaux-tutoriel CSS-php.cn

Créer un site Web de jeu Pierre Feuille Ciseaux

WBOY

Libérer： 2024-08-24 06:41:35

original

1035 Les gens l'ont consulté

Build a Rock Paper Scissors Game Website

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

Copier après la connexion

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 :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Rock-Paper-Scissors
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour commencer à jouer au jeu Pierre Papier Ciseaux.

Usage

Ouvrez le site Web dans un navigateur Web.
Sélectionnez votre mouvement en cliquant sur les boutons Pierre, Papier ou Ciseaux.
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 :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rock Paper Scissors Game</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="main">
      <h1>Rock Paper Scissors Game</h1>
      <p>Choose your move:</p>
      <div class="buttons">
        <button id="rock">&#x1F44A;</button>
        <button id="paper">&#x1f590;</button>
        <button id="scissors">&#x270c;</button>
      </div>
      <p id="result"></p>
      <p id="scores">
        Your score: <span id="user-score">0</span> Computer score:
        <span id="computer-score">0</span>
      </p>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Copier après la connexion

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;
}

Copier après la connexion

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;
  }
}

Copier après la connexion

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.