畫布鍵按動-損壞

Question

我的keyPress運動似乎被破壞了，如果我兩次按下arr.up / down，那么它就被破壞了，並且我無法將元素移回去。 當我停止按住arr.up / down時，元素甚至都沒有停止，為什么？

rocket = new Image();
x = 50;
y = 185;
score = 0;
velY = 0;
speed = 2;

y += velY;
ctx.drawImage(rocket, x, y);

    if(e.keyCode == 38) {
    if(velY < speed) {
        velY --;
    }
}

if(e.keyCode == 40) {
    if(velY < speed) {
        velY ++;
    }
}

預覽： http ： //game.stranger.tk/

Answer 1

我會編輯您的代碼，但是通過您的鏈接進行的游戲不起作用:(。我希望我提供的此代碼示例對您有所幫助。

jsFiddle： https ://jsfiddle.net/w1z2c1cq/

javascript

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

var rocket = function()
{
    this.Sprite = new Image();
  this.Sprite.src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS9zafp1ezdR2lSAxTdjZYe_nPhe6VeKKmAuK-GzWQCSs395WkzNA";
    this.XPos = 100;
  this.YPos = 100;
}

var player = new rocket();

setInterval(function()
{
    ctx.fillRect(0,0,400,400);
    ctx.drawImage(player.Sprite, player.XPos, player.YPos);
}, 3);


window.addEventListener("keydown", function(e){
        // Left key
    if(e.keyCode === 37) {
        player.XPos -= 5;
    }
    // Right key
    if(e.keyCode === 39) {
        player.XPos += 5;
    }
    // Up key
    if(e.keyCode === 38) {
        player.YPos -= 5;
    }
    // Down key
    if(e.keyCode === 40) {
        player.YPos += 5;
    }
});

同樣在您的代碼中，您正在檢查上下if(velY < speed)相同的if語句if(velY < speed)

嘗試

// Up
if(e.keyCode == 38) {
    if(velY < speed) {
        velY --;
    }
}

// Down
if(e.keyCode == 40) {
    if(velY > -speed) {
        velY ++;
    }
}