获得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。 => 箭头通常为signifies a function，不大于或等于。接下来，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 在 codepen 中有点挑剔，所以我将其更改为 window.location.href = window.location.href，这只是完全重新加载页面。