Hey there! Today, I’m sharing a cool project that takes me back to childhood – building a Rock Paper Scissors game using JavaScript, HTML, and CSS. It’s simple, fun, and a great way to practice your coding skills. Whether you’re just starting with front-end development or sharpening your JavaScript logic, this project will help you learn, build, and grow. Let’s dive in step-by-step!
Setting the Foundation with HTML
The HTML is straightforward. We create a basic structure with elements for:
- Game title (Rock Paper Scissors)
- Choice buttons (Rock, Paper, Scissors)
- Scoreboard (your score and computer’s score)
- A message container to show the winner of each round
Here’s what the HTML file (index.html) looks like:
<!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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Rock Paper Scissors</h1>
<!-- Game Choices -->
<div class="choices">
<div class="choice" id="rock">
<img src="./images/pathhr.jpg" alt="Rock">
</div>
<div class="choice" id="paper">
<img src="./images/kagti.jpg" alt="Paper">
</div>
<div class="choice" id="scissor">
<img src="./images/scissor.jpg" alt="Scissor">
</div>
</div>
<!-- Scoreboard -->
<div class="score-board">
<div class="score">
<p id="user-score">0</p>
<p>YOU</p>
</div>
<div class="score">
<p id="comp-score">0</p>
<p>COMP</p>
</div>
</div>
<!-- Message Container -->
<div class="msg-container">
<p id="msg">Play your move</p>
</div>
<!-- Script -->
<script src="logic.js"></script>
</body>
</html>Styling It Up with CSS
The CSS makes our game visually appealing. We:
- Center the game on the screen
- Add colors, borders, and spacing to make the game look clean and fun
- Style images and text so everything fits together perfectly
Here’s a basic CSS file (style.css):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f9;
color: #333;
}
h1 {
margin: 20px 0;
color: #1a2a6c;
}
.choices {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px;
}
.choice img {
width: 100px;
cursor: pointer;
transition: transform 0.2s;
}
.choice img:hover {
transform: scale(1.1);
}
.score-board {
display: flex;
justify-content: center;
gap: 50px;
margin: 20px;
font-size: 24px;
}
.msg-container {
margin: 20px;
font-size: 18px;
font-weight: bold;
}
#msg {
background: #1a2a6c;
color: #fff;
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}Adding the Logic with JavaScript
Here’s where the magic happens. In the JavaScript file (logic.js), we:
- Capture user’s move (Rock, Paper, or Scissors) when they click
- Generate a random computer move
- Compare both moves to determine the winner
- Update the score and display a message showing who won the round
Here’s the full JavaScript:
const choices = document.querySelectorAll(".choice");
const userScorePara = document.querySelector("#user-score");
const compScorePara = document.querySelector("#comp-score");
const msg = document.querySelector("#msg");
let userScore = 0;
let compScore = 0;
// Function to Generate Computer’s Move
function computerChoice() {
const options = ["rock", "paper", "scissor"];
const randomIndex = Math.floor(Math.random() * options.length);
return options[randomIndex];
}
// Function to Determine the Winner
function determineWinner(user, comp) {
if (user === comp) return "It's a draw!";
if ((user === "rock" && comp === "scissor") ||
(user === "paper" && comp === "rock") ||
(user === "scissor" && comp === "paper")) {
userScore++;
return "You win!";
} else {
compScore++;
return "Computer wins!";
}
}
// Game Logic on Click
choices.forEach(choice => {
choice.addEventListener("click", () => {
const userChoice = choice.id;
const compChoice = computerChoice();
const resultMsg = determineWinner(userChoice, compChoice);
// Update UI
userScorePara.innerText = userScore;
compScorePara.innerText = compScore;
msg.innerText = `You chose ${userChoice}, Computer chose ${compChoice}. ${resultMsg}`;
});
});Testing and Enhancing
Once you have everything set up, open the index.html file in your browser (you can use VS Code’s Live Server extension for convenience). Test it out:
- Click on Rock, Paper, or Scissors to play a round.
- The score updates, and a message appears to show who won.
Feel free to enhance the game by:
- Adding sounds for each click or win
- Including animations for the choices
- Keeping track of rounds (e.g., Best of 5)
What I Learned
- HTML & CSS: Structuring the page and styling it cleanly
- JavaScript Logic: Handling events, generating random choices, and using
ifconditions for comparisons - Problem-Solving: Debugging and ensuring the game works smoothly
Conclusion
Building a Rock Paper Scissors game is a fantastic project for learning and leveling up your front-end development skills. It’s fun, interactive, and covers the core concepts of web development. Plus, you get a working game to show off!