{"id":10718,"date":"2023-02-19T18:00:08","date_gmt":"2023-02-19T12:30:08","guid":{"rendered":"http:\/\/myprojectideas.com\/?p=10718"},"modified":"2025-10-13T06:00:44","modified_gmt":"2025-10-13T06:00:44","slug":"rock-paper-scissors-game-in-javascript","status":"publish","type":"post","link":"https:\/\/rudelabs.ai\/blogs\/rock-paper-scissors-game-in-javascript\/","title":{"rendered":"Rock-Paper Scissors Game In JavaScript"},"content":{"rendered":"

Introduction of the Project<\/strong><\/h2>\n

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.<\/p>\n

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.<\/p>\n

We will develop a method that enables a user to choose between rock, paper & scissors, and based upon the computer\u2019s choice, it updates the scoreboard. So let’s get started!<\/p>\n

Objectives<\/strong><\/h2>\n

We have listed down the objectives for building a Rock-Paper-Scissors game in JavaScript:<\/p>\n

1. To practice and improve your skills in JavaScript programming, including variables, functions, and conditional statements.<\/p>\n

2. To learn how to manipulate the DOM (Document Object Model)<\/a> using JavaScript to update the user interface of a webpage dynamically.<\/p>\n

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\u2019s choice to make changes in the scoreboard.<\/p>\n

4. To enhance your understanding of user input and event handling, as well as error handling.<\/p>\n

5. To gain experience working with HTML and CSS in conjunction with JavaScript to build an interactive web application.<\/p>\n

6. To explore the different possibilities of implementing game logic and how it can be structured.<\/p>\n

7. To gain experience in refactoring code to improve efficiency and readability.<\/p>\n

8. To learn how to use external libraries or frameworks to help with the development process.<\/p>\n

9. To practice debugging and testing skills to ensure the game functions correctly.<\/p>\n

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.<\/p>\n

Requirements<\/strong><\/h2>\n

1. Visual Studio Code<\/a> or any other IDE<\/p>\n

2. HTML:<\/strong> 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.<\/p>\n

3. CSS:<\/strong> You should have a basic understanding of CSS to style your HTML page and make it visually appealing.<\/p>\n

4. JavaScript:<\/strong> You should have a solid understanding of JavaScript programming, including variables, data types, functions, and conditional statements.<\/p>\n

5. DOM manipulation:<\/strong> You should understand how to manipulate the Document Object Model (DOM)<\/em> using JavaScript to update the content of your HTML page dynamically.<\/p>\n

6. Event handling:<\/strong> 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.<\/p>\n

7. Basic game logic:<\/strong> 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.<\/p>\n

8. Testing and debugging:<\/strong> You should know how to test and debug your code to ensure that it is functioning correctly.<\/p>\n

Source Code<\/strong><\/h2>\n

HTML Code<\/strong><\/h3>\n
<!DOCTYPE html>\r\n\r\n<head>\r\n\r\n<title>\r\n\r\nRock Paper Scissors Game\r\n\r\n<\/title>\r\n\r\n<link rel=\"stylesheet\" href=\"rock_paper_scissors.css\">\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<header>\r\n\r\n<h1>Rock Paper Scissors<\/h1>\r\n\r\n<\/header>\r\n\r\n<div class=\"score_board\">\r\n\r\n<div id=\"user_level\" class=\"badge\">user<\/div>\r\n\r\n<div id=\"computer_level\" class=\"badge\">computer<\/div>\r\n\r\n<spam id=\"user_score\">0<\/spam> : <spam id=\"computer_score\">0<\/spam>\r\n\r\n<\/div>\r\n\r\n<div class=\"result\">\r\n\r\n<h3>\r\n\r\nPaper covers Rock. You win.\r\n\r\n<h3>\r\n\r\n<\/div>\r\n\r\n<div class=\"choices\">\r\n\r\n<div class=\"choice\" id=\"r\">\r\n\r\n<img src=\"rock.png\" alt=\"\">\r\n\r\n<\/div>\r\n\r\n<div class=\"choice\" id=\"p\">\r\n\r\n<img src=\"paper.png\" alt=\"\">\r\n\r\n<\/div>\r\n\r\n<div class=\"choice\" id=\"s\">\r\n\r\n<img src=\"scissors.png\" alt=\"\">\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<p id=\"actionmsg\">\r\n\r\nMake your move\r\n\r\n<\/p>\r\n\r\n<script src=\"rps.js\"><\/script>\r\n\r\n<\/body><\/pre>\n
CSS Code<\/strong><\/h3>\n
*{\r\n\r\nmargin: 0;\r\n\r\npadding: 0;\r\n\r\nbox-sizing: border-box;\r\n\r\n}\r\n\r\nheader{\r\n\r\npadding: 20px;\r\n\r\nbackground-color: white;\r\n\r\n}\r\n\r\nheader > h1{\r\n\r\ncolor: #0d0d1c;\r\n\r\nfont-family: sans-serif;\r\n\r\ntext-align: center;\r\n\r\n}\r\n\r\nbody{\r\n\r\nbackground: #0d0d1c;\r\n\r\n}\r\n\r\n.score_board{\r\n\r\nborder-style: solid ;\r\n\r\nborder-color: whitesmoke;\r\n\r\nmargin: 20px auto;\r\n\r\nwidth: 200px;\r\n\r\ncolor: white;\r\n\r\nfont-family: sans-serif;\r\n\r\ntext-align: center;\r\n\r\npadding: 15 px 20 px;\r\n\r\nfont-size: 46px;\r\n\r\nposition: relative;\r\n\r\nborder-radius:4px;\r\n\r\n}\r\n\r\n.badge\r\n\r\n{\r\n\r\nbackground-color: red;\r\n\r\ncolor:white;\r\n\r\nfont-size: 14px;\r\n\r\npadding: 2px 10px;\r\n\r\nfont-family: sans-serif;\r\n\r\n}\r\n\r\n#user_level\r\n\r\n{\r\n\r\nposition: absolute;\r\n\r\ntop: 20px;\r\n\r\nleft: -25px;\r\n\r\nfont-size: 14px;\r\n\r\n}\r\n\r\n#computer_level\r\n\r\n{\r\n\r\nposition: absolute;\r\n\r\ntop: 20px;\r\n\r\nleft: 150px;\r\n\r\nfont-size: 14px;\r\n\r\n}\r\n\r\n.result{\r\n\r\ncolor: white;\r\n\r\ntext-align: center;\r\n\r\nfont-family: sans-serif;\r\n\r\n}\r\n\r\n#actionmsg{\r\n\r\ncolor: white;\r\n\r\ntext-align: center;\r\n\r\n}\r\n\r\n.choices{\r\n\r\nmargin: 50px;\r\n\r\ntext-align: center;\r\n\r\n}\r\n\r\n.choice{\r\n\r\ndisplay: inline-block;\r\n\r\nborder-style: solid ;\r\n\r\nborder-color: whitesmoke;\r\n\r\nborder-radius: 50%;\r\n\r\npadding: 10px;\r\n\r\nmargin: 0 20px;\r\n\r\ntransition: all 0.4s ease;\r\n\r\n}\r\n\r\n.choice:hover{\r\n\r\ncursor: pointer;\r\n\r\nbackground-color: #000012;\r\n\r\n}<\/pre>\n
JAVASCRIPT Code<\/strong><\/h3>\n
var user_score=0;\r\n\r\nvar computer_score=0;\r\n\r\nconst userscore_span= document.getElementById(\"user_score\");\r\n\r\nconst computerscore_span= document.getElementById(\"computer_score\");\r\n\r\nconst scoreboard_div=document.querySelector(\".score_board\");\r\n\r\nconst result_h3=document.querySelector(\".result > h3\");\r\n\r\nconst rock_div= document.getElementById(\"r\");\r\n\r\nconst paper_div= document.getElementById(\"p\");\r\n\r\nconst scissors_div= document.getElementById(\"s\");\r\n\r\nfunction word(letter)\r\n\r\n{\r\n\r\nif(letter === 'r')\r\n\r\nreturn \"Rock\";\r\n\r\nif(letter === 's')\r\n\r\nreturn \"Scissors\";\r\n\r\nreturn \"Paper\";\r\n\r\n}\r\n\r\nfunction win(userChoice , computerChoice)\r\n\r\n{\r\n\r\nuser_score++;\r\n\r\nuserscore_span.innerHTML= user_score;\r\n\r\ncomputerscore_span.innerHTML= computer_score;\r\n\r\nresult_h3.innerHTML= word(userChoice)+\"(U)\"+ \" beats \" +word(computerChoice)+\"(C)\" + \".YOU WIN \";\r\n\r\n}\r\n\r\nfunction lose(userChoice , computerChoice)\r\n\r\n{\r\n\r\ncomputer_score++;\r\n\r\nuserscore_span.innerHTML= user_score;\r\n\r\ncomputerscore_span.innerHTML= computer_score;\r\n\r\nresult_h3.innerHTML= word(computerChoice)+\"(C)\"+ \" beats \" +word(userChoice)+\"(U)\" + \".YOU LOSE \";\r\n\r\n}\r\n\r\nfunction draw(userChoice , computerChoice)\r\n\r\n{\r\n\r\nuserscore_span.innerHTML= user_score;\r\n\r\ncomputerscore_span.innerHTML= computer_score;\r\n\r\nresult_h3.innerHTML= \"DRAW\";\r\n\r\n}\r\n\r\nfunction getComputerChoice()\r\n\r\n{\r\n\r\nconst choices= ['r','p','s'];\r\n\r\nconst randomNumber=Math.floor(Math.random()*3);\r\n\r\nreturn choices[randomNumber];\r\n\r\n}\r\n\r\nfunction game(userChoice)\r\n\r\n{\r\n\r\nconst computerChoice=getComputerChoice();\r\n\r\nconsole.log(\"user choice \" +userChoice);\r\n\r\nconsole.log(\"computer choice \" +computerChoice);\r\n\r\nswitch(userChoice + computerChoice)\r\n\r\n{\r\n\r\ncase \"rs\":\r\n\r\ncase \"pr\":\r\n\r\ncase \"sp\":\r\n\r\nwin(userChoice,computerChoice);\r\n\r\nbreak;\r\n\r\ncase \"sr\":\r\n\r\ncase \"rp\":\r\n\r\ncase \"ps\":\r\n\r\nlose(userChoice,computerChoice);\r\n\r\nbreak;\r\n\r\ncase \"ss\":\r\n\r\ncase \"rr\":\r\n\r\ncase \"pp\":\r\n\r\ndraw(userChoice,computerChoice);\r\n\r\nbreak;\r\n\r\n}\r\n\r\n}\r\n\r\nfunction main()\r\n\r\n{\r\n\r\nrock_div.addEventListener('click', function()\r\n\r\n{\r\n\r\ngame('r');\r\n\r\n});\r\n\r\npaper_div.addEventListener('click', function()\r\n\r\n{\r\n\r\ngame('p');\r\n\r\n});\r\n\r\nscissors_div.addEventListener('click', function()\r\n\r\n{\r\n\r\ngame('s');\r\n\r\n});\r\n\r\ngetComputerChoice();\r\n\r\n}\r\n\r\nmain();<\/pre>\n
Explanation of the Code<\/strong><\/h2>\n
We have divided the source code into 3 different sections. The first two are HTML & CSS, which involve creating the GUI and styling it.\u00a0<\/em><\/p>\n
1. Our code contains multiple <div><\/a> tags to denote scoreboard.<\/p>\n
2. The user interface consists of 3 <img><\/a> tags to denote rock, paper & scissors, respectively.<\/p>\n
3. We have also provided a button, \u201cRESET\u201d<\/strong><\/em> to refresh the screen.<\/p>\n
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.<\/p>\n
The JavaScript code is for setting up the logic for the game:<\/em><\/p>\n
1. We have used the random() method<\/a> of Math class to choose among rock, paper & scissors as a computer\u2019s choice.<\/p>\n
2. We take the user\u2019s input by applying click listeners to images.<\/p>\n
3. Finally, we make the possibilities of user winning, losing or drawing the match, then update the scoreboard accordingly.<\/p>\n
Output<\/strong><\/h2>\n
Main Interface<\/strong><\/p>\n
\"Rock-Paper<\/p>\n
Points To Remember<\/strong><\/h2>\n
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<\/p>\n