使用 WASD 键使对象（图像）移动答案

【问题标题】：Make an object (image) move using WASD keys使用 WASD 键使对象（图像）移动
【发布时间】：2021-03-12 22:22:54
【问题描述】：

我有下面的代码。我想要做的不是在画布上移动一个小方块，而是使用图像。在我的 sn-p 中，我尝试使用 drawImage 函数来显示我想要使用的图像。我能够显示图像，但是当我尝试使用 WASD 键时，它确实不动。相反，黑色方块仍然是由按键控制的方块。有没有办法使用 WASD 键而不是黑色方块来控制图像?

var canvas;
var context;
var ctx;
var xaxis = 10;
var yaxis = 10;
var obstacle = [];

window.onload = function() {
  canvas = document.getElementById("textbox");
  context = canvas.getContext("2d");
  ctx = canvas.getContext("2d");
  player.img.src = 'https://64.media.tumblr.com/tumblr_lkl5spPdno1qfamg6.gif'; //

  canvas.width = 400;
  canvas.height = 400;
  drawCanv();
}

/* obstacle object */
var object = {
    height: 50,
    width: 50,
    x: 100, 
    y: 100,     
  }

/* player object */
var player = {
  height: 10,
  width: 10,
  img: new Image() //
};

function drawCanv() {
    /* canvas */
    context.beginPath();
    context.fillStyle = "#ffffff";
    context.fillRect(0, 0, canvas.width, canvas.height);

    /* player */
    context.beginPath();
    context.fillStyle = "black";
    context.drawImage(player.img, player.height, player.width, 10, 10); //
    context.fillRect(xaxis, yaxis, player.width, player.height);
    

  /* obstacle object */
  var ndx = obstacle.push({
      x: object.x,
      y: object.y,
      width: object.width,
      height: object.height,
    }) - 1;
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.fillRect(obstacle[ndx].x, obstacle[ndx].y, obstacle[ndx].width, obstacle[ndx].height);
}



function hitObsta(player, array) {
    for (var value of array) {
        
        if ((player.x + player.width > value.x && player.x < value.x + value.width) 
        && (player.y + player.height > value.y && player.y < value.y + value.height)) {

            return true;
        }
    }
    
    return false;
}


function onkeydown(e) {
  /* Going right*/
  if (e.keyCode == 68 && xaxis + 10 < canvas.width) { 
    xaxis++;                                          
                                                          
    var updatedCoords = (Object.assign({
        x: xaxis,
        y: yaxis,
    }, player));
    if (hitObsta(updatedCoords, obstacle)) {
      xaxis--;
    }
  } 
  /* Going left*/
  else if (e.keyCode == 65 && xaxis > 0) {  
    xaxis--;                                 
    var updatedCoords = (Object.assign({
        x: xaxis,
        y: yaxis,
    }, player));
    if (hitObsta(updatedCoords, obstacle)) {
      xaxis++;
    }
  } 
  /* Going up*/
  else if (e.keyCode == 87 && yaxis > 0) { 
    yaxis--;                               
    var updatedCoords = (Object.assign({
        x: xaxis,
        y: yaxis,
    }, player));
    if (hitObsta(updatedCoords, obstacle)) {
      yaxis++;
    }
  } 
  /* Going down*/
  else if (e.keyCode == 83 && yaxis + 10 < canvas.height) { 
    yaxis++; 
    var updatedCoords = (Object.assign({
        x: xaxis,
        y: yaxis,
    }, player));
    if (hitObsta(updatedCoords, obstacle)) {
      yaxis--;
    }
  }
  //render(); 
  drawCanv();
  
}


function render()
{
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(player.img, player.height, player.width, 10, 10); //
}

window.addEventListener("keydown", onkeydown);

<html>
    <head>
        <title>Canvas</title>
        <style>
            
        </style>
    </head>

    <body>
        <canvas id="textbox" style="border: 1px solid black"></canvas>
        <script src="js/app.js"></script>
    </body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

你根本不需要黑色方块。你可以这样做：

const image = new Image(10, 10)
image.src = 'https://64.media.tumblr.com/tumblr_lkl5spPdno1qfamg6.gif';

/* player object */
var player = {
  height: 10,
  width: 10,
  img: image
};

function drawCanv() {

  // ...

  /* player */
  context.beginPath();
  context.drawImage(player.img, xaxis, yaxis, 10, 10); //

  // ...

}

【讨论】：