Create Rock Paper Scissors with JavaScript

Rock Paper Scissors with JavaScript | Code Architects

Welcome to the “Rock Paper Scissors with Javascript” tutorial! In this tutorial, we’ll be building a classic game of rock, paper, scissors using HTML, CSS, and Javascript. Rock paper scissors is a classic game that has been enjoyed by people of all ages for generations. The game is simple to play and requires no special equipment – just a hand gesture representing one of three choices: rock, paper, or scissors.

To play the game, two players count to three in unison and simultaneously throw one of three hand signs representing rock, paper, or scissors. The winner is determined by the rules: rock crushes scissors, scissors cut paper, and paper covers rock. A round ends with one player being declared the winner and the other player being declared the loser.

Preview (Rock Paper Scissors with JavaScript)

Rock Paper Scissors with JavaScript | Code Architects

HTML

<div class="container">
  <h2>Rock Paper Scissors with JavaScript</h2>
  <div class="rpgcont">
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/34372-200.png" title="Rock"
         onclick="startGame('rock')" />
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1476-200.png" title="Paper"
         onclick="startGame('paper')" />
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/9049-200.png" title="Scissors"
         onclick="startGame('scissors')" />
  </div>
  <p id="whowins">Choose your move</p>
  <div id="score">
    <span class="sides">User: 0</span>
    <span class="sides">Computer: 0</span>
  </div>
</div>

To begin, let’s take a look at the HTML code provided. We can see that we have a container element with an h2 heading and three images representing the three choices in the game (rock, paper, and scissors). These images have an onclick attribute that calls the startGame() function and passes in the choice as a parameter.

We also have a p element with an id of “whowins” that will display the result of the game, and a div element with an id of “score” that will keep track of the score between the user and the computer.

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    background: #D4B483;
}
.container {
    background: white;
    padding: 32px;
    max-width: 425px;
    width: 100%;
    border-radius: 8px;
    transition: 0.2s;
}
.container h2{
    margin-bottom: 32px;
    text-align: center;
}
.rpgcont {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.rpgcont img {
    padding: 8px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    transition: 0.15s;
}
.rpgcont img:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.rpgcont img:active, .rpgcont img:focus {
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}   
.container p {
    text-align: center;
    margin-top: 20px;
    border-radius: 20px;
    padding:12px 0;
    transition: 0.2s;
}
#score {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
#score .sides {
    display: inline-block;
    padding: 12px 20px;
    background: #EEE;
    border-radius: 20px;
}
.win {
    background: rgb(0, 255, 76);
}
.lose {
    background: #ff4719;
}
.tie {
    background: rgb(199, 199, 199);
}

Javascript

let userscore = 0;
let computerscore = 0;
const whowins = document.querySelector("#whowins");
const score = document.querySelector("#score");
function compare(choice1, choice2) {
	if (choice1 === choice2) {
		return "Its a tie!";
	}
	else if (choice1 === "rock") {
		if (choice2 === "scissors") {
			userscore++;
			return "User";
		}
		else if (choice2 === "paper") {
			computerscore++;
			return "Computer";
		}
	}
	else if (choice1 === "paper") {
		if (choice2 === "scissors") {
			computerscore++;
			return "Computer"
		}
		else if (choice2 === "rock") {
			userscore++;
			return "User";
		}
	}
	else if (choice1 === "scissors") {
		if (choice2 === "paper") {
			userscore++;
			return "User"
		}
		else if (choice2 === "rock") {
			computerscore++;
			return "Computer";
		}
	}
}
function startGame(e) {
	let userChoice = e;
	let computerChoices = ["rock", "paper", "scissors"];
	let computerChoice = computerChoices[Math.floor(Math.random() * 3)];
	let winner = compare(userChoice, computerChoice);
	whowins.classList = "";
	if (winner == "User") {
		whowins.innerHTML = winner + " wins";
		whowins.classList.add("win");
	} else if (winner == "Computer") {
		whowins.innerHTML = winner + " wins";
		whowins.classList.add("lose");
	} else {
		whowins.innerHTML = winner;
		whowins.classList.add("tie");
	}
	score.innerHTML = `<span class="sides">User: ${userscore}</span><span class="sides">Computer: ${computerscore}</span>`;
}

Now let’s move on to the Javascript code. At the top, we have two variables: userscore and computerscore, which will keep track of the scores for the user and the computer, respectively. We also have two constant variables: whowins and score, which will store the p and div elements from the HTML code, respectively.

Next, we have the compare() function, which takes in two parameters: choice1 and choice2. These represent the choices made by the user and the computer. The function first checks if the choices are the same, in which case it returns “It’s a tie!”. If the choices are not the same, it compares them using a series of if and else if statements to determine the winner. If the user wins, it increments the userscore variable and returns “User”. If the computer wins, it increments the computerscore variable and returns “Computer”.

Finally, we have the startGame() function, which is called when one of the images is clicked. This function takes in the user’s choice as a parameter (e) and assigns it to the userChoice variable. It then generates a random choice for the computer using the Math.random() function and assigns it to the computerChoice variable.

The function then calls the compare() function and passes in the user’s choice and the computer’s choice as arguments. The result of the compare() function is stored in the winner variable.

Based on the value of the winner variable, the function updates the “whowins” element with the result of the game and adds a class to it using the classList property. If the user wins, it adds the “win” class. If the computer wins, it adds the “lose” class. If it’s a tie, it adds the “tie” class.

Finally, the function updates the “score” element with the current scores for the user and the computer using string interpolation.

And that’s it! You now have a functioning game of rock, paper, scissors using JavaScript. You can customize the appearance of the game using CSS and add additional features as you see fit.

Read our other blogs from the 15 Days – 15 Projects Series.

Checkout the other Code Projects. Find this project on Github.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

four × three =