I am excited to share a fun project I created a Rock-Paper-Scissors game! This project was a fantastic opportunity for me to enhance my skills in HTML, CSS, and JavaScript while learning new concepts. The final result is an interactive game that keeps track of scores and declares the winner.
Learn While Building This Game
While developing this project, I explored several key concepts:
- Math.random() to generate random choices for the computer.
- DOM manipulation to dynamically update the scores and winner messages.
- Conditional statements to determine the game logic.
- Basic styling with CSS to make the game visually appealing.
Despite being busy with other projects, I always find time to learn more about JavaScript and work on small projects like this one. Each project helps me grow as a developer!
Guide to Building the Game
Here’s how I built this Rock-Paper-Scissors game:
Setting Up the HTML Structure
The HTML provides the foundation for my game. It includes buttons for the player’s choices and a display area for scores and results.Here’s the HTML code:
<!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>
<div class="game-container">
<div class="choices">
<button class="choice" data-choice="rock">Rock</button>
<button class="choice" data-choice="paper">Paper</button>
<button class="choice" data-choice="scissors">Scissors</button>
</div>
<div class="results">
<p>Computer: <span id="computer-score">0</span></p>
<p>You: <span id="player-score">0</span></p>
<p id="result-message">Make your move!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling the Game with CSS
To make the game visually appealing, I added some CSS. The colors, spacing, and button styling match a modern design.Here’s the CSS code:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #00eaff;
}
.game-container {
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.choices {
display: flex;
gap: 10px;
}
.choice {
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 50%;
cursor: pointer;
transition: transform 0.3s;
}
.choice:hover {
transform: scale(1.1);
}
.results {
margin-left: 20px;
}
#result-message {
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
Adding Game Logic with JavaScript
The game logic determines who wins based on the player’s and computer’s choices. The script updates the scores and displays a message indicating the winner of each round.Here’s the JavaScript code:
const choices = document.querySelectorAll('.choice');
const playerScoreEl = document.getElementById('player-score');
const computerScoreEl = document.getElementById('computer-score');
const resultMessageEl = document.getElementById('result-message');
let playerScore = 0;
let computerScore = 0;
choices.forEach(choice => {
choice.addEventListener('click', () => {
const playerChoice = choice.getAttribute('data-choice');
const computerChoice = getComputerChoice();
const result = getWinner(playerChoice, computerChoice);
updateScores(result);
displayResult(playerChoice, computerChoice, result);
});
});
function getComputerChoice() {
const options = ['rock', 'paper', 'scissors'];
return options[Math.floor(Math.random() * options.length)];
}
function getWinner(player, computer) {
if (player === computer) return 'draw';
if (
(player === 'rock' && computer === 'scissors') ||
(player === 'paper' && computer === 'rock') ||
(player === 'scissors' && computer === 'paper')
) {
return 'player';
}
return 'computer';
}
function updateScores(winner) {
if (winner === 'player') {
playerScore++;
playerScoreEl.textContent = playerScore;
} else if (winner === 'computer') {
computerScore++;
computerScoreEl.textContent = computerScore;
}
}
function displayResult(playerChoice, computerChoice, winner) {
if (winner === 'draw') {
resultMessageEl.textContent = `It's a draw! You both chose ${playerChoice}.`;
} else if (winner === 'player') {
resultMessageEl.textContent = `You Win! Your ${playerChoice} beats ${computerChoice}.`;
} else {
resultMessageEl.textContent = `You Lose! ${computerChoice} beats your ${playerChoice}.`;
}
}
How It Works
- Player’s Choice: When a player clicks a button, their choice is read from the
data-choiceattribute. - Computer’s Choice: The computer randomly selects rock, paper, or scissors using
Math.random(). - Winner Determination: The game compares the choices and determines the winner using simple conditional logic.
- Score Update: The score is updated dynamically, and the result is displayed on the screen.
Try It Yourself!
This project is simple yet powerful for understanding basic programming concepts like randomness, conditionals, and DOM manipulation. I encourage you to give it a try and let me know how you enhance the game! Feel free to add animations, sound effects, or additional features.