Question

所以我正处于用html5创建我的第一个平台风格游戏的最初阶段。到目前为止，我只实现了左右移动，没有“重力”或碰撞检测正在发挥作用。

但是，我已经遇到了一个问题。

如果你在短时间内向左或向右移动，'角色'就像预期的那样（我使用的角色很松散，因为它实际上正在移动的地图）。但是，如果按住键，地图移动得太快。

我认为问题在于keydown事件监听器一直在监听，移动地图在游戏的每个滴答或帧之前移动。

所以我的问题是如何让keydown仅在游戏的每个刻度上增加地图偏移量（20毫秒）。

这是我的JSFiddle：CLICK HERE

document.addEventListener('keydown',function(event){
    var dir = event.which;

    if(dir == directions.LEFT){
        mapOffsetX += mapOffsetDistanceX;
        event.preventDefault();
    };

    if(dir == directions.RIGHT){
        mapOffsetX -= mapOffsetDistanceX;
        event.preventDefault();
    };
});

document.addEventListener('keyup',function(event){
    var dir = event.which;

    if(dir == directions.LEFT){
        mapOffsetX -= mapOffsetDistanceX;
    };

    if(dir == directions.RIGHT){
        mapOffsetX += mapOffsetDistanceX;
    };
});

initFloorObject(100,c.height/2,300,20,0,0,0,1);

var myInt = setInterval(function(){

clearScreen();

for(var i=0;i<floorObject.length;i++){
    floorObject[i][0] = parseInt(floorObject[i][0])+mapOffsetX;
};

drawChar();
drawFloorObjects();

},20);

Answer 1

每次false时将变量设置为keydown，并每20毫秒将其设置回true。

var isKeydownAvailable = true;
document.addEventListener('keydown', function (event) {
    var dir = event.which;
    if(isKeydownAvailable){
        if (dir == directions.LEFT) {
            mapOffsetX += mapOffsetDistanceX;
            event.preventDefault();
        };

        if (dir == directions.RIGHT) {
            mapOffsetX -= mapOffsetDistanceX;
            event.preventDefault();
        };
        isKeydownAvailable = false;
    };
});

在该时间间隔内，将isKeydownAvailable重置为true。

var myInt = setInterval(function () {

    clearScreen();

    for (var i = 0; i < floorObject.length; i++) {
        floorObject[i][0] = parseInt(floorObject[i][0]) + mapOffsetX;
    };

    drawChar();
    drawFloorObjects();
    isKeydownAvailable = true;

}, 20);

Answer 2

使用布尔值进行操作并在间隔内检查它们在keydown上，您将布尔值isMovingLeft设置为true，然后在间隔函数if(isMovingLeft)中添加偏移量。为其他行动做这件事，你很高兴。

Keydown产生了意想不到的结果。 HTML5游戏

2 个答案: