.png)
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)