Tron game keyevent issue

Question

I want to make a 'Tron-game like' little game, heres the code, i already made: http://jsfiddle.net/Jim_Y/KQW5w/2/ code snippet:

$(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();
}

The problem is, when i press one of the arrow keys and draw a line, then press a different arrow key, there is a little break on the drawing, so the line-drawing is not continuous :/ Any advice?

Have a `setTimeout` that loops every X ms. Have a keyhandler that stores which keys are being pressed. In the timer callback act accordingly. — Šime Vidas, May 19 '13 at 20:27
See my answer here: http://stackoverflow.com/a/4951670/425275 (try the demo) — Šime Vidas, May 19 '13 at 20:29

score 0 · Answer 1 · answered May 19 '13 at 20:58

I don't see any break in the demo you provided.

Anyway, the first time you push an arrow, no line is drawn.

I updated your code, by setting the palette.context.beginPath() instruction before palette.context.moveTo(), see jsfiddle for the result.

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

Tron game keyevent issue

1 Answers1