Используя Canvas через JavaScript, как я могу заставить объект двигаться с помощью клавиш со стрелками?

Question

Я только начинаю с игры, которую пытаюсь сделать для забавного маленького проекта.Я все еще плохо знаком с холстом и просто удивляюсь, как я смогу заставить этот красный квадрат двигаться с помощью клавиш со стрелками?Я понимаю событие keyup, но точно не знал, как включить его в canvas.Заранее спасибо

<canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"></canvas>

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.translate(120,120);
ctx.lineTo(0,0);
ctx.lineTo(160,0);
ctx.lineTo(160,160);
ctx.lineTo(0,160);
ctx.lineTo(0,0);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();

document.addEventListener('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode == 37) {
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.translate(0,0);
}

Answer 1

Я поместил фигуру, которую вы рисуете, в функцию, чтобы я мог вызвать ее снова после того, как вы очистите холст при нажатии клавиши. Также, поскольку вы переводите контекст, вам нужно очистить его от (-120, -120). Я надеюсь, что это помогает.

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

ctx.translate(120,120);
myShape()

document.addEventListener('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode == 37) {
  ctx.clearRect(-120, -120, canvas.width + 120, canvas.height + 120);
  ctx.translate(-120,-120);
  myShape()
}});


function myShape(){
ctx.beginPath();
ctx.lineTo(0,0);
ctx.lineTo(160,0);
ctx.lineTo(160,160);
ctx.lineTo(0,160);
ctx.lineTo(0,0);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();}

<canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"></canvas>

Answer 2

• Первое: вы должны перерисовывать холст каждый раз, когда что-то меняется (по крайней мере, часть, которая изменилась).

• Во-вторых, несмотря на то, что нажатие клавиши снова срабатывает, пока вы удерживаете кнопку нажатой, вы хотите более последовательный цикл обновления; как requestAnimationFrame или setInterval. И затем позже вы также можете учесть небольшие несоответствия в этих интервалах, принимая во внимание время с момента последнего вызова / обновления функции.

• Затем вы захотите ввести keyState, в котором будет храниться текущее состояние нескольких кнопок, чтобы вы могли проверить это вне фактического события keydown / keyup.

  const isKeyDown = {};
  document.onkeydown = document.onkeyup = function(e){ 
      isKeyDown[e.which] = isKeyDown[e.key] = e.type === "keydown";
  };
  

• и в качестве второго шага вы можете ввести скорость объекта с трением или гравитацией. Таким образом, ваши нажатия кнопок не определяют фактическое движение, а "воздействуют силой" на текущее движение вашего объекта.