Как сделать изображение препятствием в игре?

Question

const Canvas = document.getElementById("myCanvas");<!-- start of JS-->
const ctx = Canvas.getContext("2d");
const imgApple = document.getElementById("Apple");

function draw(){
    ctx.drawImage(imgApple,200,200,50,50);<!-- just random numbers to place the Apple at-->
    ctx.fill();
    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

Я хотел сделать игру Snake. Я нарисовал все холсты и кнопки для игры, и теперь я просто хочу, чтобы в игре был игрок или яблоко в качестве изображений. Мне нужна помощь. Спасибо уже!

Answer 1

Проблема в том, что вы не указали начальные размеры для своего холста - поэтому он использует значения по умолчанию width = 300 и height = 150. Конечно, это не было бы большой проблемой, если бы не было этой строки:

ctx.drawImage(imgApple,200,200,50,50);

Это означает, что он пытается нарисовать яблоко в положении экрана x = 200 и y = 200 - вне видимая область холста. Попробуйте с

ctx.drawImage(imgApple,200,100,50,50);