如何使用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; 
    } 

Answer 1

在你畫我的ThOD，你每次都重新初始化播放器：

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

所以你刪除的事件處理程序修改player.x。

您只能在繪圖功能之外初始化玩家一次。您可以將初始化是這樣的：

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

是絕對沒有必要要求player.src = "game_character.png";繪製函數裏面。

作爲一般規則，在處理動畫時，嘗試從繪圖函數中移除所有可以儘可能快的繪圖函數。

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); 
} 

我沒有測試過，所以我不知道它是否有效，並可能有一些錯誤，在這裏和那裏。它應該工作，但！如果沒有別的，它會（希望）給你一個你可以去做的方法的想法...