在javascript游戏中添加暂停函数时遇到问题

Having trouble adding a pause function on javascript game

本文关键字：函数 遇到 问题 暂停 添加 javascript 游戏      更新时间：2023-09-26

我正试图弄清楚当页面加载时，游戏是如何"暂停"的，用户必须点击回车才能玩，当用户这样做时，游戏开始。

以下是当前关键状态，用于在游戏激活时控制玩家。我觉得我差不多到了（如果我错了，请纠正我），但我就是不知道是什么让画布在加载页面时"暂停"，以及如何在按下回车按钮时"播放"。

keystate = {};
  document.addEventListener('enter', function(evt){
    keystate[evt.keyCode] = true;
  });
  document.addEventListener('keydown', function(evt){
    keystate[evt.keyCode] = true;
  });
  document.addEventListener('keyup', function(evt){
    delete keystate[evt.keyCode];
  });

我有两种方法，

  • 一个简单但不太好的

  • 一个硬，可以很好

第一天只是用comfirm(text)提醒一些事情。

这是这种方式的代码：

var gameBrightness = 10; 
function pause() {
    var pause = confirm("You paused the game, click 'OK' to continue your game and the other button to go to options"); 
      
    if (pause == false) { //Didn't click on OK
      var options = confirm("Click on 'Ok' to not change brigthness, but the other one to change the brightness to a random value");
      
      if (options == true) { //Clicked on OK
         ReDopause();
         return;
      }
      else { //Didn't click on OK
         brightness = Math.floor(Math.random() * 20);
         document.getElementById("brightness").innerHTML = brightness;
         ReDopause();
         return;
      }
    }
 }
 var ReDopause = function() {
    pause(); 
 }
<button onclick="pause()">Pause</button>
<span id="brightness">brigthness : 10</span>

我还没有做的第二种方法是在每个动作或计时器中添加一个if语句。像这样：

var pause = false;
setInerval(tick, 100);
function tick() {
  if (pause == false) {
     ....
  }
}

在bginning，你应该有一个不可见的画布，那就是暂停菜单。这里你做的CSS：

#pause {
  display: none;
  ...
}

暂停时，将pause设置为true，将主画布设置为document.getElementById("mainCanvas").style.display = "none"，这将使画布不可见，但仍包含其所有绘图。然后显示pause画布，如下所示：document.getElementById("mainCanvas").style.display = "initial"。单击"继续"时：将暂停设置为false，反之亦然。

相关文章：