<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.10.0-1\/css\/all.css\"><\/pre>\n2. Create an HTML file and set up the basic structure, including headers, game status, player boards, and result display elements.<\/p>\n
<header>\r\n <h2>Rock Scissors Paper<\/h2>\r\n <\/header>\r\n <div id=\"game-status\">\r\n <p><span class=\"user-status\">Rock<\/span> beats <span class=\"computer-status\"> Scissors<\/span><\/p>\r\n <\/div>\r\n <div id=\"game-frame\">\r\n <div class=\"user-board board\">\r\n <p>User<\/p>\r\n <\/div>\r\n <div class=\"computer-board board\">\r\n <p>Computer<\/p>\r\n <\/div>\r\n <div id=\"result\">\r\n <span class=\"user-score\">0<\/span>:<span class=\"computer-score\">0<\/span>\r\n <\/div>\r\n <\/div>\r\n <div id=\"signs\">\r\n <div class=\"sign rock\"><i class=\"fas fa-hand-rock\"><\/i><\/div>\r\n <div class=\"sign scissors\"><i class=\"fas fa-hand-scissors\"><\/i><\/div>\r\n <div class=\"sign paper\"><i class=\"fas fa-hand-paper\"><\/i><\/div>\r\n <\/div>\r\n <div id=\"result-txt\">\r\n <p class=\"result-para\">Make your move!<\/p>\r\n <\/div><\/pre>\n3. Now, add the following CSS code to style the game interface. You can customize the colors and layout to match your website’s design.<\/p>\n
@import url('https:\/\/fonts.googleapis.com\/css?family=Lato|Montserrat&display=swap');\r\n* {\r\n box-sizing: border-box;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\nbody {\r\n background-color: #111414;\r\n}\r\n\r\nheader > h2 {\r\n text-align: center;\r\n padding: 20px;\r\n font-family: Lato, sans-serif;\r\n background-color: #fff;\r\n}\r\n\r\n#game-status {\r\n margin-top: 25px;\r\n}\r\n\r\n#game-status > p {\r\n color: #fff;\r\n font-family: Montserrat;\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: bold;\r\n font-size: 25px;\r\n}\r\n\r\n#game-frame {\r\n width: 300px;\r\n border: 3px solid #fff;\r\n border-radius: 3%;\r\n margin: 0 auto;\r\n margin-top: 40px;\r\n color: #fff;\r\n font-family: Arial, sans-serif;\r\n position: relative;\r\n height: 150px;\r\n}\r\n\r\n.board {\r\n background: #ee1100;\r\n width: 30%;\r\n text-align: center;\r\n font-weight: bold;\r\n border-radius: 10%;\r\n padding: 5px;\r\n}\r\n\r\n.user-board {\r\n position: absolute;\r\n top: 50px;\r\n left: -40px;\r\n}\r\n\r\n.computer-board {\r\n position: absolute;\r\n top: 50px;\r\n right: -40px;\r\n}\r\n\r\n\r\n#result {\r\n text-align: center;\r\n font-size: 50px;\r\n margin-top: 40px;\r\n}\r\n\r\n#signs {\r\n color: #fff;\r\n margin-top: 50px;\r\n text-align: center;\r\n}\r\n\r\n.sign {\r\n display: inline-block;\r\n font-size: 60px;\r\n padding: 20px;\r\n margin: 25px;\r\n border: 4px solid #fff;\r\n border-radius: 50%;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.sign:hover {\r\n border-color: #ee0000;\r\n}\r\n\r\n#result-txt {\r\n color: #fff;\r\n font-family: Lato, sans-serif;\r\n text-align: center;\r\n font-weight: bold;\r\n font-size: 25px;\r\n margin-top: 30px;\r\n}<\/pre>\n4. The heart of the game lies in the JavaScript code. This code makes the game interactive and handles user choices and outcomes. To integrate this code, copy and paste it into a JavaScript file in your project.<\/p>\n
let uScore = 0;\r\nlet cS = 0;\r\nconst rock = document.querySelector(\".rock\");\r\nconst scissors = document.querySelector(\".scissors\");\r\nconst paper = document.querySelector(\".paper\");\r\nconst userScore = document.querySelector(\".user-score\");\r\nconst computerScore = document.querySelector(\".computer-score\");\r\nlet statusLeft = document.querySelector(\".user-status\");\r\nlet statusRight = document.querySelector(\".computer-status\");\r\nlet result = document.querySelector(\".result-para\")\r\n\r\n\r\nfunction win(userChoice, computerChoice) {\r\n uScore ++;\r\n statusLeft.innerHTML = convertToWord(userChoice);\r\n statusRight.innerHTML = convertToWord(computerChoice); \r\n userScore.innerHTML = uScore;\r\n result.innerHTML = \"You won!\";\r\n}\r\n\r\nfunction loose(userChoice, computerChoice) {\r\n cS++;\r\n statusLeft.innerHTML = convertToWord(computerChoice);\r\n statusRight.innerHTML = convertToWord(userChoice); \r\n computerScore.innerHTML = cS;\r\n result.innerHTML = \"You lost :-(\";\r\n}\r\n\r\nfunction draw(userChoice, computerChoice) {\r\n result.innerHTML = \"Draw!\";\r\n}\r\n\r\n\r\nfunction getComputerChoice() {\r\n const choices = ['r','s','p'];\r\n const choicesRandom = Math.floor(Math.random() * 3);\r\n return choices[choicesRandom];\r\n}\r\n\r\nfunction game(userChoice) {\r\n const computerChoice = getComputerChoice();\r\n switch(userChoice + computerChoice) {\r\n case 'rs':\r\n case 'sp':\r\n case 'pr':\r\n win(userChoice, computerChoice);\r\n break;\r\n case 'ps':\r\n case 'sr':\r\n case 'rp':\r\n loose(userChoice, computerChoice);\r\n break;\r\n case 'pp':\r\n case 'ss':\r\n case 'rr':\r\n draw(userChoice, computerChoice);\r\n } \r\n}\r\n\r\n\r\n\r\nfunction main() {\r\n rock.addEventListener(\"click\", function(){\r\n game(\"r\");\r\n })\r\n scissors.addEventListener(\"click\", function(){\r\n game(\"s\");\r\n })\r\n paper.addEventListener(\"click\", function(){\r\n game(\"p\");\r\n })\r\n}\r\n\r\nmain();\r\nfunction convertToWord(letter) {\r\nif(letter === \"r\") return \"Rock\";\r\nif(letter === \"p\") return \"Paper\";\r\nreturn \"Scissors\";\r\n}<\/pre>\nThe JavaScript code consists of functions that control the game logic. Here’s what each function does:<\/p>\n