使用带有JavaScript或Jquery的箭头键进行交互式和快速移动

时间:2013-07-04 14:57:53

标签: javascript jquery html5-canvas

我正在创建一个小游戏,我的对象用箭头键左右移动,但这种移动速度不快,甚至不是交互式的,就像我按下键对象后移动一样。 任何人都可以建议我如何在用户体验方面做得更好。

这是我控制移动物体的代码的一部分(它的两个玩家游戏所以箭头键为一个而A W D为秒)

$(document).keydown(function(e){

switch(e.keyCode){
    //Move left
    case 37:
    $('.playerOne').stop().animate({"left":"-=15px"}, '1000', 'linear');
    return false;
    break;
    //Move right
    case 39:
    $('.playerOne').stop().animate({"left":"+=15px"}, '1000', 'linear');
    return false;
    break;
    //Shoot
    case 38:
    shotEffect(1,'hitOne','bottom','playerOne');
    break;
    //Move right
    case 68:               
            $('.playerTwo').stop().animate({"left":"+=15px"}, '1000', 'linear');
    return false;
    break;
    //Move left
    case 65:
    $('.playerTwo').stop().animate({"left":"-=15px"}, '1000', 'linear');
    return false;
    break;
    //Shoot
    case 87:
    shotEffect(1,'hitTwo','top','playerTwo');
    break;
}

});

提前致谢

1 个答案:

答案 0 :(得分:2)

对键盘输入响应缓慢的一个原因是您正在侦听JavaScript keydown事件或类似的键盘事件。但是,重复的键盘事件会受到用户控制面板中设置的键盘初始重复延迟和重复率的影响。

例如,在具有默认设置的Windows系统上,初始键盘延迟设置得相当长 - 在半秒左右。因此,当按下该键时,您会立即得到一个初始keydown,但第一次重复keydown不会再发生一半。在初始延迟之后,keydown事件的频率取决于用户的重复率。

您需要做的是随时跟踪哪些键已关闭,然后在游戏循环中 - 大概使用requestAnimationFrame()setInterval() - 检查当前哪些键已关闭。这样,键盘重复定时不受用户设置的控制,而是受游戏循环速度的控制。

一种简单的方法是使用keydrown library。尝试该页面上的演示,看看它是否能满足您的需求。

此外,还有一个StackOverflow answer,其中讨论了该问题以及一些类似的代码。

在两者之间我推荐keydrown,因为它更全面开发,但是也值得一看SO答案。

当然,您的代码中也可能存在其他问题,但这绝对是一个问题。