在javascript游戏上添加暂停功能时遇到问题

I am trying to figure out how when the page loads the game is "paused" and the user has to hit enter to play and when the user does so the game starts.

我试图弄清楚当页面加载游戏时“暂停”并且用户必须按Enter键进行游戏以及当用户这样做时游戏开始。

Here are the current keystates to control the player when the game is active. I feel like I'm almost there (correct me if I'm wrong), but I just can't get what makes the canvas "pause" when the page is loaded and how to make it "play" when the enter button is pushed.

以下是当游戏处于活动状态时控制玩家的当前关键状态。我觉得我几乎就在那里(如果我错了,请纠正我),但是当页面加载时我无法得到使画布“暂停”的原因以及当输入按钮是如何让它“播放”时推。

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];
  });

1 个解决方案

#1

I have two ways,

我有两种方式,

One simple, but not so nice

一个简单,但不太好
One hard, can be nice

一个人很难,可以很好

The first ay is just alerting something with comfirm(text).

第一个是用确认(文本)警告某些东西。

Here is the code for that way :

这是这种方式的代码:

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>

The second way I havn't made but it is in each movements or timers add an if statment. Like this:

我没有做出的第二种方式,但它是在每个动作或定时器中添加一个if语句。像这样:

var pause = false;
setInerval(tick, 100);

function tick() {
  if (pause == false) {
     ....
  }
}

At the bginnning you should have a canvas which isn't visible which is the pause menu. Here gow you do the CSS for that:

在bginnning你应该有一个不可见的画布,这是暂停菜单。哇,你为此做了CSS:

#pause {
  display: none;
  ...
}

When you pause set pause to true, set your main canvas to document.getElementById("mainCanvas").style.display = "none" this will make the canvas dissapear but still with all it's drawings. Then show the pause canvas like this : document.getElementById("mainCanvas").style.display = "initial". The when "Continue" is clicked: set pause to false and to the contrary of this.

当你将暂停设置为true时,将主画布设置为document.getElementById(“mainCanvas”)。style.display =“none”这将使画布消失,但仍然包含所有图形。然后像这样显示暂停画布:document.getElementById(“mainCanvas”)。style.display =“initial”。单击“继续”时:将暂停设置为false,与此相反。

#1