Question

我正在使用HTML5 canvas和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）”。

如何更改密钥发布时的图像

3 个答案: