Introduction of the Project
Welcome to the world of game development using JavaScript! In this tutorial, we will be walking you through the steps of building a Rock-Paper-Scissors game in JavaScript. Rock-Paper-Scissors is a classic game that is easy to learn and fun to play. The rules are simple – each player chooses either rock, paper, or scissors, and the winner is determined by a simple set of rules. Rock beats scissors, paper beats rock, and scissors beat paper.
By the end of this tutorial, you will have built a fully functional Rock-Paper-Scissors game that you can share with your friends or even integrate into your website. We will cover the basics of HTML, CSS, and JavaScript to help you get started, and we will walk you through each step of the development process.
We will develop a method that enables a user to choose between rock, paper & scissors, and based upon the computer’s choice, it updates the scoreboard. So let’s get started!
Objectives
We have listed down the objectives for building a Rock-Paper-Scissors game in JavaScript:
1. To practice and improve your skills in JavaScript programming, including variables, functions, and conditional statements.
2. To learn how to manipulate the DOM (Document Object Model) using JavaScript to update the user interface of a webpage dynamically.
3. To create a fun and engaging game that can be played and enjoyed by yourself and others. We will make the pictures of rock, paper & scissors clickable so that user can choose their option & then compare it with computer’s choice to make changes in the scoreboard.
4. To enhance your understanding of user input and event handling, as well as error handling.
5. To gain experience working with HTML and CSS in conjunction with JavaScript to build an interactive web application.
6. To explore the different possibilities of implementing game logic and how it can be structured.
7. To gain experience in refactoring code to improve efficiency and readability.
8. To learn how to use external libraries or frameworks to help with the development process.
9. To practice debugging and testing skills to ensure the game functions correctly.
10. To gain a better understanding of game design principles and mechanics, including the concept of strategy and probability in the Rock-Paper-Scissors game.
Requirements
1. Visual Studio Code or any other IDE
2. HTML: You should be familiar with the structure of an HTML document, as you will need to create an HTML page to display the game and accept user input.
3. CSS: You should have a basic understanding of CSS to style your HTML page and make it visually appealing.
4. JavaScript: You should have a solid understanding of JavaScript programming, including variables, data types, functions, and conditional statements.
5. DOM manipulation: You should understand how to manipulate the Document Object Model (DOM) using JavaScript to update the content of your HTML page dynamically.
6. Event handling: You should understand how to handle user input events, such as clicking a button or pressing a key, to trigger actions within your JavaScript code.
7. Basic game logic: You should understand the basic game logic of Rock-Paper-Scissors, including the rules for winning and losing, as well as the concept of ties.
8. Testing and debugging: You should know how to test and debug your code to ensure that it is functioning correctly.
Source Code
HTML Code
<!DOCTYPE html> <head> <title> Rock Paper Scissors Game </title> <link rel="stylesheet" href="rock_paper_scissors.css"> </head> <body> <header> <h1>Rock Paper Scissors</h1> </header> <div class="score_board"> <div id="user_level" class="badge">user</div> <div id="computer_level" class="badge">computer</div> <spam id="user_score">0</spam> : <spam id="computer_score">0</spam> </div> <div class="result"> <h3> Paper covers Rock. You win. <h3> </div> <div class="choices"> <div class="choice" id="r"> <img src="rock.png" alt=""> </div> <div class="choice" id="p"> <img src="paper.png" alt=""> </div> <div class="choice" id="s"> <img src="scissors.png" alt=""> </div> </div> <p id="actionmsg"> Make your move </p> <script src="rps.js"></script> </body>
CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
padding: 20px;
background-color: white;
}
header > h1{
color: #0d0d1c;
font-family: sans-serif;
text-align: center;
}
body{
background: #0d0d1c;
}
.score_board{
border-style: solid ;
border-color: whitesmoke;
margin: 20px auto;
width: 200px;
color: white;
font-family: sans-serif;
text-align: center;
padding: 15 px 20 px;
font-size: 46px;
position: relative;
border-radius:4px;
}
.badge
{
background-color: red;
color:white;
font-size: 14px;
padding: 2px 10px;
font-family: sans-serif;
}
#user_level
{
position: absolute;
top: 20px;
left: -25px;
font-size: 14px;
}
#computer_level
{
position: absolute;
top: 20px;
left: 150px;
font-size: 14px;
}
.result{
color: white;
text-align: center;
font-family: sans-serif;
}
#actionmsg{
color: white;
text-align: center;
}
.choices{
margin: 50px;
text-align: center;
}
.choice{
display: inline-block;
border-style: solid ;
border-color: whitesmoke;
border-radius: 50%;
padding: 10px;
margin: 0 20px;
transition: all 0.4s ease;
}
.choice:hover{
cursor: pointer;
background-color: #000012;
}JAVASCRIPT Code
var user_score=0;
var computer_score=0;
const userscore_span= document.getElementById("user_score");
const computerscore_span= document.getElementById("computer_score");
const scoreboard_div=document.querySelector(".score_board");
const result_h3=document.querySelector(".result > h3");
const rock_div= document.getElementById("r");
const paper_div= document.getElementById("p");
const scissors_div= document.getElementById("s");
function word(letter)
{
if(letter === 'r')
return "Rock";
if(letter === 's')
return "Scissors";
return "Paper";
}
function win(userChoice , computerChoice)
{
user_score++;
userscore_span.innerHTML= user_score;
computerscore_span.innerHTML= computer_score;
result_h3.innerHTML= word(userChoice)+"(U)"+ " beats " +word(computerChoice)+"(C)" + ".YOU WIN ";
}
function lose(userChoice , computerChoice)
{
computer_score++;
userscore_span.innerHTML= user_score;
computerscore_span.innerHTML= computer_score;
result_h3.innerHTML= word(computerChoice)+"(C)"+ " beats " +word(userChoice)+"(U)" + ".YOU LOSE ";
}
function draw(userChoice , computerChoice)
{
userscore_span.innerHTML= user_score;
computerscore_span.innerHTML= computer_score;
result_h3.innerHTML= "DRAW";
}
function getComputerChoice()
{
const choices= ['r','p','s'];
const randomNumber=Math.floor(Math.random()*3);
return choices[randomNumber];
}
function game(userChoice)
{
const computerChoice=getComputerChoice();
console.log("user choice " +userChoice);
console.log("computer choice " +computerChoice);
switch(userChoice + computerChoice)
{
case "rs":
case "pr":
case "sp":
win(userChoice,computerChoice);
break;
case "sr":
case "rp":
case "ps":
lose(userChoice,computerChoice);
break;
case "ss":
case "rr":
case "pp":
draw(userChoice,computerChoice);
break;
}
}
function main()
{
rock_div.addEventListener('click', function()
{
game('r');
});
paper_div.addEventListener('click', function()
{
game('p');
});
scissors_div.addEventListener('click', function()
{
game('s');
});
getComputerChoice();
}
main();Explanation of the Code
We have divided the source code into 3 different sections. The first two are HTML & CSS, which involve creating the GUI and styling it.
1. Our code contains multiple <div> tags to denote scoreboard.
2. The user interface consists of 3 <img> tags to denote rock, paper & scissors, respectively.
3. We have also provided a button, “RESET” to refresh the screen.
4. The CSS file is meant for styling the html where the container is provided with appropriate margin, padding, and font colour and font size.
The JavaScript code is for setting up the logic for the game:
1. We have used the random() method of Math class to choose among rock, paper & scissors as a computer’s choice.
2. We take the user’s input by applying click listeners to images.
3. Finally, we make the possibilities of user winning, losing or drawing the match, then update the scoreboard accordingly.
Output
Main Interface
Points To Remember
We have successfully developed a rock-paper-scissors game in JavaScript. The game is being played against the computer with a nice scoreboard. It is a very fun & famous game which can be easily played from this simple website. Here is a sum up of key points you sh
- Set up your HTML page: Create an HTML page with the necessary elements, such as buttons for the player to select rock, paper, or scissors and a display area to show the game results.
- Style your HTML page: Use CSS to style your HTML page and make it visually appealing.
- Write the game logic: Write the JavaScript code that implements the game logic, including the rules for winning and losing and the handling of ties.
- Handle user input: Use event listeners to handle user input and trigger the appropriate actions within your JavaScript code.
- Update the game display: Use DOM manipulation to update the game display with the results of each round, including the choices made by the player and the computer and the outcome of the round.
- Implement error handling: Implement error handling to ensure that the game works correctly even if unexpected input is entered.
- Refactor your code: Refactor your code to improve its efficiency and readability and to make it easier to maintain and update.
- Test and debug your code: Test your game thoroughly to ensure that it works correctly in a variety of scenarios, and debug any errors that arise.
- Consider additional features: Consider adding additional features, such as a score tracker or a sound effect when a round is won.
- Publish and share: Publish your game online, either on your own website or on a platform such as CodePen, and share it with others to play and enjoy.
Cisco Ramon is an American software engineer who has experience in several popular and commercially successful programming languages and development tools. He has been writing content since last 5 years. He is a Senior Manager at Rude Labs Pvt. Ltd.
0 Comments