"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="06-rock-paper-scissors.css"> </head> <body> <div class="all"> <p>Let's play Rock Paper Scissors</p> <button id="button1" onclick="playGame('Rock')">Rock</button> <button id="button2" onclick="playGame('Paper')">Paper</button> <button id="button3" onclick="playGame('Scissors')">Scissors</button> </div> <script> let win = 0; let loss = 0; let tie = 0; 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; } let result = ''; function playGame(playerMove) { let computerMove = pickComputerMove(); if (playerMove === computerMove) { result = 'Tie'; tie++; } else if ( (playerMove === 'Rock' && computerMove === 'Scissors') || (playerMove === 'Paper' && computerMove === 'Rock') || (playerMove === 'Scissors' && computerMove === 'Paper') ) { result = 'You win'; win++; } else { result = 'You lose'; loss++; } alert(`You picked ${playerMove}. Computer picked ${computerMove}. ${result}`); alert(`Total win : ${win}, Total loss : ${loss}, Total tie : ${tie}`); } </script> </body> </html>
#button1{ height: 100px; width: 100px; background-color:white; /* color: white; */ border-radius: 100%; border: 2px solid black; margin-left:80px; margin-top: 90px; background-image: url(https://images.unsplash.com/photo-1614032686163-bdc24c13d0b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cm9jayUyMHBhcGVyJTIwc2Npc3NvcnN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1000&q=60); background-size: cover; font-weight: 800; } p{ font-size: 90px; margin-left:70px; font-weight: 800; } #button2{ height: 100px; width: 100px; background-color:white; /* color: white; */ border-radius: 100%; border: 2px solid black; margin-left:80px; margin-top: 0px; background-image: url(https://images.unsplash.com/photo-1614032686158-b880f7e82c18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9jayUyMHBhcGVyJTIwc2Npc3NvcnN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60); background-size: cover; font-weight: 800; } #button3{ height: 100px; width: 100px; background-color:white; /* color: white; */ border-radius: 100%; border: 2px solid black; margin-left:80px; /* margin-top: 70px; */ background-image: url(https://images.unsplash.com/photo-1614032686099-e648d6dea9b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cm9jayUyMHBhcGVyJTIwc2Npc3NvcnN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60); background-size: cover; font-weight: 800; } .all{ height: 700px; width: 700px; background-color: pink; padding-top: 100px; background-image: url(https://images.unsplash.com/photo-1692609757762-57c17e4f2de3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=60); background-size: cover(); } #button1:hover, #button2:hover, #button3:hover { transform: scale(1.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: transform 0.2s, box-shadow 0.2s; animation: button-hover 0.5s ease-in-out infinite; } #button1:active { transform: scale(1.5); box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); animation: blast 0.5s ease-out, button-hover 0.5s ease-in-out infinite; } @keyframes button-hover { 0%, 100% { transform: scale(1); box-shadow: 0 0 0; } 50% { transform: scale(1.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } } @keyframes blast { 0% { transform: scale(1.5); opacity: 1; } 50% { transform: scale(3); opacity: 0.7; } 100% { transform: scale(10); opacity: 0; } }

Related: See More

Navbar With Icons

Questions / Comments: