холст keyPress движение - сломанный

Question

Мое движение нажатия клавиши кажется сломанным, если я нажимаю 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 ++; 
    } 
} 

Preview:.. 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)

попробовать

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

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