Tron游戏关键事件问题

Question

我想做一个'Tron-game like‘小游戏，下面是代码，我已经做好了：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);