I am facing an issue with the js code given in the dropbox source link below (https://www.dropbox.com/s/dc6jb2aka8ffqr9/game.js). When the user has just one crown out in the open and its almost at the finish line, if the user gets a higher number than required then ideally the chance should switch between the users but that is not happening.
HTML code is given below.
body{
margin:0px;
font-family: Serif;
color:rgba(255,255,255,255);
font-weight:bold;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
background-color: black;
background-size: 56.57px 56.57px;
}
.mainframe{
display: flex;
height:100vh;
justify-content: center;
align-items: center;
}
.welcome{
background-color:rgba(0,0,0,0.7);
z-index:+99;
width:100vw;
height:100vh;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.welcome .setting{
width:300px;
background-color: white;
text-align: center;
padding-top:20px;
border-radius: 10px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7),inset 0px 0px 10px rgba(0,0,0,0.4);
border:0.5px solid rgba(0,0,0,0.2);
}
.setting .name{
padding-bottom: 12px;
}
.setting .footer{
font-size: 12px;
color: #00e34c;
font-weight: bold;
font-family:serif;
padding: 6px 0px;
color:rgba(0,0,0,0.9);
}
.welcome .setting .name input{
border-radius: 5px;
padding:5px;
outline:none;
width:80%;
margin:10px 0px;
}
.play{
outline: none;
border:0.5px solid black;
font-size: 18px;
padding:5px 15px;
border-radius: 5px;
background-color: rgba(0,0,0,0);
cursor:pointer;
}
.play:hover{
background-color: rgba(0,0,0,0.2);
}
.ri{
background-color:rgba(247, 22, 45,0.6);
border:0.5px solid rgba(0,0,0,0.2);
box-shadow: 0px 0px 4px rgba(247, 22, 45,0.9),inset 0px 0px 10px rgba(247, 22, 45,0.7);
}
.gi{
background-color:rgba(0, 227, 76,0.6);
border:0.5px solid rgba(0,0,0,0.2);
box-shadow: 0px 0px 4px rgba(0, 227, 76,0.9),inset 0px 0px 10px rgba(0, 227, 76,0.7);
}
.yi{
background-color:rgba(247, 187, 5,0.6);
border:0.5px solid rgba(0,0,0,0.2);
box-shadow: 0px 0px 4px rgba(247, 187, 5,0.9),inset 0px 0px 10px rgba(247, 187, 5,0.7);
}
.bi{
background-color:rgba(4, 195, 201, 0.6);
border:0.5px solid rgba(0,0,0,0.2);
box-shadow: 0px 0px 4px rgba(4, 195, 201,0.9),inset 0px 0px 10px rgba(4, 195, 201,0.7);
}
input::placeholder{
color:rgba(0,0,0,0.8);
}
.note{
font-size: 11px;
padding: 5px 4px;
}
.welcome .setting .logo img{
width:20%;
}
.ludoboard{
background-color: white;
border:0.5px solid black;
width:600px;
height:600px;
display: grid;
grid-template-columns: repeat(15,40px);
grid-template-rows: repeat(15,40px);
}
.playername{
font-size:20px;
}
.diceboard{
margin:5px;
display: flex;
flex-direction: column;
height:600px;
justify-content: space-between;
}
.mdiceboard{
display: none;
}
.diceboard .info{
display: flex;
flex-direction: column;
align-items: center;
}
.centerbox{
grid-column: 7/10;
grid-row: 7/10;
width:0px;
height:0px;
border-top:60px solid #00e34c;
border-bottom:60px solid #04c3c9 ;
border-left:60px solid #f7162d;
border-right:60px solid #f7bb05 ;
}
.red{
display: flex;
justify-content: center;
align-items: center;
background-color: #f7162d;
border:0.5px solid #9e0616;
grid-column: 1/7;
grid-row: 1/7;
}
.redsafe{
background-color: #f7162d;
border:0.5px solid #9e0616;
}
.playerzone{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
overflow:hidden;
}
.crown{
grid-column: 1/3;
}
.player{
display: flex;
justify-content: center;
align-items: center;
border-radius:50%;
background-color: white;
opacity:0.9;
width:50px;
height:50px;
}
.green{
display: flex;
justify-content: center;
align-items: center;
background-color:#00e34c ;
border:0.5px solid #039634;
grid-column: 10/16;
grid-row: 1/7;
}
.greensafe{
background-color:#00e34c ;
border:0.5px solid #039634;
}
.step{
border:0.5px solid #b3b3b3;
}
.blue{
display: flex;
justify-content: center;
align-items: center;
background-color:#04c3c9 ;
border:0.5px solid #027478;
grid-column: 1/7;
grid-row: 10/16;
}
.bluesafe{
background-color:#04c3c9 ;
border:0.5px solid #027478;
}
.yellow{
display: flex;
justify-content: center;
align-items: center;
background-color:#f7bb05;
border:0.5px solid #9c7605;
grid-column: 10/16;
grid-row: 10/16;
}
.yellowsafe{
background-color:#f7bb05 ;
border:0.5px solid #9c7605;
}
.astep{
display: flex;
justify-content: center;
align-items: center;
overflow:hidden;
position: relative;
}
.rp{
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.astep span:nth-child(1){
top:0px;
}
.astep span:nth-child(2){
top:4px;
}
.astep span:nth-child(3){
top:8px;
}
.astep span:nth-child(4){
top:12px;
}
.astep span:nth-child(5){
top:16px;
}
.astep span:nth-child(6){
top:20px;
}
.astep span:only-child{
top:auto;
}
/*
.astep::-webkit-scrollbar {
width:0px;
}
*/
.rp{
position: absolute;
display: inline-block;
cursor: pointer;
background-color: white;
border-radius:50%;
}
.rp:hover{
border-radius: 50%;
border:0.5px solid red;
}
.r{
color:#f7162d;
}
.g{
color:#00e34c;
}
.b{
color:#04c3c9;
}
.y{
color:#f7bb05;
}
.material-icons{
opacity:0.9;
font-size: 30px;
}
.rstop{
background-image: linear-gradient(45deg, #f7162d 25%, #ffbdc4 25%, #ffbdc4 50%, #f7162d 50%, #f7162d 75%, #ffbdc4 75%, #ffbdc4 100%);
background-size: 15px 10px;
}
.gstop{
background-image: linear-gradient(45deg, #00e34c 25%, #b0ffcc 25%, #b0ffcc 50%, #00e34c 50%, #00e34c 75%, #b0ffcc 75%, #b0ffcc 100%);
background-size: 15px 10px;
}
.ystop{
background-image: linear-gradient(45deg, #f7bb05 25%, #fff2c7 25%, #fff2c7 50%, #f7bb05 50%, #f7bb05 75%, #fff2c7 75%, #fff2c7 100%);
background-size: 15px 10px;
}
.bstop{
background-image: linear-gradient(45deg, #04c3c9 25%, #bdfdff 25%, #bdfdff 50%, #04c3c9 50%, #04c3c9 75%, #bdfdff 75%, #bdfdff 100%);
background-size: 15px 10px;
}
.winner-r{
width:100%;
height: 100px;
background-image: url(crown.png);
}
@media only screen and (max-width: 600px) {
.fixed{
position: fixed;
}
.mainframe{
flex-direction: column;
}
.diceboard{
display: none;
}
.mdiceboard{
display: flex;
flex-direction: row;
width: 100vw;
justify-content: space-between;
margin:10px 0px;
}
.mdiceboard .info{
display: flex;
flex-direction: column;
align-items: center;
}
/*
.r-dice,.g-dice,b-dice,{
display: none;
}
*/
.ludoboard{
background-color: white;
border:0.5px solid black;
width:100vw;
height:100vw;
display: grid;
grid-template-columns: repeat(15,1fr);
grid-template-rows: repeat(15,1fr);
}
.centerbox{
height: 100%;
width: 100%;
grid-column: 7/10;
grid-row: 7/10;
/* background-color: aqua;*/
background-image: url(center.jpg);
background-size: cover;
border:0px solid red;
}
.playerzone{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
overflow:hidden;
}
.crown{
grid-column: 1/3;
width:90%;
align-self: center;
align-items: center;
}
.player{
display: flex;
justify-content: center;
align-items: center;
border-radius:50%;
background-color: white;
opacity:0.9;
width:1fr;
height:1fr;
}
}
.r-dice{
background-color:#f7162d;
width:50px;
height:50px;
border-radius:5px;
box-sizing: border-box;
border:0.5px solid black;
box-shadow: inset 0px 0px 8px black;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:30px;
text-shadow:0px 0px 1px black;
cursor:pointer;
}
.g-dice{
background-color:#00e34c;
width:50px;
height:50px;
border-radius:5px;
box-sizing: border-box;
border:0.5px solid black;
box-shadow: inset 0px 0px 8px black;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:30px;
text-shadow:0px 0px 1px black;
cursor:pointer;
}
.b-dice{
background-color:#04c3c9;
width:50px;
height:50px;
border-radius:5px;
box-sizing: border-box;
border:0.5px solid black;
box-shadow: inset 0px 0px 8px black;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:30px;
text-shadow:0px 0px 1px black;
cursor:pointer;
}
.y-dice{
background-color:#f7bb05;
width:50px;
height:50px;
border-radius:5px;
box-sizing: border-box;
border:0.5px solid black;
box-shadow: inset 0px 0px 8px black;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:30px;
text-shadow:0px 0px 1px black;
cursor:pointer;
}<script src="https://www.dropbox.com/s/dc6jb2aka8ffqr9/game.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Ludo Board Game v1.0</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="icon" href="icon.png" type="image/png"/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<audio id="diceSound">
<source src="dice.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="killedSound">
<source src="killed.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="winSound">
<source src="win.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="inoutSound">
<source src="inout.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="stepSound">
<source src="step.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="fixed">
<!-- <div class="welcome">
<div class="setting">
<div class="logo">
<img src="icon.png" class="logo">
</div>
<div class="name">
<input type="text" class="ri" placeholder="Red player name...">
<input type="text" class="gi" placeholder="Green player name...">
<input type="text" class="yi" placeholder="Yellow player name...">
<input type="text" class="bi" placeholder="Blue player name..."><br>
<button class="play">Play</button><br>
<span class="note">if only two players playing enter only two names</span>
</div>
<div class="footer">
Made by Akky Srivastava Akash with ❤
</div>
</div>
</div> -->
<div class="mainframe">
<div class="diceboard">
<div class="info">
<span class="playername">
Player 1
</span>
<div class="r-dice" onclick="dice(this,0)">
0
</div>
</div>
<div class="info">
<div class="b-dice" onclick="dice(this,3)">
0
</div>
<span class="playername">
Player 4
</span>
</div>
</div>
<div class="mdiceboard">
<div class="info">
<span class="mplayername">
Player 1
</span>
<div class="r-dice" onclick="dice(this,0)">
0
</div>
</div>
<div class="info">
<span class="mplayername">
Player 2
</span>
<div class="g-dice" onclick="dice(this,1)">
0
</div>
</div>
</div>
<div class="ludoboard">
<div class="red">
<div class="playerzone">
<div class="player"><span onclick="movered(this,0)" class="rp r material-icons">stars</span></div>
<div class="player"><span onclick="movered(this,1)" class="rp r material-icons">stars</span></div>
<div class="player"><span onclick="movered(this,2)" class="rp r material-icons">stars</span></div>
<div class="player"><span onclick="movered(this,3)" class="rp r material-icons">stars</span></div>
</div>
</div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="green">
<div class="playerzone">
<div class="player"><span onclick="movegreen(this,0)" class="rp g material-icons">stars</span></div>
<div class="player"><span onclick="movegreen(this,1)" class="rp g material-icons">stars</span></div>
<div class="player"><span onclick="movegreen(this,2)" class="rp g material-icons">stars</span></div>
<div class="player"><span onclick="movegreen(this,3)" class="rp g material-icons">stars</span></div>
</div>
</div>
<div class="astep step"></div>
<div class="astep greensafe"></div>
<div class="astep gstop"></div>
<div class="astep step rstop"></div>
<div class="astep greensafe"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep greensafe"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep greensafe"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep greensafe"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep rstop"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="centerbox"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step gstop"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep redsafe"></div>
<div class="astep redsafe"></div>
<div class="astep redsafe"></div>
<div class="astep redsafe"></div>
<div class="astep redsafe"></div>
<div class="astep yellowsafe"></div>
<div class="astep yellowsafe"></div>
<div class="astep yellowsafe"></div>
<div class="astep yellowsafe"></div>
<div class="astep yellowsafe"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step bstop"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep ystop"></div>
<div class="astep step"></div>
<div class="blue">
<div class="playerzone">
<div class="player"><span onclick="moveblue(this,0)" class="rp b b material-icons">stars</span></div>
<div class="player"><span onclick="moveblue(this,1)" class="rp b b material-icons">stars</span></div>
<div class="player"><span onclick="moveblue(this,2)" class="rp b b material-icons">stars</span></div>
<div class="player"><span onclick="moveblue(this,3)" class="rp b b material-icons">stars</span></div>
</div>
</div>
<div class="astep step"></div>
<div class="astep bluesafe"></div>
<div class="astep step"></div>
<div class="yellow">
<div class="playerzone">
<div class="player"><span onclick="moveyellow(this,0)" class="rp y material-icons">stars</span></div>
<div class="player"><span onclick="moveyellow(this,1)" class="rp y material-icons">stars</span></div>
<div class="player"><span onclick="moveyellow(this,2)" class="rp y material-icons">stars</span></div>
<div class="player"><span onclick="moveyellow(this,3)" class="rp y material-icons">stars</span></div>
</div>
</div>
<div class="astep step"></div>
<div class="astep bluesafe"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep bluesafe"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep bluesafe"></div>
<div class="astep step ystop"></div>
<div class="astep bstop"></div>
<div class="astep bluesafe"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
<div class="astep step"></div>
</div>
<div class="diceboard">
<div class="info">
<span class="playername">
Player 2
</span>
<div class="g-dice" onclick="dice(this,1)">
0
</div>
</div>
<div class="info">
<div class="y-dice" onclick="dice(this,2)">
0
</div>
<span class="playername">
Player 3
</span>
</div>
</div>
<div class="mdiceboard">
<div class="info">
<div class="b-dice" onclick="dice(this,3)">
0
</div>
<span class="mplayername">
Player 4
</span>
</div>
<div class="info">
<div class="y-dice" onclick="dice(this,2)">
0
</div>
<span class="mplayername">
Player 3
</span>
</div>
</div>
</div>
<script src="game.js"></script>
</div>
</body>
</html>