Как переместить объект на холсте со стрелками?

Question

Кто-нибудь может помочь мне с тем, чтобы объект двигался автоматически, когда я нажимаю стрелку вправо на холсте.

Мой код

if(e.keyCode == 39) {
    bullet.x = +5;  
    setTimeout(function() {
        ctx.clearRect(0,0,canvas.width,canvas.height)
        ctx.drawImage(player.Image, player.x, player.y , player.width, player.height);
        ctx.drawImage(bullet.Image , bullet.x , bullet.y , bullet.width ,  bullet.height);
    }, 300);
    console.log("DOWN");
}

Что мне нужно добавить для объекта, движущегося по стрелке вправо?

Answer 1

Необходимо использовать ClearReact для продвижения с помощью функции setInterval ()

let canvas = document.getElementById("mycanvas");
let ctx = canvas.getContext('2d');
juego();
let ev;
let x = 0;

let base_image = new Image();
base_image.src = 'https://img.icons8.com/pastel-glyph/2x/search.png';
window.onkeydown = function(e) {
  this.ev = e;
}

function draw() {
  if (typeof this.ev != 'undefined' && this.ev.keyCode == 39) {
    x = x + 10;
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(base_image, x, 10);
  }
}

function juego() {

  pat = ctx.createPattern(canvas, "repeat");
  window.setInterval(draw, 500);
}

canvas {
  outline: black 3px solid;
}

<canvas id="mycanvas" width="150" height="150"></canvas>

для попытки нажмите стрелку влево