javascript - Tron 游戏关键事件问题

Question

我想制作一个“类似 Tron 游戏”的小游戏，代码如下，我已经制作了:http://jsfiddle.net/Jim_Y/KQW5w/2/代码片段:

$(document).keydown(function (e) {
        if (e.keyCode == 37) {
            // leftArrowPressed
            palette.leftArrowPressed();
        } else if (e.keyCode == 38) {
            //  topArrowPressed
            palette.topArrowPressed();
        } else if (e.keyCode == 39) {
            // rightArrowPressed
            palette.rightArrowPressed();
        } else if (e.keyCode == 40) {
            // bottomArrowPressed
            palette.bottomArrowPressed();
        }

        return false;
    });

Palette.prototype.leftArrowPressed = function () {
    this.X = this.X - this.game.speed;
    this.context.lineTo(this.X, this.Y);
    this.context.stroke();
}

问题是，当我按一个方向键并画一条线，然后按另一个方向键时，绘图上有一点中断，因此画线不连续:/有什么建议吗？

Answer 1

我在您提供的演示中没有看到任何中断。

无论如何，第一次按下箭头时，不会绘制任何线。

我更新了您的代码，通过在 palette.context.moveTo() 之前设置 palette.context.beginPath() 指令，请参阅 jsfiddle以获得结果。

palette.context.beginPath();
palette.context.moveTo(palette.X, palette.Y);