Question

我正在编写一个简单的战斗游戏，其中两个玩家选择他们的角色并进行战斗。战斗分为几个回合，每个回合都在新页面上开始，并且具有一个从99倒数到0的计时器。但是，我不知道如何使计时器保留新页面上一轮的时间。每次新的转弯开始时，计时器都会将自己重置为99。有什么办法可以解决这个问题？


<script>
      let timeLeft = 99;
      let elem = document.getElementById('timer');
      let timerId = setInterval(countdown, 1000);
      function countdown() {
          if (timeLeft == -1) {
              clearTimeout(timerId);
              doSomething();
          } else {
              elem.innerHTML = timeLeft;
              timeLeft--;
          }
        }
       function doSomething() {
          alert("Player x loses");
        }
</script>

Answer 1

只需设置一个小的会话变量，并在每个页面加载开始时使用if语句检查它。如果会话变量为空，则将其设置为所需的值，否则，请保留自脚本最后一次运行以来的前一个值，然后从该最后一个值开始。

<script>
var timeLeft;
if(!sessionStorage.getItem('timer'){
     timeLeft = 99;
} else {
     timeLeft = sessionStorage.getItem('timer');
}

      let elem = document.getElementById('timer');
      let timerId = setInterval(countdown, 1000);
      function countdown() {
          if (timeLeft == -1) {
              clearTimeout(timerId);
              doSomething();
          } else {
              elem.innerHTML = timeLeft;
              timeLeft--;
              sessionStorage.setItem('timer', timeLeft);
          }
        }
       function doSomething() {
          alert("Player x loses");
        }
</script>

Answer 2

出于安全原因，所有Internet浏览器都限制了页面必须保留或影响新页面上的更改的能力。否则，这意味着浏览器可以链接到新页面，然后从该新页面访问变量和其他状态（如用户名等）。

有一些解决方案，但所有解决方案都有些复杂。首先，您可以使用本地浏览器存储（看起来已经有人为此发布了一些代码，因此我将跳过示例）。这样一来，您就可以将前一个计时器上的计时时间存储到Cookie中，然后您的新页面可以加载该值并恢复计时器。

另一个例子是使用嵌入框架。因此，您无需在新标签页或窗口中打开新页面，而可以在父页面的iframe中打开该页面。使用iframe，您的子页面和父页面都可以访问全局Window对象，您可以在其中存储计时器和其他变量等信息。

但是，最好的方法是根本不创建新页面。而是重构您的游戏以在每个回合中加载相同的页面。使用类似于应用程序的组件（例如模态）来模拟新窗口的打开。有大量的组件可以完成此任务。

Answer 3

使用localStorage：

<script> 
let timeLeft = localStorage.getItem("timeLeft");
if(!timeLeft){
timeLeft=99;}
let elem = document.getElementById('timer'); 
let timerId = setInterval(countdown, 1000);
 function countdown() {
 if (timeLeft == -1) { 
clearTimeout(timerId); 
doSomething();
 } else { 
elem.innerHTML = timeLeft;
localStorage.setItem("timeLeft", timeLeft);
 timeLeft--; 
} } 
function doSomething() { 
alert("Player x loses"); 
} </script>

我使用localStorage来设置timeLeft的值，因为每当您重新加载页面时，timeLeft的值都会被重置。

重新加载页面后，尝试在localStorage中调用变量。

倒数计时器在新页面上重置

3 个答案: