获得10分后需要重新加载页面

Question

我正在用JavaScript制作一个简单的游戏，我想在达到10分后重新加载页面，但在我的情况下，它是无限重新加载的。我对JavaScript有点陌生，所以我不知道如何解决这个问题。

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>

Answer 1

所以我编辑了你的count函数来复制你的警报代码

我也知道你试图检查gameScore是否大于或等于10，但(gameScore) => 10就像一个回调，并且总是返回true。这就是为什么您在加载页面时会收到YOU WON的提醒。

location对象在window上，而不是在document上，因此对页面没有影响。

不太重要的编辑被注释到代码中。通过尝试游戏

let click = 0;
let gameScore = 0;
let interval;
// I want you to know div2 isn't a valid HTML tag, you could hvae just selected the lement by it's id
const div1 = document.getElementById("Playground");
const div2 = document.getElementById("mybutton"); // you used this same selector later in the count function
const d1 = div1.getBoundingClientRect();
const d2 = div2.getBoundingClientRect();
function count() {
click++;
gameScore++;
div2.innerHTML = click;
document.getElementById("score").innerHTML = "Score: " + gameScore;
// You need to check for the gameScore after every click inside this function
if (gameScore >= 10) {
alert("YOU WON!");
clearInterval(interval); // There's no real need to clear the interval since the page will still be reloaded
location.reload();
}
}
interval = 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);

body {
width: 100%;
height: 100%;
background: violet;
}
#Contianer {
width: 100%; /* I think the width and height are better to fit the screen rather than a random size for use experience*/
height: 100%;
background-color: darkred;
position: relative;
}
#GameBelt {
width: 100%;
height: 40px;
background-color: black;
color: #4b3535;
position: relative;
border: 3px solid black;
}
#Playground {
width: 100%;
height: calc(100% - 40px); /*From the height of the GameBelt*/
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;
transition: transform .5s ease; /* I added this transition for smooth movements */
}

<div id="Container">
<div id="GameBelt">
<div id="score">Score:</div>
</div>
<div id="Playground">
<button onclick="count()" id="mybutton">0</button>
</div>
</div>

Answer 2

您的javascript中有一些错误，所以我稍微清理了一下。试试这个(下面的更改和解释(：

let click = 0;
let gameScore = 0;
function count() {
click++;
gameScore++;
document.getElementById("mybutton").innerHTML = click;
document.getElementById('score').innerHTML = "Score: " + gameScore;
if (gameScore >= 10) {
alert("YOU WON!");
window.location.href = window.location.href;
clearInterval(interval);
}
}
var div1 = document.querySelector('div2');
var div2 = div1.children[0];
var d1 = div1.getBoundingClientRect();
var d2 = div2.getBoundingClientRect();
var interval = 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);

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>
<div id="Playground">
<button onclick="count()" id="mybutton">0</button>
</div>
</div>

您遇到的错误之一是if语句。首先，它需要是gameScore >= 10，而不是gameScore => 10。=>箭头通常表示一个函数，而不是大于或等于。接下来，if语句只执行一次。每次运行函数时都需要执行它，因此它需要在count函数的内部。

您的第二个错误是clearInterval。clearInterval函数需要一个输入间隔来清除它，而您刚刚声明了一个未定义的变量interval。我只是简单地定义了它，通过将var interval设置为您写的间隔：

var interval = 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);

最后，您的window.location.reload在代码笔中有点挑剔，所以我只是将其更改为window.location.href = window.location.href，它只是完全重新加载页面。