如何在HTML5中使用键盘箭头键移动画布上的图像

Question

我正在使用以下代码在画布上绘制图像，它成功地在画布上绘制了图像，现在我想移动画布上的图像，为此我编写了代码，检查如果我的键盘的右键被按下，我将增加图像的x坐标，如果左键被按下，则将减小x坐标，但图像不会在画布上移动。

player = new Image();
player.src = "game_character.png";
context.drawImage(player,player.x * wallDim + wallDim ,player.y * wallDim + wallDim ,50,50);

如何在画布上移动图片

 var handleInput = function(event, keyState) {
        switch(event.which) {
              case 37: { // Left Arrow
                    keyDown.arrowLeft = keyState;
                    break;
              }
              case 38: { // Up Arrow
                    keyDown.arrowUp = keyState;
                    break;
              }
              case 39: { // Right Arrow
                    keyDown.arrowRight = keyState;
                    break;
              }
              case 40: { // Down Arrow
                    keyDown.arrowDown = keyState;
                    break;
              }
        }
  }

  /**
  * physics
  *
  * This function contains the basic logic for the maze.
  */
  var physics = function() {
       console.log("physics ");
       console.log("first condition "+keyDown.arrowRight +player.x+1);
        if(keyDown.arrowLeft && player.x-1 >= 0 && map[player.y][player.x-1] != 1) {
              player.x--;
              redraw = true;
        }

        if(keyDown.arrowUp && player.y-1 >= 0 && map[player.y-1][player.x] != 1) {
              player.y--;
              redraw = true;
        }

        if(keyDown.arrowRight && player.x+1 < map[0].length && map[player.y][player.x+1] != 1) {
              console.log("arrow right");
              player.x++;
              redraw = true;
        }

        if(keyDown.arrowDown && player.y+1 < map.length && map[player.y+1][player.x] != 1) {
              player.y++;
              redraw = true;
        }
        if(keyDown.arrowRight && player.x+1 >= map[0].length)
        {
            player.x++;
            document.getElementById("canvas_div").style.display="none";
            document.getElementById("end_screen_div").style.display="block";
            //alert("completed");
        }
  }

  /**
  * draw
  *
  * This function simply draws the current state of the game.
  */
  var draw = function() {

        // Don't redraw if nothing has changed
        if(!redraw)
              return;

        context.clearRect(0, 0, cols, rows);
        context.beginPath();

        // Draw the maze
        for(var a = 0; a < rows; a++) {
              for(var b = 0; b < cols; b++) {
                    switch(map[a][b]) {
                          case C.EMPTY: context.fillStyle = colors.empty; break;
                          case C.WALL: context.fillStyle = colors.wall; break;
                    }

                        context.fillRect(b * wallDim, a * wallDim, wallDim, wallDim); // x, y, width, height
              }
        }

        // Draw the player
     /* context.fillStyle = colors.player;
        context.arc(
              player.x * wallDim + wallDim / 2, // x position
              player.y * wallDim + wallDim / 2, // y position
              wallDim / 2, // Radius
              0, // Starting angle
              Math.PI * 2, // Ending angle
              true // antiClockwise
        );*/


    player = new Image();
    player.src = "game_character.png";

    context.drawImage(player,player.x * wallDim + wallDim ,player.y * wallDim + wallDim ,50,50);

    var firstplayer=new Image();
    firstplayer.src="top_character01.png";

    context.drawImage(firstplayer,680,0,60,60);

    var secondplayer= new Image();
    secondplayer.src="top_character02.png";

    context.drawImage(secondplayer,750,0,60,60);

    context.fill();
    context.closePath();

        redraw = false;
  }

- deve1

---

你能展示更多的代码吗？至少包括keyup检测和重绘调用吗？ - Denys Séguret

如果我使用任何形状，它都可以完美地移动，但图像却没有移动。 - deve1

Answer 1

在你的绘制方法中，每次都重新初始化了玩家：

player = new Image();
player.src = "game_character.png";

所以你通过事件处理程序擦除了player.x的修改。

你应该只在draw函数之外初始化player一次。你可以像这样移动初始化：

var player = new Image();
player.src = "game_character.png";
var draw = function() {

在绘制函数中绝对没有必要调用player.src = "game_character.png";。

通常情况下，在处理动画时，尽可能从绘制函数中移除所有不必要的内容，使其尽可能快速。

- Denys Séguret

---

只需定义并创建玩家一次（在 draw 函数之外）。请参见编辑。 - Denys Séguret

如果我在绘制方法之外声明它，它就不会在画布上绘制图像。 - deve1

Answer 2

每次都需要重新绘制画布。可以像这样实现：

function init()
{
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");

    x = canvas.width / 2; //align to centre of the screen
    y = canvas.height / 2; //same as above

    speed = 5; //speed for the player to move at

    width = 50; //width of the player
    height = 50; //height of the player

    playerimage = new Image();
    playerimage.src = "path/to/image/for/player"; //path to the image to use for the player

    canvas.addEventListener("keypress", update);
}

function update(event)
{
    if (event.keyCode == 38)
    {
        y -= speed; //going up
    }
    if (event.keyCode == 40)
    {
        y += speed; //going down
    }
    if (event.keyCode == 37)
    {
        x -= speed; //going left
    }
    if (event.keyCode == 39)
    {
        x += speed; //going right
    }
    render();
}

function render()
{
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(playerimage, x, y, width, height);
}

我没有测试过它，所以我不知道它是否可用，可能有一些错误。不过应该能用！如果什么都不行，这至少（希望）可以给您提供一种实现的思路...

- starbeamrainbowlabs