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.beginPath()我通过设置之前的指令更新了您的代码，结果palette.context.moveTo()请参见jsfiddle。

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