Rock-Paper-Scissors is a classic hand game that’s easy to play and fun to build using web technologies. In this tutorial, you’ll learn how to create an interactive Rock-Paper-Scissors game using HTML, CSS, and JavaScript. This project is perfect for beginners looking to improve their JavaScript skills while working with the DOM.
Features of This Game:
✅ Simple and user-friendly UI using HTML & CSS 🎨
✅ Interactive gameplay with JavaScript click events 🖱️
✅ Randomized computer choices using Math.random() 🤖
✅ Logic to compare moves and determine the winner 🏆
✅ Dynamic score updates for an engaging experience 📊
By the end of this tutorial, you’ll have a fully functional Rock-Paper-Scissors game that you can customize and enhance!
Step-by-Step Guide to Creating the Game
1. Setting Up the HTML Structure
Create a simple HTML file with buttons for Rock, Paper, and Scissors. Each button triggers a JavaScript function when clicked.
<!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="styles.css">
</head>
<body>
<h1>Rock-Paper-Scissors</h1>
<p>Choose Rock, Paper, or Scissors:</p>
<div>
<button class="choice rock" onclick="playGame('rock')">🪨 Rock</button>
<button class="choice paper" onclick="playGame('paper')">📄 Paper</button>
<button class="choice scissors" onclick="playGame('scissors')">✂️ Scissors</button>
</div>
<p class="result" id="result"></p>
<p>Your Score: <span id="player-score">0</span> | Computer Score: <span id="computer-score">0</span></p>
<script src="script.js"></script>
</body>
</html>2. Styling with CSS
Create a separate styles.css file for better organization and styling.
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}
.choice {
font-size: 18px;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
border: none;
border-radius: 5px;
}
.rock { background-color: #3498db; color: white; }
.paper { background-color: #2ecc71; color: white; }
.scissors { background-color: #e74c3c; color: white; }
.result {
font-size: 22px;
font-weight: bold;
margin-top: 20px;
}3. JavaScript Logic
Create a separate script.js file to handle game logic.
let playerScore = 0;
let computerScore = 0;
function playGame(playerChoice) {
const choices = ["rock", "paper", "scissors"];
const computerChoice = choices[Math.floor(Math.random() * 3)];
let resultText = "";
if (playerChoice === computerChoice) {
resultText = `It's a tie! You both chose ${playerChoice}.`;
} else if (
(playerChoice === "rock" && computerChoice === "scissors") ||
(playerChoice === "paper" && computerChoice === "rock") ||
(playerChoice === "scissors" && computerChoice === "paper")
) {
resultText = `You Win! ${playerChoice} beats ${computerChoice}.`;
playerScore++;
} else {
resultText = `You Lose! ${computerChoice} beats ${playerChoice}.`;
computerScore++;
}
document.getElementById("result").innerText = resultText;
document.getElementById("player-score").innerText = playerScore;
document.getElementById("computer-score").innerText = computerScore;
}4. How the Game Works
- When you click a button (Rock, Paper, or Scissors), the
playGame()function runs. - The computer randomly selects one of the three choices.
- The game logic determines the winner based on standard rules:
- Rock beats Scissors
- Paper beats Rock
- Scissors beat Paper
- Scores are updated dynamically.
5. Enhancements You Can Try
Want to make the game even better? Here are some ideas:
- 🎨 Add more stylish animations with CSS.
- 🎵 Play sound effects when a choice is selected.
- 🏆 Implement a best-of-5 or best-of-10 game mode.
- 💾 Store the highest score using
localStorage.
Watch the Full Video Tutorial 🎥
Check out our step-by-step video tutorial on YouTube:
Get the Source Code 📂
Access the full code on GitHub:
🔗 GitHub Repository
If you enjoyed this tutorial, don’t forget to like, comment, and subscribe to Madras Academy for more exciting web development tutorials! 🚀
#HTML #CSS #JavaScript #WebDevelopment #RockPaperScissors #JavaScriptGames #Coding #TechTutorial #FrontendDevelopment #GameDevelopment #InteractiveGame 🎯🎮