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

<!DOCTYPE html>
<html>
    <head>
        <title>Snake!!</title>
        <link rel="stylesheet" href ="snake.css">
    </head>
    <body scroll="no" style="overflow: hidden">
        <div class="canvas-container">
            <img src="Apple.png" width="0" height="0" id="Apple"><!--Image-->
            <canvas id="myCanvas"></canvas> <!-- canvas for the game-->
            <button type="button" onclick="restartGame()"class="Restartbutton" id="myButton">Restart</button>
            <textarea class="score"id="score" ></textarea>
            <script src="snake.js"></script>
        </div>



    </body>
</html>
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. Я нарисовал все холсты и кнопки для игры, и теперь я просто хочу, чтобы в игре был игрок или яблоко в качестве изображений. Мне нужна помощь. Спасибо уже!

Всего 1 ответ


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

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

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

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

Есть идеи?

10000