Rock paper scissor is my fist JavaScript game. It took me 1 week to completed and uploaded. I hope to like it
Source Code
Download
Or
<!DOCTYPE html>
<html lang="en">
<head>
<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>Rock-Paper-Scissor</title>
<link rel="stylesheet" href="css/style.css">
<style>
#userPaper{
width: 100px;
height: 100px;
cursor: pointer;
background-color: white;
}
#userScissor{
width: 100px;
height: 100px;
cursor: pointer;
background-color: white;
}
#userRock{
width: 100px;
height: 100px;
cursor: pointer;
background-color: white;
}
#computerPaper{
width: 100px;
height: 100px;
}
#computerScissor{
width: 100px;
height: 100px;
}
#computerRock{
width: 100px;
height: 100px;
}
img{
margin-left: 25px;
background-color: white;
}
body{
background-color: cyan;
text-align: center;
}
#h2Computer{
font-size: 30px;
right: 50px;
}
#h2User{
font-size: 30px;
}
#group1{
display: inline-block;
}
#group2{
display: inline-block;
}
#space{
display: inline-block;
width: 5px;
height: 180px;
background-color: black;
margin-left: 35px;
}
#result{
font-size: 25px;
}
#computerScoreGroup{
margin-left: 10px;
}
#userScoreGroup{
margin-left: 10px;
}
#scoreGroup{
border-style: solid;
border-width: 5px;
width: 250px;
display: inline-block;
}
.paperBorder img {
transition: .5s ease;
}
.paperBorder img:hover{
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
.newGameButton {
width: 180px;
height: 60px;
cursor: pointer;
background: black;
border: 1px solid #91C9FF;
outline: none;
transition: 0.6s ease-in-out;
}
svg {
position: inherit;
left: 0;
top: 0;
fill: none;
stroke: #fff;
stroke-dasharray: 150 480;
stroke-dashoffset: 150;
transition: 1s ease-in-out;
}
.newGameButton:hover {
transition: 0.6s ease-in-out;
background: #4F95DA;
}
.newGameButton:hover svg {
stroke-dashoffset: -480;
}
.newGameButton span {
color: white;
font-size: 18px;
font-weight: 100;
}
.center {
width: 180px;
height: 60px;
position: absolute;
}
.btn {
width: 180px;
height: 60px;
cursor: pointer;
border: 1px solid #91C9FF;
outline: none;
transition: 1s ease-in-out;
color: #000000;
font-size: 20px;
}
svg {
position: absolute;
left: 0;
top: 0;
fill: none;
stroke: #fff;
stroke-dasharray: 150 480;
stroke-dashoffset: 150;
transition: 1s ease-in-out;
}
.btn:hover {
transition: 1s ease-in-out;
background: #4F95DA;
}
.btn:hover svg {
stroke-dashoffset: -480;
}
.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}
</style>
</head>
<body>
<div id="group1">
<h2 id="h2User">User</h2>
<div class="paperBorder">
<img onclick="userPaperFunction()" id="userPaper" src="https://spiridakis.eu/wp-content/uploads/2021/11/paper.png" alt="">
<img onclick="userRockFunction()" id="userRock" src="https://spiridakis.eu/wp-content/uploads/2021/11/rock.png" alt="">
<img onclick="userScissorFunction()" id="userScissor" src="https://spiridakis.eu/wp-content/uploads/2021/11/scissor.png" alt="">
</div>
</div>
<div id="space"></div>
<div id="group2">
<h2 id="h2Computer">Computer</h2>
<img id="computerPaper" src="https://spiridakis.eu/wp-content/uploads/2021/11/paper.png" alt="">
<img id="computerRock" src="https://spiridakis.eu/wp-content/uploads/2021/11/rock.png" alt="">
<img id="computerScissor" src="https://spiridakis.eu/wp-content/uploads/2021/11/scissor.png" alt="">
</div>
<br><br><br>
<h1 id="result" >Winner is: <span id="winner"></span></h1>
<br><br><br><br>
<div id="scoreGroup">
<h2 id="score">Score</h2>
<h3 id="userScoreGroup">User = <span id="userScore" ></span></h3>
<h3 id="computerScoreGroup">Computer = <span id="computerScore"></span></h3>
</div>
<br><br><br><br><br><br>
<h2 id="status"></h2>
<br><br><br><br><br><br><br><br><br>
<div class="container">
<div class="center">
<button onclick="newGame()" class="btn">
<svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<spa >Start new game</span>
</button>
</div>
</div>
<script>
let computerScore = document.getElementById('computerScore')
let userScore = document.getElementById('userScore')
let userPaper = document.getElementById('userPaper')
let userRock = document.getElementById('userRock')
let userScissor = document.getElementById('userScissor')
let winner = document.getElementById('winner')
let status = document.getElementById('status')
let computerCount = 1
let userCount = 1
const mergeUserComputer = userCount+computerCount
function checkWinner(){
console.log(computerCount)
console.log(userCount)
if(computerCount+userCount == 9){
document.getElementById('userPaper').style.pointerEvents = 'none';
document.getElementById('userRock').style.pointerEvents = 'none';
document.getElementById('userScissor').style.pointerEvents = 'none';
if(computerCount>userCount){
winner.innerHTML = 'Computer'
console.log('HI')
}
else if(computerCount<userCount){
winner.innerHTML = 'User'
}
}
}
function newGame(){
location.reload();
}
function userPaperFunction(){
document.getElementById('userPaper').style.pointerEvents = 'none';
document.getElementById('userRock').style.pointerEvents = 'none';
document.getElementById('userScissor').style.pointerEvents = 'none';
let scoreComputer = Math.floor(Math.random() * 3)
switch (scoreComputer){
case 0:
userPaper.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { status.innerHTML = 'Tie' }, 4501);
setTimeout(() => { status.innerHTML = ' ' }, 8000);
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 8000);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => {userPaper.style.backgroundColor = "white"}, 8000);
setTimeout(() => {checkWinner()}, 8001);
break
case 1:
userPaper.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 5000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 5001);
setTimeout(() => { status.innerHTML = 'User Win' }, 5001);
setTimeout(() => { status.innerHTML = ' ' }, 8000);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 8000);
setTimeout(() => {userScore.innerHTML = userCount++}, 7000);
setTimeout(() => {userPaper.style.backgroundColor = "white"}, 8000);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => {checkWinner()}, 8001);
break
case 2:
userPaper.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 5000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 5001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 5500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },5501);
setTimeout(() => { status.innerHTML = 'Computer Win' }, 5501);
setTimeout(() => { status.innerHTML = ' ' }, 8000);
setTimeout(() => { computerScissor.style.backgroundColor = "white" },8000);
setTimeout(() => {computerScore.innerHTML = computerCount++}, 7000);
setTimeout(() => {userPaper.style.backgroundColor = "white"}, 8000);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => {checkWinner()}, 8001);
break
}
}
function userRockFunction(){
document.getElementById('userPaper').style.pointerEvents = 'none';
document.getElementById('userRock').style.pointerEvents = 'none';
document.getElementById('userScissor').style.pointerEvents = 'none';
let scoreComputer = Math.floor(Math.random() * 3)
switch (scoreComputer){
case 0:
userRock.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { status.innerHTML = 'Computer Win' }, 4501);
setTimeout(() => { status.innerHTML = ' ' }, 8000);
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 8000);
setTimeout(() => {checkWinner()}, 8001);
setTimeout(() => {computerScore.innerHTML = computerCount++},7000);
setTimeout(() => {userRock.style.backgroundColor = "white"}, 8000);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
break
case 1:
userRock.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 5000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 5001);
setTimeout(() => { status.innerHTML = 'Tie' }, 5001);
setTimeout(() => { status.innerHTML = ' ' }, 8000);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 8000);
setTimeout(() => {checkWinner()}, 8001);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => {userRock.style.backgroundColor = "white"}, 8000);
break
case 2:
userRock.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 5000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 5001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 5500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },5501);
setTimeout(() => { status.innerHTML = 'User Win' }, 5501);
setTimeout(() => { status.innerHTML = ' ' }, 8000);
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 8000);
setTimeout(() => {checkWinner()}, 8001);
setTimeout(() => { userScore.innerHTML = userCount++},7000);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => {userRock.style.backgroundColor = "white"}, 8000);
break
}
}
function userScissorFunction(){
document.getElementById('userPaper').style.pointerEvents = 'none';
document.getElementById('userRock').style.pointerEvents = 'none';
document.getElementById('userScissor').style.pointerEvents = 'none';
let scoreComputer = Math.floor(Math.random() * 3)
switch (scoreComputer){
case 0:
userScissor.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { status.innerHTML = 'User Win' }, 4501);
//setTimeout(() => { //status.innerHTML = '' }, 8000);
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 8000);
setTimeout(() => {checkWinner()}, 8001);
setTimeout(() => {userScore.innerHTML = userCount++}, 7000);
setTimeout(() => {userScissor.style.backgroundColor = "white"}, 8000);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
break
case 1:
userScissor.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 5000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 5001);
setTimeout(() => { status.innerHTML = 'Computer Win' }, 5501);
setTimeout(() => { status.innerHTML = ' ' }, 8000);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 8000);
setTimeout(() => {computerScore.innerHTML = computerCount++}, 7000);
setTimeout(() => {userScissor.style.backgroundColor = "white"}, 8000);
setTimeout(() => {checkWinner()}, 8001);
setTimeout(() => {computerScore.innerHTML = computerCount++}, 7000);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
break
case 2:
userScissor.style.backgroundColor = "chartreuse"
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" }, );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 1000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },1001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 1500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },1501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 2000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 2001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 2500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },2501);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 3000);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },3001 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 3500);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 3501);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 4000);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },4001);
setTimeout(() => { computerScissor.style.backgroundColor = "white" }, 4500);
setTimeout(() => { computerPaper.style.backgroundColor = "chartreuse" },4501 );
setTimeout(() => { computerPaper.style.backgroundColor = "white" }, 5000);
setTimeout(() => { computerRock.style.backgroundColor = "chartreuse" }, 5001);
setTimeout(() => { computerRock.style.backgroundColor = "white" }, 5500);
setTimeout(() => { computerScissor.style.backgroundColor = "chartreuse" },5501);
setTimeout(() => { status.innerHTML = 'Tie' }, 5501);
setTimeout(() => { status.innerHTML = ' ' }, 8000);
setTimeout(() => { computerScissor.style.backgroundColor = "white" },8000);
setTimeout(() => {checkWinner()}, 8001);
setTimeout(() => { document.getElementById('userPaper').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userRock').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => { document.getElementById('userScissor').style.pointerEvents = 'auto'; }, 8000);
setTimeout(() => {userScissor.style.backgroundColor = "white"}, 8000);
break
}
}
</script>
</body>
</html>