rock-paper-scissors


DEMO



Step by Step Algorithm:

1. Create an HTML document with a head and body element. In the head, specify the character encoding, viewport, and link to a stylesheet. In the body, create a div element with an id of "game".

2. Inside the "game" div, create a p element with text content "Select your move:". Below the p element, create three button elements with ids of "rock", "paper", and "scissors", respectively. These will be used to allow the user to choose their move in the game.

3. Below the buttons, create two more p elements. The first should contain text content "Computer choice: " followed by a strong element with an empty span element inside it, with an id of "computer". The second should contain text content "Result: " followed by a span element with an id of "result". These elements will be used to display the computer's choice and the result of the game, respectively.

4. At the bottom of the body, include a script element with a src attribute that points to the JavaScript file that will contain the logic for the game.

5. In the JavaScript file, create functions that will be called when the "rock", "paper", or "scissors" buttons are clicked. These functions will be responsible for determining the computer's move, comparing it to the user's move, and displaying the result.

6. Inside each function, use DOM manipulation techniques to update the text content of the "computer" and "result" span elements with the computer's move and the game result, respectively.

7. Add event listeners to the "rock", "paper", and "scissors" buttons that call the appropriate function when the button is clicked.

HTML: 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Rock Paper Scissors></title>
</head>
<body>
<div id="game">
<p>Select your move:></p>
<button id="rock">Rock></button>
<button id="paper">Paper></button>
<button id="scissors">Scissors></button>
<p>Computer choice: <strong><span id="computer"></span></strong></p>
<p>Result: <span id="result"> ></span></p>
</div>
<script src="app.js"></script> 
</body>
</html>

CSS: 


*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
#game {
width: auto;
margin: 10% auto;
text-align: center;
font-family: sans-serif;
display: flex;
flex-direction: column;
width: 50%;
gap:30px;
}

button {
background-color: lightblue;
border: none;
padding: 5px 10px;
cursor: pointer;
}

button:hover {
background-color: skyblue;
}

#result {
font-weight: bold;
}

Step by Step Algorithm:

1. Declare three functions that will be called when the "rock", "paper", or "scissors" buttons are clicked. Each function should call a function called playGame with a parameter indicating the player's choice (either "rock", "paper", or "scissors").

2. Inside the playGame function, use the Math.random function to generate a random number between 0 and 2. Use this number to select a value from an array of possible computer choices (either "rock", "paper", or "scissors"). Store this value in a variable called computerChoice.

3. Use a series of if statements to determine the result of the game based on the player's and computer's choices. If the player's choice is the same as the computer's choice, the result is a tie. If the player's choice beats the computer's choice according to the rules of rock-paper-scissors (rock beats scissors, paper beats rock, scissors beat paper), the result is a win for the player. Otherwise, the result is a loss for the player.

4. Use DOM manipulation techniques to update the text content of the "computer" and "result" span elements with the computer's move and the game result, respectively.

5. Add event listeners to the "rock", "paper", and "scissors" buttons that call the appropriate function when the button is clicked.

Java Script: 



document.getElementById('rock').onclick = function() {
playGame('rock');
};

document.getElementById('paper').onclick = function() {
playGame('paper');
};

document.getElementById('scissors').onclick = function() {
playGame('scissors');
};

function playGame(playerChoice) {
// computer chooses a random move
var computer = ['scissors', 'rock', 'paper']
var computerChoice =computer[Math.floor(Math.random() * 3)];

// determine the result
var result;
if (playerChoice == computerChoice) {
result = 'Tie';
} else if (
(playerChoice == 'rock' && computerChoice == 'scissors') ||
(playerChoice == 'paper' && computerChoice == 'rock') ||
(playerChoice == 'scissors' && computerChoice == 'paper')
) {
result = 'You win';
} else {
result = 'You lose';
}

// display the result
document.getElementById('result').innerHTML = result;
document.getElementById('computer').innerHTML = computerChoice;

}

You can improve this project in your own version.

We are ready to release more projects please support us by sharing and visiting webdevmonk