"Rock Paper Scissors Game"
Bootstrap 4.1.1 Snippet by mayurkarthik

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"> <body> <h1>Rock Paper Scissors</h1> <div class="Container"> <button onclick="playGame('rock')">Rock</button> <button onclick="playGame('paper')">Paper</button> <button onclick="playGame('scissors')">Scissors</button> </div> <p id="score-text"></p> <div class="Container"> <button onclick="resetScore()">Reset Score</button> </div> </body> </html>
body { font-family: 'Times New Roman', serif; background-color: rgb(51, 35, 50); } button { background-color: transparent; color: white; border: 2px solid white; border-radius: 14px; height: 50px; width: 75px; } hr { background-color: red; border: none; height: px; } h1 { color: white; margin-left: 770px; } #score-text { color: white; margin-left: 825px; } .Container { margin-left: 825px; }
// RPS Game Code Starts let score = JSON.parse(localStorage.getItem('score')) || { wins: 0, losses: 0, ties: 0 }; function getComputerMove() { let randomNumber = Math.random(); if (randomNumber < 1 / 3) { return 'rock'; } else if (randomNumber < 2 / 3) { return 'paper'; } else { return 'scissors'; } } function playGame(playerMove) { let computerMove = getComputerMove(); let result = ''; if (playerMove === computerMove) { result = 'Tie.'; score.ties++; } else if ( (playerMove === 'rock' && computerMove === 'scissors') || (playerMove === 'paper' && computerMove === 'rock') || (playerMove === 'scissors' && computerMove === 'paper') ) { result = 'You won.'; score.wins++; } else { result = 'You lose.'; score.losses++; } localStorage.setItem('score', JSON.stringify(score)); updateScore(); document.getElementById('score-text').innerText = `${result} You ${playerMove} - Computer ${computerMove} Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}`; } function updateScore() { document.getElementById('score-text').innerText = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}`; } function resetScore() { score.wins = 0; score.losses = 0; score.ties = 0; localStorage.setItem('score', JSON.stringify(score)); updateScore(); } // updateScore(); // RPS Game Ends

Related: See More

Paper Kit 2 PRO Angular

Questions / Comments: