Создаём холст

Разместим в теле страницы следующий код:
<canvas id="game" width="460" height="600"></canvas>
<script src="game.js"></script>

Создаём холст игры и подключаем файл с игрой.


game.js


Создаем объект canvas и указываем, что мы создаем 2D игру.
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
Загружаем картинки игрока и врагов и фон.
const backgroundImg = new Image();
backgroundImg.src = "background.jpg";

const playerImg = new Image();
playerImg.src = "ship.png";

const enemyImg = new Image();
enemyImg.src = "asteroid.png";
Загружаем картинки корабля (игрок) и астеройда (враг) и фон.
фон игрок враг

Создадим функцию, которая будет рисовать и реагировать на игровые события.
function draw() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // очищаем холст
ctx.drawImage(backgroundImg, 0, 0);// рисуем фон
ctx.drawImage(playerImg, 0, 0);// рисуем игрока
ctx.drawImage(enemyImg, 0, 0);// рисуем астероид
}

Вызов функции из вне.
let game = setInterval(draw, 100);


Понравилась страница? Поделитесь ссылкой в социальных сетях. Поддержите проект!