I made a rock paper Scissors game in html css and js and the game is working fine but there is a slight problem i added a feature that whichever side wins either the computer or the user there should be a shadow behind the winner tab and that too is working but the problem is that it is totally random even when i put that in a condition of when to toggle and it gives the shadow to wrong tab and sometimes to both tabs here is the code: HTML AND JS:-
<!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">
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow Condensed&family=Barlow Semi Condensed&display=swap" rel="stylesheet">
<title>Rock Paper Scisccor</title>
</head>
<body>
<div class="scoreboard">
<div class="name">
<ul>
<li id="rock"><strong> ROCK </strong> </li>
<li id="Paper"><strong> PAPER </strong> </li>
<li id="Scissors"><strong> SCISSORS </strong> </li>
</ul>
</div>
<div class="score">
<div id="score_name"><strong>SCORE</strong></div>
<div id="score_value"><strong>0</strong></div>
</div>
</div>
<div class="main-game">
<div id="inside_main">
<div class="items" id="rock_1" onclick="rock_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\1.svg" alt="">
</button>
</div>
<div class="items" id="paper_1" onclick="paper_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\2.svg" alt="">
</button>
</div>
<div class="items" id="scissors_1" onclick="scissors_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</button>
</div>
</div>
</div>
<div id="results">
<div class="content">
<div id="left_side">YOU PICKED</div>
<div id="left_content">
<div class="items_1" id="user" >
<div class="inside_color" >
<img id="user_img" src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</div>
</div>
</div>
</div>
<div class="play-again">
<div class="result" id="result_value"> YOU LOSE</div>
<button type="button" class="button-play" onclick="btn()">PLAY AGAIN</button>
</div>
<div class="content_1">
<div id="right_side">HOUSE PICKED</div>
<div id="right_content">
<div class="items_1" id="computer" >
<div class="inside_color">
<img id="computer_img" src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</div>
</div>
</div>
</div>
<div class="pics">
</div>
</div>
<script>
let score = 0
function condition(user_choice){
document.getElementById('inside_main').style.display='none'
document.getElementById('results').style.display='grid'
let res = 0
let computer_choice = Math.floor(Math.random() * 3) 1;
if(user_choice==1 && computer_choice==3){
console.log('you win')
score = score 1
res = 1
}
else if(user_choice==2 && computer_choice==1){
console.log('you win')
score = score 1
res = 1
}
else if(user_choice==3 && computer_choice==2){
console.log('you win')
score = score 1
res = 1
}
else if(user_choice==computer_choice){
console.log('draw')
score = score
res = -1
}
else{
console.log('you lose')
score = score-1
res = 0
}
document.getElementById('user_img').src='rock-paper-scissors-master/rock-paper-scissors-master/images/' user_choice '.svg'
document.getElementById('computer_img').src='rock-paper-scissors-master/rock-paper-scissors-master/images/' computer_choice '.svg'
document.getElementById('score_value').innerHTML=score
if (res==0){
document.getElementById('result_value').innerHTML='YOU LOSE'
document.getElementById('computer').classList.toggle("big_hover")
console.log(res)
}
else if(res == -1){
document.getElementById('result_value').innerHTML='DRAW'
console.log(res)
}
else{
document.getElementById('result_value').innerHTML='YOU WON'
document.getElementById('user').classList.toggle("big_hover")
console.log(res)
}
// let res = 0
}
function rock_2(){
let user_choice = 1
condition(user_choice)
}
function paper_2(){
let user_choice = 2
condition(user_choice)
}
function scissors_2(){
let user_choice = 3
condition(user_choice)
}
function btn(){
document.getElementById('inside_main').style.display='flex'
document.getElementById('results').style.display='none'
// let res = 0
}
</script>
</body>
</html>
CSS:-
body{
margin: 2px 2px;
/* font-family: 'Barlow', sans-serif; */
/* font-family: 'Barlow Condensed', sans-serif; */
font-family: 'Barlow Semi Condensed', sans-serif;
background-image: radial-gradient( hsl(214, 47%, 23%) , hsl(237, 49%, 15%));
background-repeat: no-repeat;
overflow: hidden;
height: 100vh;
}
.scoreboard{
width: 40%;
height: 10rem;
display: flex;
gap: 30%;
border: 2px solid grey;
margin: auto;
border-radius: 10px;
border-width: 3px;
margin-top: 3%;
}
.name{
color: white;
font-size: 2.7rem;
/* border: 2px solid white; */
margin: 15px;
width: 50%;
line-height: 2.4rem;
align-self: center;
}
.name ul{
list-style-type: none;
padding: 0px 0px;
margin: 0px ;
/* border: 2px solid yellow; */
}
.score{
display: flex;
/* align-self: center; */
flex-direction: column;
border: 2px solid white;
background-color: white;
border-radius: 5px;
/* padding: 7%; */
width: 40%;
/* height: 40vh; */
margin: 3%;
}
#score_name{
display: flex;
align-self: center;
padding: 5px;
color: hsl(229, 64%, 46%);
letter-spacing: .2rem;
}
#score_value{
color: hsl(229, 25%, 31%);
font-size: 4rem;
display: flex;
align-self: center;
}
.main-game{
margin-top: 4%;
}
/* .inside_main ::after{
content: '';
background: url("rock-paper-scissors-master/rock-paper-scissors-master/images/bg-triangle.svg");
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
} */
#inside_main{
display: flex;
/* border: 2px solid whitesmoke; */
width: fit-content;
margin: auto;
height: 60vh;
}
.items{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.items:hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 285px;
width: 285px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
.inside_color img{
display: grid;
align-self: center;
justify-self: center;
}
.inside_color{
display: grid;
justify-self: center;
align-self: center;
height: 182px;
width: 182px;
background-color: whitesmoke;
border-radius: 50%;
}
#rock_1{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
#paper_1{
background: linear-gradient(to bottom, hsl(230, 89%, 62%) , hsl(230, 89%, 65%));
position: relative;
top: 50%;
/* left: 25%; */
}
#scissors_1{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}
#results{
display: none;
/* border: 2px solid white; */
width: 50%;
grid-template-columns: 1fr 1fr 1fr;
justify-content: center;
margin: auto;
color: white;
font-size: 2rem;
}
.content{
display: grid;
grid-template-rows: repeat (2,auto );
row-gap: 20%;
justify-content: center;
/* padding: 40px; */
}
.content_1{
display: grid;
grid-template-rows: repeat (2,auto );
row-gap: 20%;
justify-content: center;
/* padding: 40px; */
}
.play-again{
display: grid;
grid-template-rows: 3fr 1fr;
row-gap: 10%;
justify-content: center;
}
#left_side{
display: flex;
justify-content: center;
}
#right_side{
display: flex;
justify-content: center;
}
#scissors_1{
border: 2px solid white;
}
.result{
/* border: 2px solid white; */
display: flex;
align-self: flex-end;
justify-content: center;
}
.button-play{
/* border: 2px solid white; */
border-radius: 6%;
width: 25vh;
height: 80%;
}
#user{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}
#computer{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
.items_1{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.big_hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 385px;
width: 385px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
CodePudding user response：
Donot use toggle , instead before result remove all shadow class from all tabs then add shadow class where win tab is.
CodePudding user response：
I think this is the change you need to have in your if-else structure:
if (res==0){
document.getElementById('result_value').innerHTML='YOU LOSE';
document.getElementById('user').classList.remove("big_hover")
document.getElementById('computer').classList.add("big_hover")
console.log(res)
}
else if(res == -1){
document.getElementById('result_value').innerHTML='DRAW'
document.getElementById('user').classList.remove("big_hover")
document.getElementById('computer').classList.remove("big_hover")
console.log(res)
}
else{
document.getElementById('result_value').innerHTML='YOU WON'
document.getElementById('user').classList.add("big_hover")
document.getElementById('computer').classList.remove("big_hover")
console.log(res)
}With the above code you can insure that the winner side gets shadow and other side looses shadow and on draw both side loose shadow.