Hi Everyone!
In this post, I will show you how to make Rock Paper Scissors in HTML, CSS, and Javascript. Follow me for more projects. Let's get started!
This will be the basic HTML User Interface:
<!DOCTYPE html> <html lang="en"> <head> <title>Rock Paper Scissor Game</title> <!--Fontawesome--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> <!--Google Font--> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="scores"> <p>Computer : <span id="computer_score">0</span> </p> <p> You : <span id="user_score">0</span> </p> </div> <div class="weapons"> <button onclick="checker('rock')"> <i class="far fa-hand-rock"></i> </button> <button onclick="checker('paper')"> <i class="far fa-hand-paper"></i> </button> <button onclick="checker('scissor')"> <i class="far fa-hand-scissors"></i> </button> </div> <div class="details"> <p id="user_choice"></p> <p id="comp_choice"></p> <p id="result"></p> </div> </div> <!--linking the javascript file--> <script src="app.js"></script> </body> Now let's style it to make it look better:
*, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; background: linear-gradient( 135deg, #ffcf1b, #ff8b1b ); } .container{ width: 45%; min-width: 500px; background-color: #ffffff; padding: 40px 30px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 10px; box-shadow: 0 15px 25px rgba(0,0,0,0.15); } .scores{ margin-bottom: 50px; text-align: right; } .weapons{ width: 90%; margin: auto; display: flex; justify-content: space-around; } .weapons button{ background-color: #ffd51b; color: #000000; border: none; font-size: 50px; height: 100px; width: 100px; border-radius: 50%; outline: none; cursor: pointer; } .details{ margin-top: 30px; text-align: center; } .scores,.details{ font-family: 'Poppins',sans-serif; font-weight: 400; font-size: 15px; } #result{ width: 180px; padding: 10px 0; margin: 30px auto; font-weight: 600; letter-spacing: 0.5px; } #user_choice, #computer_choice{ font-weight: 400; margin-bottom: 10px; } span{ font-weight: 600; } Lastly, let's add the Javascript to make it functional:
let [computer_score,user_score]=[0,0]; let result_ref = document.getElementById("result"); let choices_object = { 'rock' : { 'rock' : 'draw', 'scissor' : 'win', 'paper' : 'lose' }, 'scissor' : { 'rock' : 'lose', 'scissor' : 'draw', 'paper' : 'win' }, 'paper' : { 'rock' : 'win', 'scissor' : 'lose', 'paper' : 'draw' } } function checker(input){ var choices = ["rock", "paper", "scissor"]; var num = Math.floor(Math.random()*3); document.getElementById("comp_choice").innerHTML = ` Computer choose <span> ${choices[num].toUpperCase()} </span>`; document.getElementById("user_choice").innerHTML = ` You choose <span> ${input.toUpperCase()} </span>`; let computer_choice = choices[num]; switch(choices_object[input][computer_choice]){ case 'win': result_ref.style.cssText = "background-color: #cefdce; color: #689f38"; result_ref.innerHTML = "YOU WIN"; user_score++; break; case 'lose': result_ref.style.cssText = "background-color: #ffdde0; color: #d32f2f"; result_ref.innerHTML = "YOU LOSE"; computer_score++; break; default: result_ref.style.cssText = "background-color: #e5e5e5; color: #808080"; result_ref.innerHTML = "DRAW"; break; } document.getElementById("computer_score").innerHTML = computer_score; document.getElementById("user_score").innerHTML = user_score; } That's it! You have now created Rock Paper Scissors in HTML, CSS, and Javascript.
Top comments (1)
What about adding some code to make computer smarter? It could look at a user’s historical choices and try and predict what they will pick to add weight to its choice, rather than just a random number. I also think some explanation of the various code, html and css would be useful for inexperienced developers. Otherwise you may as well have just linked a GitHub repo.