Question

我正在制作一个基于http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/教程的游戏，但是我想要创建一个函数来读取这两个项目是否仅在按下空格键时发生。

if (hero.x <= (monster.x + 32)
    && monster.x <= (hero.x + 32)
    && hero.y <= (monster.y + 32)
    && monster.y <= (hero.y + 32)) {
  ++monstersCaught;
  reset();
}

if (hero.x <= (tack.x + 32)
    && tack.x <= (hero.x + 32)
    && hero.y <= (tack.y + 32)
    && tack.y <= (hero.y + 32)) {
  monstersCaught -= monstersCaught;
  reset();
}

if (monstersCaught > 10) {
  monstersCaught -= 10;
}

我该如何修复

if (hero.x <= (tack.x + 32)
    && tack.x <= (hero.x + 32)
    && hero.y <= (tack.y + 32)
    && tack.y <= (hero.y + 32)) {
  monstersCaught -= monstersCaught;
  reset();
}

这样只有按空格键才会出现？

Answer 1

如果你使用jQuery，你可以做类似的事情：

$(window).keypress(function(e) {
    if (e.which === 32) {
        //do your logic here
    }
});

32是空格键的键码

或者只是javascript（在Document ready中运行此代码作为displayunicode（event））：

function displayunicode(e){
   var unicode=e.keyCode? e.keyCode : e.charCode;
   if(unicode == 32){
       //do your code
   }
}

Answer 2

最简单的方法是随时了解键盘的状态：为此，您必须听取键盘事件并更新包含每个键状态的数组。

这将导致类似：

window.keyStates = [];   // now you can use keyStates anywhere. 
                       // good enough since you seem to be in the first steps.

window.addEventListener('keydown',
          function(e) { keyStates[e.keyCode || e.key] = true;} );

window.addEventListener('keyup', 
          function(e) { keyStates[e.keyCode || e.key] = false;} );

完成后，您可以随时随地测试空格键的状态：

if (keyStates[32] == true) { ... }

为了便于阅读，您可能更愿意定义一个密钥对象，该密钥对象将包含您使用的几个密钥代码：

window.key = {
     space : 32,
     enter : 13,
     left  : 37,
     up    : 38,
     right : 39,
    down : 40
}

这样，你可以写：

if ( keyStates[key.space] == true ) {  
     ... 
}

更容易掌握。

（Rq：如果你搜索密钥代码，看这里就是一种方式：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent）

如何在JS中使用空格键和if语句？

2 个答案: