Creating Ludo app in HTML || Cannot switch chance between user

92
March 29, 2021, at 04:40 AM

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>

READ ALSO
I can&#39;t use emoji.js

I can't use emoji.js

I'd like to use https://githubcom/iamcal/js-emoji to convert :emoji inside colons: into actual emoji, like how it is implemented in Discord and Slack

83
Getting the area/place bounds of a LatLng as polygons in Android Maps

Getting the area/place bounds of a LatLng as polygons in Android Maps

Simply I want to get the area which user clicks a latLng in a map and highlight it by getting polygons or anything like the image below, I searched but I didn't find any API provide thatany help?

95
VB.net Connection Failed database MySql

VB.net Connection Failed database MySql

I have problems when running software that has been developed using Visual Basic and mysql databaseThe connection runs perfectly on the codingan, but the problem is that the database connection is often lost when running the application at the time of data access,...

88
How to do performant insert if not exist in hibernate with postgres?

How to do performant insert if not exist in hibernate with postgres?

I'm currently designing an image tag systemThere's a n

125