Question

嘿，我正在开发一款小游戏，它计算您在30秒内点击图片的次数。我有2个独立的函数，一个函数为图像生成一个新位置并更新玩家得分，另一个函数从30秒开始倒数并更新“ Clicked”段落。

问题是我做一些研究似乎无法同时运行2个函数，而且我发现js只能运行一个线程，这怎么可能？

<html>
<head>
</head>
<body>
    <img id='ball' src="ball.png" alt="Logo"style="position: absolute; top: 450px; left: 900; width:70px;height:70px;" onclick="moveBall()">
    <p id="demo"></p>
    <p id="timer"></p>
    <p id="Clicks" style="font-family: Impact, Charcoal, sans-serif; font-size:150px; color:brown;">0</p>
    <script>
        function moveBall()
        {
            var ball = document.getElementById("ball");
            ball.style.left = Math.floor(Math.random() * 1500);
            ball.style.top = Math.floor(Math.random() * 900)
            document.getElementById('Clicks').innerHTML = parseInt(document.getElementById('Clicks').innerHTML) + 1;
            if(document.getElementById('Clicks').innerHTML == 20)
            {
                document.body.style.backgroundColor = "#68a2ff";
                document.getElementById('Clicks').style.color = '#ff688d';
            }
        }
        function sleep() 
        {
            var start = new Date().getTime();
            var finish = start + 20;
            while(finish - start != 0)
            {
                document.getElementById('timer').innerHTML = finish - start;
            }

        } 
    </script>
</body>
</html>

Answer 1

就像其他人所说的那样，请尝试setTimeout。我用30秒进行了测试，并且可以正常工作。它只会在30秒标记内更新分数。

编辑：尝试缩短计时器，这样您就不必等待30秒了。即3000，而不是30000。我没有实现显示计时器。

编辑：我添加了计时器。它并不完美，但足够接近。我将其设置为setInterval，时间更改为10秒。

<html>

<head>
</head>

<body>
  <img id='ball' src="ball.png" alt="Logo" style="position: absolute; top: 450px; left: 900; width:70px;height:70px;" onclick="moveBall()">
  <p id="demo"></p>
  <p id="timer"></p>
  <p id="Clicks" style="font-family: Impact, Charcoal, sans-serif; font-size:150px; color:brown;">0</p>
  <script>
    let isTimesUp = false;
    let isTimerStart = false;
    let timer = 10;
    let score = 0;

    setInterval(() => {
      if (timer >= 0) {
        document.getElementById('timer').innerHTML = timer--;
      } else {
        isTimesUp = true;
      }
    }, 1000);

    function moveBall() {
      var ball = document.getElementById("ball");
      ball.style.left = Math.floor(Math.random() * 1500);
      ball.style.top = Math.floor(Math.random() * 900);
      isTimerStart = true;
      if (!isTimesUp) {
        score++;
        document.getElementById('Clicks').innerHTML = score;
      }

      if (document.getElementById('Clicks').innerHTML == 20) {
        document.body.style.backgroundColor = "#68a2ff";
        document.getElementById('Clicks').style.color = '#ff688d';
      }
    }
  </script>
</body>

</html>

是否可以在javascript上运行2个线程？

1 个答案: