javascript - 如何在密钥释放时更改图像

Question

我正在使用 HTML5 画布和 javascript 开发一个小游戏。现在我想做的是让图像从左向右移动，当按下一个键时，它会改变图像以使其看起来更像是在移动。

现在我开始工作了，但我有点卡住了。代码是，当您按下左键时，他将 player.image 更改为 player.imgLeft 并在释放时将其更改回正常图像。

压制有效，但释放无效..我做错了什么？

简而言之，这是代码

 // Things to do when keys are down
 function onKeyDown(event)
 {
if (event.keyCode >= 37 && event.keyCode<=39)
    event.preventDefault(); // prevent arrow keys from scrolling the page

switch (event.keyCode) {
 case 37: player.vx = -1; player.image = player.imgLeft; break; // left key
 case 38: player.vy = -1; break; // up key
 case 39: player.vx = 1; player.image = player.imgRight; break; // right key
 }  
 }


 // Things to do when keys are up
 function onKeyUp(event)
 {
switch (event.keyCode) {
    case 37: case 39: player.vx = 0; player.imgLeft = player.image; break; // left or right key released
    case 38: player.vy = 0; break; // up or down key released
  }
 }

Answer 1

如果您在 player.original 中有原始图像，请像这样修改。您应该像这样使用 Onkeyup 事件...

function onKeyUp(event)
 {
switch (event.keyCode) {
    case 37: case 39: player.vx = 0; player.image = player.original; break; // left or right key released
    case 38: player.vy = 0; break; // up or down key released
  }
 }

Answer 2

当你按下键时，你做

player.image = player.imgLeft

当你释放时，你做

player.imgLeft = player.image;

它什么都不做，因为两个变量都具有相同的值。您需要第三个变量来存储原始player.image值。

Answer 3

记住：

如果你使用 onkeydown="return onKeyDown(event)" 你需要 onkeyup="return onKeyUp(event)"。