JavaScript Rock Paper Scissors Game

In this tutorial, you will make Rock Paper Scissors game with you previous HTML, CSS and JavaScript knowledge.

Rock Paper Scissors

Choose your weapon:

Result:

Concepts that can be covered by this project

HTML: Basic HTML structure, such as <head>, <body>, <div>, and <button>.
CSS: Basic CSS styling, such as font-family, font-size, margin, padding, and background-color.
JavaScript: Variables, functions, event listeners, and DOM manipulation.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Rock Paper Scissors</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Rock Paper Scissors</h1>
        <div id="game">
            <h3>Choose your weapon:</h3>
            <button id="rock">Rock</button>
            <button id="paper">Paper</button>
            <button id="scissors">Scissors</button>
        </div>
    <div id="result">
        <h3>Result:</h3>
        <p id="winner" class="p"></p>
    </div>
    <script src="script.js"></script>
    </body>
</html>

Summary of the above is

The HTML code creates a basic structure for the game, including the title, the "Choose your weapon" buttons, and the "Result" section.
The JavaScript code adds the game logic, such as generating the computer's choice, comparing the player's choice to the computer's choice, and displaying the winner of the game.
The JavaScript code uses event listeners to listen for clicks on the "Choose your weapon" buttons. When a button is clicked, the JavaScript code calls the playGame() function to play a round of the game.
The playGame() function generates the computer's choice, compares the player's choice to the computer's choice, and displays the winner of the game on the screen.

CSS (style.css)


#game {
  display: flex;
  justify-content: center;
  align-items: center;
 
}
 

button {
  margin: 10px;
  padding: 10px;
  font-size: 16px;
  background-color: #000000;
  border: none;
  cursor: pointer;
  color: white;
}

#result {
  margin-top: 20px;
  text-align: center;
}

.p {
  font-size: 20px;
}

JavaScript (script.js)


const rockButton = document.getElementById('rock');
const paperButton = document.getElementById('paper');
const scissorsButton = document.getElementById('scissors');
const resultElement = document.getElementById('winner');

const computerOptions = ['rock', 'paper', 'scissors'];

function generateComputerChoice() {
const randomNumber = Math.floor(Math.random() * computerOptions.length);
return computerOptions[randomNumber];
}

function playGame(playerChoice) {
const computerChoice = generateComputerChoice();

if (playerChoice === computerChoice) {
resultElement.textContent = 'Draw';
} else if (playerChoice === 'rock' && computerChoice === 'scissors') {
resultElement.textContent = 'Player wins';
} else if (playerChoice === 'paper' && computerChoice === 'rock') {
resultElement.textContent = 'Player wins';
} else if (playerChoice === 'scissors' && computerChoice === 'paper') {
resultElement.textContent = 'Player wins';
} else {
resultElement.textContent = 'Computer wins';
}
}

rockButton.addEventListener('click', () => playGame('rock'));
paperButton.addEventListener('click', () => playGame('paper'));
scissorsButton.addEventListener('click', () => playGame('scissors'));

generateComputerChoice(): This function generates a random choice for the computer, either "rock", "paper", or "scissors".
playGame(playerChoice): This function plays a round of the game, comparing the player's choice to the computer's choice and updating the result element on the screen.
The code also adds event listeners to the "Choose your weapon" buttons, so that when a player clicks on a button, the playGame() function is called.

Previous Next