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