6

好吧，当你按住键盘上的一个键时，第一次开火后会有 1 秒的延迟。
您可以继续打开记事本并按住一个键（例如“x”），您会在第一次火灾后看到有延迟。

但是，我正在尝试使用 JavaScript 在 HTML5 Canvas 中开发游戏，并且 1 秒的延迟非常烦人，此外，它还会停止玩家行走动画。

那么我怎样才能删除 JavaScript 中令人讨厌的延迟（没有 jQuery！）？

我的 keydown 事件以这种模式工作 -

document.onkeydown = getKey;
function getKey(e) {
    switch(e.keyCode) {
        case 38: // UP
            Player.PositionY--;
        break;
        case 39: // RIGHT
            Player.PositionX++;
        break;
        case 40: // DOWN
            Player.PositionY++;
        break;
        case 37: // LEFT
            Player.PositionX--;
        break;
    }
}
4

3 回答 3

5

你可以开始一个事件keydown并停止它keyup

$('#mycanvas').on('keydown', function() { 
   $(document).trigger('start'); 
}); 

$('#mycanvas').on('keyup', function() { 
   $(document).trigger('stop'); 
});

$(document).on('start', startAnimation);
$(document).on('stop', stopAnimation);

function startAnimation(e) { //start something }
function stopAnimation(e) { //stop something }
于 2013-01-21T23:24:59.760 回答
1

相反，在第一次按下键时监听，然后在释放时监听。这也意味着您必须在某处记录当前的移动速度状态，以便您可以在这些事件之间应用它。

这个例子只服务于向前走，应该很容易扩展到其他方向。

var playerSpeed = 0;

document.onkeydown = keyDown;
document.onkeyup = keyUp;

function keyDown(e) {
    switch(e.keyCode) {
        case 38: // UP
            playerSpeed = 1; // moving!
            break;
        // other cases...
    }
}

function keyUp(e) {
    switch(e.keyCode) {
        case 38: // UP
            playerSpeed = 0; // NOT moving!
            break;
        // other cases...
    }
}

// Whatever loop is called for each frame or game tick
function updateLoop() {
  // rendering, updating, whatever, per frame
  Player.PositionY += playerSpeed;
}

这样，键盘的重复率是多少都没有关系。每一个onkeydown，总会最终拥有一个onkeyup。您所要做的就是在这些事件之间以不同的方式更新事物。

于 2013-01-21T23:41:51.430 回答
1

你很幸运，我只是为游戏编写代码。

Controller = {
    keyIsDown: [],

    // Add a new control. up is optional.
    // It avoids key repetitions
    add: function (key, down, up) {
        $(document).keydown(function(e) {
            if(e.keyCode === key && !Controller.keyIsDown[key]) {
                    down()
                Controller.keyIsDown[key] = true
                return false
            }
        })

        $(document).keyup(function(e) {
            if(e.keyCode === key) {
                if(up) up()
                Controller.keyIsDown[key] = false
                return false
            }
        })
    },
}

例子：

Controller.add(65,
    function () {
        console.log("A is down")
    },
    // This argument is optional
    function () {
        console.log("A is up")
})
于 2013-01-22T01:16:04.370 回答