Jquery 使用$（）.keydown平滑平铺游戏角色移动

我想在我的平铺游戏中实现角色移动，这样它就不会向服务器发送带有关键事件的垃圾邮件。目前，我已经使用setInterval限制了发送的事件量

我的想法有问题：

如果玩家没有在正确的时间点按某个键，则该动作可能不起作用

连续按一个键（例如右箭头），仅在setInterval拾取事件时发送键事件。这使它看起来像马车

我的代码有很多优点：

如果你所做的一切都是握着钥匙，那么它工作得非常完美

一次按住两个键可以沿对角线移动。该代码存储正在按下的键

可能有帮助的事情：

在关键事件上，不使用节流阀，而使用去盎司可以很好地工作。我只是不想让那些滥发钥匙的玩家通过按住钥匙来加快移动速度。（我在去盎司代码方面没有太大成功）

下面是我的代码的一个简单的基本示例：

---

我怎样才能让这个游戏的互动更加流畅，让用户更愉快，同时又能抑制垃圾邮件？

感谢John S的原始修复。我对代码做了一些修改，使它变得更好。当前，如果用户同时按住左右键，则玩家不会移动。这是一个比根据按键顺序处理键优先级更简单的解决方案。我还这样做，当按住和按住处于活动状态时，不能更改上/下计数等。左右运动也一样

简化的jsfiddle，具有简单的基础知识

使用此代码实现的产品游戏+反垃圾邮件/欺诈检测

JSFIDLE代码，根据SO的要求：

var canvas = document.getElementById('c'),
    ctx = canvas.getContext("2d"),
    tileSize = 10;
var holdingUp = false;
var holdingDown = false;
var holdingLeft = false;
var holdingRight = false;
var cx = 150;
var cy = 150;

var upCount = 0;
var downCount = 0;
var leftCount = 0;
var rightCount = 0;

$(document).keydown(function(e) {
    if(e.which==37 && !holdingLeft) { holdingLeft = true; leftCount++; }
    if(e.which==38 && !holdingUp) { holdingUp = true; upCount++; }
    if(e.which==39 && !holdingRight) { holdingRight = true; rightCount++; }
    if(e.which==40 && !holdingDown) { holdingDown = true; downCount++;  }
});
$(document).keyup(function(e) {
    if(e.which==37) { holdingLeft = false; }
    if(e.which==38) { holdingUp = false; }
    if(e.which==39) { holdingRight = false; }
    if(e.which==40) { holdingDown = false; }
});

ctx.fillRect(150, 150, tileSize, tileSize);
setInterval(function() {
    if(!(holdingUp && holdingDown)) {
        if((upCount > 0) || holdingUp) {
            if (upCount > 0) { upCount--; }
            cls();
            ctx.fillRect(cx, cy - tileSize, tileSize, tileSize);
            cy -= tileSize;
        } else if((downCount > 0) || holdingDown) { 
            if (downCount > 0) { downCount--; }
            cls();
            ctx.fillRect(cx, cy + tileSize, tileSize, tileSize);
            cy += tileSize;
        }
    } else {
        downCount = upCount = 0;
    }
    if(!(holdingLeft && holdingRight)) {
        if((leftCount > 0) || holdingLeft) {
            if (leftCount > 0) { leftCount--; }
            cls();
            ctx.fillRect(cx - tileSize, cy, tileSize, tileSize); 
            cx -= tileSize;
        } else if((rightCount > 0) || holdingRight) {
            if (rightCount > 0) { rightCount--; }
            cls();
            ctx.fillRect(cx + tileSize, cy, tileSize, tileSize);
            cx += tileSize;
        }
    } else {
        leftCount = rightCount = 0;
    }
}, 120);

function cls() { ctx.clearRect(0, 0, canvas.width, canvas.height); }

---

感谢John S的原始修复。我对代码做了一些修改，使它变得更好。当前，如果用户同时按住左右键，则玩家不会移动。这是一个比根据按键顺序处理键优先级更简单的解决方案。我还这样做，当按住和按住处于活动状态时，不能更改上/下计数等。左右运动也一样

简化的jsfiddle，具有简单的基础知识

使用此代码实现的产品游戏+反垃圾邮件/欺诈检测

JSFIDLE代码，根据SO的要求：

var canvas = document.getElementById('c'),
    ctx = canvas.getContext("2d"),
    tileSize = 10;
var holdingUp = false;
var holdingDown = false;
var holdingLeft = false;
var holdingRight = false;
var cx = 150;
var cy = 150;

var upCount = 0;
var downCount = 0;
var leftCount = 0;
var rightCount = 0;

$(document).keydown(function(e) {
    if(e.which==37 && !holdingLeft) { holdingLeft = true; leftCount++; }
    if(e.which==38 && !holdingUp) { holdingUp = true; upCount++; }
    if(e.which==39 && !holdingRight) { holdingRight = true; rightCount++; }
    if(e.which==40 && !holdingDown) { holdingDown = true; downCount++;  }
});
$(document).keyup(function(e) {
    if(e.which==37) { holdingLeft = false; }
    if(e.which==38) { holdingUp = false; }
    if(e.which==39) { holdingRight = false; }
    if(e.which==40) { holdingDown = false; }
});

ctx.fillRect(150, 150, tileSize, tileSize);
setInterval(function() {
    if(!(holdingUp && holdingDown)) {
        if((upCount > 0) || holdingUp) {
            if (upCount > 0) { upCount--; }
            cls();
            ctx.fillRect(cx, cy - tileSize, tileSize, tileSize);
            cy -= tileSize;
        } else if((downCount > 0) || holdingDown) { 
            if (downCount > 0) { downCount--; }
            cls();
            ctx.fillRect(cx, cy + tileSize, tileSize, tileSize);
            cy += tileSize;
        }
    } else {
        downCount = upCount = 0;
    }
    if(!(holdingLeft && holdingRight)) {
        if((leftCount > 0) || holdingLeft) {
            if (leftCount > 0) { leftCount--; }
            cls();
            ctx.fillRect(cx - tileSize, cy, tileSize, tileSize); 
            cx -= tileSize;
        } else if((rightCount > 0) || holdingRight) {
            if (rightCount > 0) { rightCount--; }
            cls();
            ctx.fillRect(cx + tileSize, cy, tileSize, tileSize);
            cx += tileSize;
        }
    } else {
        leftCount = rightCount = 0;
    }
}, 120);

function cls() { ctx.clearRect(0, 0, canvas.width, canvas.height); }

---

也许有更好的方法，但这可以解决您列出的两个问题，方法是保持按键次数的计数，并使用这些计数来确保每次按键都会导致移动。有趣。我还应该注意到，向左运动比向右运动有优势。向上比向下好。如果我按住右键和左键，无论按键的顺序如何，它都会向左移动。可能有更好的方法，但这可以解决您列出的两个问题，方法是保留按键的次数计数，并使用这些计数确保每次按键都会移动。有趣。我还应该注意到，向左运动比向右运动有优势。向上比向下好。如果我按住右键和左键，无论键的放置顺序如何，它都会向左移动。