Javascript 使用箭头键在画布内移动图像

我有一个画布，我们可以用箭头键移动形状

但是，我希望图像移动，而不是形状，我无法计算出来。
有什么帮助吗

现在，图像出现了，但我无法移动它。
我在网上试过很多东西，但都不管用。图像的id为

image

这是我当前的代码：

 car = {
  image : img,
  //jumping: true,
  x:180, // center of the canvas
  x_velocity:0,
  y: 160,
  y_velocity:0,
};  


controller = {

  left: false,
  right: false,
  up: false,
  down: false,
  keyListener:function(event) {

    var key_state = (event.type == "keydown")?true:false;

    switch(event.keyCode) {

      case 37:// left key
        controller.left = key_state;
      break;
      case 38:// up key
        controller.up = key_state;
      break;
      case 39:// right key
        controller.right = key_state;
      break;
      case 40: //down key
        controller.down = key_state;

    }

  }

};


loop = function() {

  if (controller.up) {
    car.image.y_velocity -= 0.5;

  }

  if (controller.left) {
    car.image.x_velocity -= 0.5;
  }

  if (controller.right) {
    car.image.x_velocity += 0.5;
  }

  if (controller.down) {
    car.image.y_velocity += 0.5;
  }

  car.image.x += car.image.x_velocity;
  car.image.y += car.image.y_velocity;
  car.image.x_velocity *= 0.9;// friction
  car.image.y_velocity *= 0.9;

  // if car.image is going off the left of the screen
  if (car.image.x < -32) {
    car.image.x = 1190;
// if car.image goes past right boundary
  } else if (car.image.x > 1190) {
    car.image.x = -32;
// if car.image goes past lower boundary
  } else if (car.image.y > 790) {
    car.image.y = 0;
// if car.image goes past upper boundary
  } else if (car.image.y < -32) {
    car.image.y = 790;
  }

  context.drawImage(car.image, car.x, car.y);

  // call update when the browser is ready to draw again
  window.requestAnimationFrame(loop);

};

window.addEventListener("keydown", controller.keyListener) //press down and it moves
window.addEventListener("keyup", controller.keyListener);  //lift finger and it stops
window.requestAnimationFrame(loop);

car={
图片：img，
//跳跃：是的，
x:180，//画布的中心
x_速度：0，
y:160，
y_速度：0，
};  
控制器={
左：错，
右：错，
上：错，
唐：错，
keyListener:函数（事件）{
var key_state=（event.type=“keydown”）？true:false；
开关（event.keyCode）{
案例37://左键
controller.left=按键状态；
打破
案例38://向上键
controller.up=按键状态；
打破
案例39://右键
controller.right=按键状态；
打破
案例40://向下键
controller.down=按键状态；
}
}
};
循环=函数（）{
if（controller.up）{
car.image.y_速度-=0.5；
}
if（控制器左）{
car.image.x_速度-=0.5；
}
如果（控制器右侧）{
car.image.x_速度+=0.5；
}
如果（控制器关闭）{
car.image.y_速度+=0.5；
}
car.image.x+=car.image.x_速度；
car.image.y+=car.image.y\u速度；
car.image.x_速度*=0.9；//摩擦力
car.image.y_速度*=0.9；
//如果car.image从屏幕左侧消失
如果（car.image.x<-32）{
car.image.x=1190；
//如果car.image经过右边界
}否则如果（car.image.x>1190）{
car.image.x=-32；
//如果car.image经过下边界
}否则如果（car.image.y>790）{
car.image.y=0；
//如果car.image超过上限
}else if（汽车图像y<-32）{
car.image.y=790；
}
context.drawImage（car.image，car.x，car.y）；
//当浏览器准备再次绘制时调用update
window.requestAnimationFrame（循环）；
};
window.addEventListener（“keydown”，controller.keydlistener）//按下并移动
window.addEventListener（“keyup”，controller.keyListener）//抬起手指，它就停了
window.requestAnimationFrame（循环）；

这是形状移动时的代码：

rectangle = {
  height:20,
  width:20,
  x:180, // location @ center of the canvas
  x_velocity:0,
  y: 160,
  y_velocity:0,

};

