samedi 13 mars 2021

Need to reload page after get 10 score poiint

I am making a simple game in JavaScript and I want to reload page after reach 10 points but in my case it's reloading infinitely. I am kinda new in JavaScript so I don't know how to fix this problem.

let click=0;
let gameScore=0;

function count(){
            click++;
            gameScore++;
        document.getElementById("mybutton").innerHTML = click;
        document.getElementById('score').innerHTML ="Score: " + gameScore;
}

            var div1=document.querySelector('div2');
            var div2 = div1.children[0];

        var d1=div1.getBoundingClientRect();
        var d2=div2.getBoundingClientRect();

                setInterval((d=[Math.floor(Math.random()*(d1.width-d2.width)),Math.floor(Math.random()*(d1.height-d2.height))])=>{
                        div2.style.transform = `translate(${d[0]}px, ${d[1]}px)`;
                            },1000);

                          if (gameScore => 10){ alert("YOU WON!");
                            document.location.reload()};
                            clearInterval(interval);
body{
    background: violet;
}

#Contianer{
    width: 1000px;
    height: 900px;
    background-color: darkred;
    position: relative;
}
#GameBelt{
    width: 1000px;
    height: 40px;
    background-color: black;
    color: #4b3535;
    position: relative;
    border: 3px solid black;
}
#Playground{
    width: 1000px;
    height:400px;
    background-color: rgb(15, 86, 167);
    position: absolute;
    border: 3px solid darkred;
}
#score{
    left: 20%;
    top: 50%;
    background: black;
    color: red;
    text-align: center;
    padding: 5px;
    outline:2px;
    border: 2px solid red;
    border-radius: 2px;
    height: 20px;
    width: 65px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  } 
button{
      height: 40px;
      width: 40px;
  }
#pasek{
  width:1000px;
  height:50px;
  background-color:darkgreen;
  position:relative;
}
#miejscegry{
  width:800px;
  height:600px;
  background-color:darkblue;
  position:absolute;
} 
<div id="Container">   
   <div id="GameBelt">
      <div id="score">Score:</div>
   </div>
   <div2 id="Playground">    
     <button onclick="count()" id="mybutton">0</button>
   </div>
</div>

Aucun commentaire:

Enregistrer un commentaire