1

私は簡単なゲームを作成しようとしています。左右のボタンを押すと、画像が移動することになっています（そして別の画像間で変化しますtrexf）trexb。

<canvas id="canvas" width="640" height="480" >
    Browser doesn't support canvas.
</canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width, height, rightKey = false, leftKey = false, upKey = false, downKey = false, rex_x, rex_y = 300, trexf, trexb;

trexf = new Image('Trexf.png');
trexb = new Image('Trexb.png');

function clearCanvas() {
    canvas.width = canvas.width;
}

function drawRex() {
    if(rightKey) {
        rex_x += 5;
    } else if(leftKey) {
        rex_x -= 5;
    }

    ctx.drawImage(trexf, rex_x, rex_y);
    if(rightKey == false || leftKey == false) {
        ctx.drawImage(trexb, rex_x, rex_y);
    }
}

function loop() {
    clearCanvas();
    drawRex();
}

function keyDown(e) {
    if(e.keyCode == 39)
        rightKey = true;
    else if(e.keyCode == 37)
        leftKey = true;
}

function keyUp(e) {
    if(e.keyCode == 39)
        rightKey = false;
    else if(e.keyCode == 37)
        leftKey = false;
}

function init() {

    ctx.canvas.width = window.innerWidth - 30;
    ctx.canvas.height = window.innerHeight - 30;

    document.addEventListener('keydown', keyDown, false);
    document.addEventListener('keyup', keyUp, false);

    rex_x = canvas.width / 2;

    setInterval(loop, 1000);
}

init();

JSFiddleで試してみてください。

なぜこれが期待どおりに機能しないのですか？

4

2 に答える 2

0

これはChromeで機能しますが、描画間隔が大きすぎる（1秒）ため、再描画の前にキーアップイベントが発生します。

于 2012-05-29T15:41:26.347 に答える
0

インターバルタイマーの遅延カウントをダイヤルダウンします。

http://jsfiddle.net/bTvBn/42/

今は問題なく動作します。

于 2012-05-29T15:45:48.430 に答える