Rock Paper Scissors is a classic game that has entertained people for generations. In this digital age, we can bring this timeless game to life using JavaScript. Let's dive into creating a fun and interactive Rock Paper Scissors game from scratch.
Introduction to Rock Paper Scissors Game
Rock Paper Scissors, also known as Ro-Sham-Bo, is a simple hand game usually played between two people where each player simultaneously forms one of three shapes with an outstretched hand. The game has a rich history and remains a popular choice for quick decision-making or just for fun.
Setting up the HTML structure
To begin our journey in creating a Rock Paper Scissors game, we need to set up the basic HTML structure. This includes defining the necessary elements such as buttons for rock, paper, and scissors, and areas to display the choices made by the player and the computer.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Rock Paper Scissor</title>
</head>
<body>
<section class="game">
<div class="title">Rock Paper Scissor</div>
<div class="score">
<div class="playerScore">
<h2>Player</h2>
<p class="p-count count">0</p>
</div>
<div class="computerScore">
<h2>Computer</h2>
<p class="c-count count">0</p>
</div>
</div>
<div class="move">Choose your move</div>
<div class="movesleft">Moves Left: 10 </div>
<div class="options">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissor">Scissors</button>
</div>
<div class="result"></div>
</section>
<script src="app.js"></script>
</body>
Styling the game interface with CSS
Once the HTML structure is in place, we can move on to styling the game interface using CSS. Designing visually appealing elements will enhance the overall gaming experience and make the game more engaging for the players.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
background: #082c6c;
color: #fff;
}
.game{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
.title{
position: absolute;
top: 0;
font-size: 4rem;
z-index: 2;
}
.score{
display: flex;
width: 30vw;
justify-content: space-evenly;
position: absolute;
top: 70px;
z-index: 1;
}
.p-count,.c-count{
text-align: center;
font-size: 1.5rem;
margin-top: 1rem;
}
.options{
display: flex;
width: 50vw;
justify-content: space-evenly;
margin-top: 2rem;
}
.rock, .paper, .scissor{
padding: 0.8rem;
width: 100px;
border-radius: 10px;
background: green;
outline: none;
border-color: green;
border: none;
cursor: pointer;
}
.move{
font-size: 2rem;
font-weight: bold;
}
.reload {
display: none;
margin-top: 2rem;
padding: 1rem;
background: green;
outline: none;
border: none;
border-radius: 10px;
cursor: pointer;
}
.result{
margin-top: 20px;
font-size: 1.2rem;
}
Implementing the game logic with JavaScript
The heart of our Rock Paper Scissors game lies in the JavaScript code that handles the game logic. We will write functions to determine the outcome of each round, compare the choices made by the player and the computer, and keep track of the score.
const game = () => {
let playerScore = 0;
let computerScore = 0;
let moves = 0;
const playGame = () => {
const rockBtn = document.querySelector('.rock');
const paperBtn = document.querySelector('.paper');
const scissorBtn = document.querySelector('.scissor');
const playerOptions = [rockBtn, paperBtn, scissorBtn];
const computerOptions = ['rock', 'paper', 'scissors']
playerOptions.forEach(option => {
option.addEventListener('click', function () {
const movesLeft = document.querySelector('.movesleft');
moves++;
movesLeft.innerText = `Moves Left: ${10 - moves}`;
const choiceNumber = Math.floor(Math.random() * 3);
const computerChoice = computerOptions[choiceNumber];
winner(this.innerText, computerChoice)
if (moves == 10) {
gameOver(playerOptions, movesLeft);
}
})
})
}
const winner = (player, computer) => {
const result = document.querySelector('.result');
const playerScoreBoard = document.querySelector('.p-count');
const computerScoreBoard = document.querySelector('.c-count');
player = player.toLowerCase();
computer = computer.toLowerCase();
if (player === computer) {
result.textContent = 'Tie'
}
else if (player == 'rock') {
if (computer == 'paper') {
result.textContent = 'Computer Won';
computerScore++;
computerScoreBoard.textContent = computerScore;
} else {
result.textContent = 'Player Won'
playerScore++;
playerScoreBoard.textContent = playerScore;
}
}
else if (player == 'scissors') {
if (computer == 'rock') {
result.textContent = 'Computer Won';
computerScore++;
computerScoreBoard.textContent = computerScore;
} else {
result.textContent = 'Player Won';
playerScore++;
playerScoreBoard.textContent = playerScore;
}
}
else if (player == 'paper') {
if (computer == 'scissors') {
result.textContent = 'Computer Won';
computerScore++;
computerScoreBoard.textContent = computerScore;
} else {
result.textContent = 'Player Won';
playerScore++;
playerScoreBoard.textContent = playerScore;
}
}
}
const gameOver = (playerOptions, movesLeft) => {
const chooseMove = document.querySelector('.move');
const result = document.querySelector('.result');
const reloadBtn = document.querySelector('.reload');
playerOptions.forEach(option => {
option.style.display = 'none';
})
chooseMove.innerText = 'Game Over!!'
movesLeft.style.display = 'none';
if (playerScore > computerScore) {
result.style.fontSize = '2rem';
result.innerText = 'You Won The Game'
result.style.color = '#308D46';
}
else if (playerScore < computerScore) {
result.style.fontSize = '2rem';
result.innerText = 'You Lost The Game';
result.style.color = 'red';
}
else {
result.style.fontSize = '2rem';
result.innerText = 'Tie';
result.style.color = 'grey'
}
reloadBtn.innerText = 'Restart';
reloadBtn.style.display = 'flex'
reloadBtn.addEventListener('click', () => {
window.location.reload();
})
}
playGame();
}
game();
Output:
Click Here to View in Codepen
Conclusion
Creating a Rock Paper Scissors game with JavaScript is not only a fun coding project but also a great way to learn and practice essential web development skills. By following this guide, you can build your version of the classic game and share it with friends for hours of entertainment.
FAQs
Can I customize the game with additional choices like lizard and Spock?
- Yes, you can expand the game by adding more choices like lizard and Spock to create a variant of Rock Paper Scissors.
How can I make the game responsive for different screen sizes?
- To make the game responsive, you can use CSS media queries to adjust the layout and styling based on the screen size, ensuring a consistent experience across devices.
Is it possible to add multiplayer functionality to the game?
- Adding multiplayer functionality would require implementing real-time communication between players, which can be achieved using technologies like WebSockets or server-side scripting.
What resources can I use to further enhance my JavaScript skills for game development?
- You can explore online tutorials, coding challenges, and practice projects on platforms like Codecademy, freeCodeCamp, and GitHub to enhance your JavaScript skills for game development.
Can I integrate sound effects or music into the game for a more immersive experience?
- Yes, you can enhance the gaming experience by integrating sound effects or music using HTML5 audio elements or JavaScript libraries like Howler.js to add audio features to your Rock Paper Scissors game.