controller = {

  left: false,
  right: false,
  up: false,
  down: false,
  keyListener:function(event) {

    var key_state = (event.type == "keydown")?true:false;

    switch(event.keyCode) {

      case 37:// left key
        controller.left = key_state;
      break;
      case 38:// up key
        controller.up = key_state;
      break;
      case 39:// right key
        controller.right = key_state;
      break;
      case 40: //down key
        controller.down = key_state;

    }

  }

};

loop = function() {

  if (controller.up) {
    rectangle.y_velocity -= 0.5;
  }

  if (controller.left) {
    rectangle.x_velocity -= 0.5;
  }

  if (controller.right) {
    rectangle.x_velocity += 0.5;
  }

  if (controller.down) {
    rectangle.y_velocity += 0.5;
  }

  rectangle.x += rectangle.x_velocity;
  rectangle.y += rectangle.y_velocity;
  rectangle.x_velocity *= 0.9;// friction
  rectangle.y_velocity *= 0.9;// friction


  // if rectangle is going off the left of the screen
  if (rectangle.x < -32) {
    rectangle.x = 1190;
// if rectangle goes past right boundary
  } else if (rectangle.x > 1190) {
    rectangle.x = -32;
// if rectangle goes past lower boundary
  } else if (rectangle.y > 790) {
    rectangle.y = 0;
// if rectangle goes past upper boundary
  } else if (rectangle.y < -32) {
    rectangle.y = 790;
  }

  context.fillRect(0, 0, 1200, 800);// x, y, width, height
  context.fillStyle = "white";// hex for red
  context.beginPath();
  context.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
  context.fill();

  // call update when the browser is ready to draw again
  window.requestAnimationFrame(loop);

};

window.addEventListener("keydown", controller.keyListener) //press down and it moves
window.addEventListener("keyup", controller.keyListener);  //lift finger and it stops
window.requestAnimationFrame(loop);

矩形={
身高：20，
宽度：20，
x:180，//画布中心的位置
x_速度：0，
y:160，
y_速度：0，
};
控制器={
左：错，
右：错，
上：错，
唐：错，
keyListener:函数（事件）{
var key_state=（event.type=“keydown”）？true:false；
开关（event.keyCode）{
案例37://左键
controller.left=按键状态；
打破
案例38://向上键
controller.up=按键状态；
打破
案例39://右键
controller.right=按键状态；
打破
案例40://向下键
controller.down=按键状态；
}
}
};
循环=函数（）{
if（controller.up）{
矩形y_速度-=0.5；
}
if（控制器左）{
矩形x_速度-=0.5；
}
如果（控制器右侧）{
矩形x_速度+=0.5；
}
如果（控制器关闭）{
矩形y_速度+=0.5；
}
矩形.x+=矩形.x_速度；
矩形.y+=矩形.y\u速度；
矩形x_速度*=0.9；//摩擦力
矩形.y_速度*=0.9；//摩擦力
//如果矩形离开屏幕左侧
if（矩形x<-32）{
矩形x=1190；
//若矩形经过右边界
}else if（矩形x>1190）{
矩形.x=-32；
//若矩形经过下边界
}else if（矩形y>790）{
矩形y=0；
//若矩形超过上边界
}else if（矩形y<-32）{
矩形y=790；
}
context.fillRect（0，0，1200，800）；//x，y，宽度，高度
context.fillStyle=“白色”//十六进制表示红色
context.beginPath（）；
rect（rectangle.x，rectangle.y，rectangle.width，rectangle.height）；
context.fill（）；
//当浏览器准备再次绘制时调用update
window.requestAnimationFrame（循环）；
};
window.addEventListener（“keydown”，controller.keydlistener）//按下并移动
window.addEventListener（“keyup”，controller.keyListener）//抬起手指，它就停了
window.requestAnimationFrame（循环）；

我不知道是什么代码呈现箭头，但可能是图像的

display

css属性与箭头不同？（默认情况下，

元素具有

显示：块；

）文档：那么它应该是什么？尝试检查箭头，并对图像使用相同的属性。它不是箭头。它是一个长方形。我不能检查它，因为它是用JavaScript制作的。你不能右键点击它并选择“检查”吗？如果你不能做到这一点，我认为你有一个更大的问题。