Почему этот объект не двигается?

Question

Я новичок в Javascript, и я попытался сделать простую игру, где есть блок, и он может двигаться. Прямо сейчас я только сделал так, чтобы это только двигалось влево, но это не так.

Я проверил опечатки и проверил консоль с console.log, и она работает, но мой объект не двигается.

const ctx=document.getElementById("ctx").getContext("2d");

var one={
  width:30,
  height:30,
  x:250,
  y:200,
  color:"rgb(63, 154, 244)"
};
function draw(){
  ctx.save();
  ctx.fillStyle=one.color;
  ctx.fillRect(one.x,one.y,one.width,one.height);
  ctx.restore();
}
function move(){
  document.onkeydown=function(event){
    if(event.keyCode==65){
      one.x=one.x-15;
      console.log("test");
    }
  }
}

function startGame(){
  draw();
  setInterval(move,2000);
}
startGame();

<canvas id="ctx" width="1400" height="500" style="border:0.01em solid #fff"></canvas>

Я думал, что при нажатии «а» блок сместится влево на 15, но он не сдвинется. Он все еще отображается как синий цвет, но он просто не двигается.

Answer 1

Вот пример изменения вашего кода, вы можете улучшить его.

const ctx=document.getElementById("ctx").getContext("2d");

var one={
  width:30,
  height:30,
  x:250,
  y:200,
  color:"rgb(63, 154, 244)"
};

function draw(){
  ctx.save();
  ctx.fillStyle=one.color;
  ctx.fillRect(one.x,one.y,one.width,one.height);
  ctx.restore();
}

// we're gonna register our event handler just one time.
document.onkeydown=function(event){
  if(event.keyCode==65){
    moveLeft();
  }
}

function moveLeft() {
  // I've added this line of code to erase the previous square from the canvas
  // Since we're gonna move your square to another location.
  // You'll probably want to move this code somewhere else
  // Can be inside a redraw function? Idk.
  ctx.clearRect(one.x, one.y, one.width, one.height);
  one.x=one.x-15;
  console.log("test");
}

function startGame(){
  // Let's call draw every 50ms
  setInterval(draw,50);
}

startGame();

Я переместил настройку обратного вызова onkeydown наружу, так что он будет там с самого начала.

И в startGame() вместо того, чтобы неоднократно вызывать прежнюю функцию move с интервалом, я вызывал draw, поскольку мы хотим перерисовать холст, чтобы визуально обновить игру.

Проблема с вашим кодом:

1. В вашем startGame вы неоднократно вызывали move каждые 2 секунды, в течение которых функция просто регистрирует обработчик события в document.onkeydown, на самом деле это не так что-нибудь.

2. Поскольку обработчик регистрируется, вы можете убедиться, что значение one.x действительно обновляется при нажатии клавиши A , вы не можете просто проверить его, потому что холст никогда не обновляется.

Вот рабочий JSFiddle: https://jsfiddle.net/8qjcfya9/

UPDATE

Я просто переработал некоторую часть кода, все еще работает так же.