密钥保持的Javascript移动

时间:2016-10-10 06:41:14

标签: javascript function canvas addeventlistener keydown

我需要有关画布游戏的移动功能的帮助。

以下是我所拥有的,当按下左/右键时,玩家只会改变方向。

通过按住左或右箭头键,玩家面对相应的方向是理想的,目前不会发生这种情况。

我不知道如何做到这一点,任何想法?

我现在有按下按键的移动方向,在下面更新,但是当页面首次加载时,播放器不会显示在屏幕上,而是在按下按键后显示。有些事情不对......



jQuery(document).on('change', '#radiobuttonID', function(){
    ReloadFunction();
});




3 个答案:

答案 0 :(得分:0)

您需要有一个全局事件侦听并跟踪按下然后将动作保存到某处。检查我在这里做了什么https://github.com/panvourtsis/HTML5-canvas-game---POKEMON-/blob/master/canvas.pokemon.js

同时检查此

    document.onkeydown = function(e) {
        e = e || window.event;

        if(e.keyCode == "37") console.log("left");
        else if(e.keyCode == "38") console.log("up");
        else if(e.keyCode == "39") console.log("right");
        else if(e.keyCode == "40") console.log("down");
    };

答案 1 :(得分:0)

你可以添加一个while循环:

while(left == true) {
//code to execute
}

我不确定这是否有效,但你可以尝试一下。

答案 2 :(得分:0)

折旧keyEvent.keyCode不使用。

请注意,keyEvent.keyCode已弃用,不应使用。您可以使用keyEvent.keykeyEvent.code,其中key是用户打算查看的内容(保留“A”的移位或大写,或“a”不支持)和code是关键位置,代码总是'KeyA',无论是否资本。

MDN keyboardevent了解详情

使用keyState对象

我发现在动画和游戏中使用键盘的最简单方法是拥有关键状态的对象。向下和向上添加相同的简单事件

document.addEventListener("keydown",keyhandler");
document.addEventListener("keyup",keyhandler");

创建关键状态对象

var keyState = {};

然后根据输入事件标记键

function keyHandler(e){  // simple but powerful
   keyState[e.code] = e.type === "keydown";
}

然后在主循环中,您只需要知道某个键是否已关闭

if(keyState.ArrowRight) { // right  is down }
if(keyState.LeftRight) { // left  is down }

详细状态

当你有一个正在运行的循环时,不要在IO事件中进行任何输入处理..

您可以获得更多信息。我通常有一个切换和状态改变

keyState = {
   down : {},   // True if key is down
   toggle : {},  // toggles on key up
   changed : {},  // True if key state changes. Does not set back false
                 // or you will lose a change
} 

function keyHandler(e){  // simple but powerful
   if(keyState.down[e.code] !== (e.type === "keydown")){
       keyState.changed = true;
   }
   keyState.down[e.code] = e.type === "keydown";
   if(e.type === "keyup"){
       keyState.toggle[e.code] = !keyState.toggle[e.code];
   }
}

现在,如果您想知道是否刚刚按下某个键

 if(keyState.down.LeftArrow && keyState.changed.LeftArrow){
      // key has been pushed down since last time we checked.
 }
 keyState.changed.LeftArrow = false; // Clear it  so we can detect next change