Question

如何在简单的游戏中重置时间？

2021-01-07

54

javascript

我尝试制作简单的点击游戏（如果时间计数高于 5，游戏就结束了，但是如果你点击生成的元素，你可以重置时间）。

不幸的是，时间仍在计算。我该如何解决这个问题？

为什么我会收到此错误？

Uncaught TypeError: Cannot set property 'textContent' of null
    at js.js:8
    at js.js:49

(function() {
  const startGame = document.querySelector('button')

  let time = 0;
  let roll = true;
  let h2 = document.querySelector('h2')
  h2.textContent = time;

  const timeFlow = () => {
    time++
  }
  const resetTime = () => {
    time = 0;
    console.log(time)
  }

  const rollBall = () => {
    if (roll == true) {
      let divCreator = document.createElement('div')
      document.body.appendChild(divCreator)
      divCreator.classList.add('square')
      divCreator.style.backgroundColor = 'red'
      divCreator.style.top = Math.floor(Math.random() * 99) + '%'
      divCreator.style.left = Math.floor(Math.random() * 99) + '%'
      divCreator.addEventListener('click', letsPlay)
      divCreator.addEventListener('click', resetTime)
      setInterval(timeFlow, 1000)
    } else if (roll == false) {
      roll = true;
    }
  }

  const letsPlay = (e) => {
    let start = document.body.removeChild(e.target)
    roll = false;

    if (time >= 5) {
      alert('U lost')
    } else {
      rollBall()
    }
  }

  startGame.addEventListener('click', rollBall)
})();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button>Generate</button>
  <script src='js.js'></script>
  <h2>Time</h2>
</body>

</html>

Answer 1

在元素存在之前，您可以使用 load 事件而不是 IIFE。

另外，您的 div 需要尺寸

另外，我假设您想要 H2 中的时间？

此外，您需要绝对位置来移动 div

最后，我清除了新间隔之前的间隔

window.addEventListener("load", function() {
  const startGame = document.querySelector('button')
  const h2 = document.querySelector('h2')
  let tId;

  let time = 0;
  let roll = true;
  h2.textContent = time;


  const timeFlow = () => {
    time++
    h2.textContent = time;
  }
  const resetTime = () => {
    time = 0;
  }

  const rollBall = () => {
    if (roll == true) {
      let divCreator = document.createElement('div')
      document.body.appendChild(divCreator)
      divCreator.classList.add('square');
      divCreator.style.height = '50px'
      divCreator.style.width = '50px'
      divCreator.style.backgroundColor = 'red'
      divCreator.style.position = 'absolute'
      divCreator.style.top = Math.floor(Math.random() * 99) + '%'
      divCreator.style.left = Math.floor(Math.random() * 99) + '%'
      divCreator.addEventListener('click', letsPlay)
      divCreator.addEventListener('click', resetTime)
      clearInterval(tId); // remove any running interval
      tId = setInterval(timeFlow, 1000)
    }
    roll = !roll;

  }

  const letsPlay = (e) => {
    let start = document.body.removeChild(e.target)
    roll = false;

    if (time >= 5) {
      alert('U lost')
    } else {
      roll = true; // right?
      rollBall()
    }
  }

  startGame.addEventListener('click', rollBall)
})

body {
  height: 100%;
  background-color: yellow;
}

<button>Generate</button>
<h2>Time</h2>

Answer 2

您的 HTML 代码顺序错误：应该交换 <h2> 元素和 <script> 元素。

您应该像这样更改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link rel="stylesheet" href="style.css">
</head>
<body>
    <button>Generate</button>
    <h2>Time</h2>
    <script src='js.js'></script>
</body>
</html>