"Rock-Paper-Scissors Game"
Bootstrap 4.1.1 Snippet by karanbohara0

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rock Paper Scissors</title> <link rel="stylesheet" href="10-rock-paper-scissors.css"> <!-- <link rel="stylesheet" href="10-rock-paper-scissors.js"> --> </head> <body> <p class="title">Rock Paper Scissors</p> <button class="move-button" onclick="playGame('Rock')"><img src="https://supersimple.dev/projects/rock-paper-scissors/images/rock-emoji.png" class="move-icon"></button> <button class="move-button" onclick="playGame('Paper')"><img src="https://supersimple.dev/projects/rock-paper-scissors/images/paper-emoji.png" class="move-icon" ></button> <button class="move-button" onclick="playGame('Scissors')"><img src="https://supersimple.dev/projects/rock-paper-scissors/images/scissors-emoji.png" class="move-icon"></button> <p class="js-result result"></p> <p class="js-score score"></p> <button onclick="score.wins=0;score.losses=0;score.ties=0; localStorage.removeItem('score'); updateScoreElement(); " class="reset-score-button">Reset Score</button> <script src="10-rock-paper-scissors.js"> </script> </body> </html>
body{ background-color: rgb(25,25,25); color: white; font-family: Arial; } .title{ font-size: 30px; font-weight: bold; } .move-icon{ height: 50px; } .move-button{ background-color: transparent; border: 3px solid white; border-radius: 100%; width: 120px; height: 120px; margin-right: 10px; cursor: pointer; } .result{ font-size: 25px; font-weight: bold; margin-top: 50px; } .score{ margin-top: 60px; } .reset-score-button{ background-color: white; border: none; padding: 8px 15px; font-size: 15px; cursor: pointer; }
let score =(JSON.parse(localStorage.getItem('score'))) ||{ wins:0, losses:0, ties:0 }; updateScoreElement(); /*if(!score){ // it means if the score is null score = { wins:0, losses:0, ties:0 }; }*/ function playGame(playerMove) { const computerMove = pickComputerMove(); let result = ''; if (playerMove === 'Scissors') { if (computerMove === 'Rock') { result = 'You lose.'; } else if (computerMove === 'Paper') { result = 'You win.'; } else if (computerMove === 'Scissors') { result = 'Tie.'; } } else if (playerMove === 'Rock') { if (computerMove === 'Rock') { result = 'Tie.'; } else if (computerMove === 'Paper') { result = 'You lose.'; } else if (computerMove === 'Scissors') { result = 'You win.'; } } else if (playerMove === 'Paper') { if (computerMove === 'Rock') { result = 'You win.'; } else if (computerMove === 'Paper') { result = 'Tie.'; } else if (computerMove === 'Scissors') { result = 'You lose.'; } } if(result==='You win.'){ score.wins+=1 } else if (result==='You lose.'){ score.losses+=1; } else if(result==='Tie.'){ score.ties+=1; } localStorage.setItem('score',JSON.stringify(score)); updateScoreElement(); document.querySelector('.js-result').innerHTML = result; document.querySelector('.js-moves').innerHTML = `You <img src="${playerMove}-emoji.png" class="move-icon"> <img src="${computerMove}-emoji.png" class="move-icon"> Computer` // alert(`You picked ${playerMove} and computer picked ${computerMove}. ${result} // wins: ${score.wins}, loses: ${score.losses}, ties: ${score.ties} // `); } function updateScoreElement(){ document.querySelector('.js-score') .innerHTML= `wins: ${score.wins}, loses: ${score.losses}, ties: ${score.ties}`; } function pickComputerMove() { const randomNumber = Math.random(); let computerMove = ''; if (randomNumber >= 0 && randomNumber < 1/3) { computerMove = 'Rock'; } else if (randomNumber >= 1/3 && randomNumber < 2/3) { computerMove = 'Paper'; } else { computerMove = 'Scissors'; } return computerMove; }

Related: See More

Argon Design System

Questions / Comments: