This Rock Paper Scissor Game Build Using HTML CSS and Javascript .Click Here to View the live website
Click Here to view the original source code at github
Below is the Source Code of Above game
<!--------------------------------- HTML CODE ------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rockpaperscissor</title>
</head>
<body>
<div class="container">
<button class="game" value="Rock">✊</button>
<button class="game" value="Paper">✋</button>
<button class="game" value="Scissors">✌</button>
<div class="showresult">
<p id="player-score"></p>
<p id="hands"></p>
<p id="result"></p>
</div>
<button class="reset games" id="endGameButton">🔴</button>
</div>
<script src="javascr.js"></script>
<footer>Made By Vaibhav Yadav with ❤❤</footer>
</body>
</html>
// Javascript Code
const totalscore = { computerScore: 0, playerScore: 0}
function getcomputerchoice() {
const rpschoice = ['Rock','Paper','Scissors']
const randomnumber = Math.floor( Math.random()*3 )
return rpschoice[randomnumber]
}
function getResult(playerChoice, computerChoice) {
let score;
if( playerChoice == computerChoice){
score = 0
totalscore['computerScore']+= 0
}
else if ( playerChoice == 'Rock' && computerChoice == 'Scissors'){
score = 1
}
else if ( playerChoice == 'Paper' && computerChoice == 'Rock'){
score = 1
} else if ( playerChoice == 'Scissors' && computerChoice == 'Paper'){
score = 1
}
else{
score = -1
totalscore['computerScore']+= 1
}
return score
}
function showresult(score,playerChoice,computerChoice)
{
const resultdiv = document.getElementById('result')
const handdiv = document.getElementById('hands')
const playerscorediv = document.getElementById('player-score')
if(score == -1 ) {
resultdiv.innerText = "You Lose"
}
else if(score == 0 ){
resultdiv.innerText = "It's a tie"
}
else{
resultdiv.innerText = "You Win"
}
handdiv.innerText = "Computer Choice is: " + computerChoice
playerscorediv.innerText = "Your Score is : " + totalscore["playerScore"] + " Computer Score is : " +totalscore["computerScore"]
}
function onClickgames(playerChoice){
// console.log({playerChoice})
const computerChoice = getcomputerchoice()
// console.log({computerChoice})
const score = getResult(playerChoice, computerChoice)
totalscore['playerScore'] += score
// console.log({score})
// console.log(totalscore)
showresult(score,playerChoice,computerChoice)
}
function playGame(){
const games = document.querySelectorAll('.game')
// games[0].onclick = () => alert(games[0].value)
games.forEach(game => {
game.onclick = () => onClickgames(game.value)
})
}
const endgamebutton = document.getElementById("endGameButton")
endgamebutton.onclick = () =>endgame(totalscore)
function endgame(totalscore)
{
totalscore['playerScore'] = 0
totalscore['computerScore'] = 0
const resultdiv = document.getElementById('result')
const handdiv = document.getElementById('hands')
const playerscorediv = document.getElementById('player-score')
resultdiv.innerText = ''
handdiv.innerText = ''
playerscorediv.innerText = ''
}
playGame()
/* CSS CODE */
body{
background-color: black;
margin: 0;
padding: 0;
font-weight: bolder;
font-family: sans-serif;
}
.container{
border-radius: 4%;
box-shadow: 10px 10px 50px black;
padding: 2vh;
width: 80vh;
text-align: center;
background-color: steelblue;
margin: 20vh auto;
}
.container button{
background-color: transparent;
border: none;
margin: 3vh;
}
.game {
box-shadow: 5px 5px 9px black;
border-radius: 9%;
/* background-color: red; */
font-size: 70px;
cursor: pointer;
}
.reset{
font-size: 50px;
margin: 9vh 0 0 31vh;
width: 20vh;
}
/* .container span:hover {
transform: rotate(-40deg);
} */
.showresult{
padding: 2px;
border-radius: 9px;
box-shadow: 5px 5px 13px black;
}
.showresultnone{
height: 0;
display: none;
}
.games{
box-shadow: 5px 5px 9px black;
border-radius: 9%;
/* background-color: red; */
font-size: 70px;
cursor: pointer;
}
button:active{
transform: translate(2px, 2px);
}
footer{
text-align: center;
background-color: wheat;
}
.png)
.png)