This content originally appeared on DEV Community and was authored by Abhishek Gurjar
Introduction
Hello, fellow developers! I'm excited to introduce my latest project: a Rock Paper Scissors Game. This classic game is a fun way to practice your JavaScript skills and create an interactive user experience. Whether you're new to coding or looking to add a simple yet engaging game to your portfolio, this project offers a great opportunity to improve your front-end development abilities.
Project Overview
The Rock Paper Scissors Game is a web-based application where users can play the popular game against a computer. The project demonstrates how to manage user input, generate random computer moves, and determine the outcome of the game. It's an excellent exercise in working with conditional logic and DOM manipulation.
Features
- Interactive Gameplay: Users can select Rock, Paper, or Scissors and see the result instantly.
- Score Tracking: The game keeps track of the player's and computer's scores.
- Responsive Design: Ensures a consistent and enjoyable experience across different devices.
Technologies Used
- HTML: Structures the web page and game elements.
- CSS: Styles the game interface for a clean and responsive design.
- JavaScript: Manages the game logic, including user interactions and score tracking.
Project Structure
Here's a quick look at the project structure:
Rock-Paper-Scissors/
├── index.html
├── style.css
└── script.js
- index.html: Contains the HTML structure for the Rock Paper Scissors game.
- style.css: Includes CSS styles to enhance the appearance and responsiveness of the game.
- script.js: Manages the game logic, including user interactions and score tracking.
Installation
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Rock-Paper-Scissors.git -
Open the project directory:
cd Rock-Paper-Scissors -
Run the project:
- Open the
index.htmlfile in a web browser to start playing the Rock Paper Scissors game.
- Open the
Usage
- Open the website in a web browser.
- Select your move by clicking on the Rock, Paper, or Scissors buttons.
- View the result of the game, and see the scores update automatically.
Code Explanation
HTML
The index.html file provides the structure of the game, including the buttons for Rock, Paper, and Scissors, and the elements that display the result and scores. Here’s a snippet:
<!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">👊</button>
<button id="paper">🖐</button>
<button id="scissors">✌</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>
CSS
The style.css file styles the Rock Paper Scissors game, providing a modern and user-friendly layout. Here are some key styles:
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
The script.js file manages the logic for the Rock Paper Scissors game, including handling user input, generating computer moves, and determining the winner. Here’s a snippet:
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;
}
}
Live Demo
You can check out the live demo of the Rock Paper Scissors game here.
Conclusion
Building the Rock Paper Scissors game was a fun and educational experience that helped me practice JavaScript and DOM manipulation. I hope this project inspires you to explore more JavaScript projects and continue building your coding skills. Happy coding!
Credits
This project was developed as part of my journey to enhance my front-end development skills, focusing on creating interactive and dynamic web applications.
Author
- Abhishek Gurjar
This content originally appeared on DEV Community and was authored by Abhishek Gurjar
Abhishek Gurjar | Sciencx (2024-08-23T17:36:39+00:00) Build a Rock Paper Scissors Game Website. Retrieved from https://www.scien.cx/2024/08/23/build-a-rock-paper-scissors-game-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.