Создадим простую игру на чистом JavaScript без дополнительных библиотек или фреймворков. Игра будет похожа на Flappy Bird: управление птичкой, пролёт сквозь препятствия.
Подготовка проекта
Создадим файл index.html с базовой HTML-разметкой:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Моя игра</title>
<canvas id="canvas" width="288" height="512"></canvas>
<script src="js/game.js"></script>
</head>
<body>
</body>
</html>
Создадим папку js и в ней файл game.js. Проверка подключения: добавим в game.js alert("Hello!"); — при обновлении страницы должно появиться окно с сообщением. Создадим папки img для изображений и audio для звуковых файлов. Изображения (птичка, фон, трубы) необходимо загрузить самостоятельно.
Отрисовка элементов
Создадим переменные для доступа к canvas и его контексту:
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
Создадим объекты для загрузки изображений:
const bird = new Image();
bird.src = 'img/bird.png';
const bg = new Image();
bg.src = 'img/background.png';
const fg = new Image();
fg.src = 'img/foreground.png';
const pipeUp = new Image();
pipeUp.src = 'img/pipeUp.png';
const pipeBottom = new Image();
pipeBottom.src = 'img/pipeBottom.png';
Функция draw для отрисовки элементов на canvas:
function draw() {
ctx.drawImage(bg, 0, 0);
// ... (код отрисовки других элементов)
}
Отрисовка остальных элементов (трубы, передний фон) осуществляется с помощью drawImage и координат. Загрузка изображений с использованием onload для pipeBottom гарантирует отрисовку после загрузки всех изображений.
Анимация и управление
Добавим переменные для позиции птички и гравитации:
let x = 10;
let y = 150;
let gravity = 1;
Функция moveUp для изменения вертикальной позиции птички при нажатии клавиши:
function moveUp() {
y -= 25;
}
document.addEventListener('keydown', moveUp);
requestAnimationFrame(draw) создаёт анимацию падения птички под действием гравитации.
Генерация препятствий и проверка столкновений
Создадим массив pipes для хранения данных о трубах. Новые трубы добавляются в массив со случайной высотой. Цикл отрисовывает трубы и перемещает их влево. Проверка столкновений птички с трубами и границами экрана приводит к перезагрузке страницы.
Подсчёт очков и звуковое сопровождение
Подсчёт очков происходит при прохождении труб. Счёт отображается на canvas. Загрузка звуковых файлов (flight.mp3, score.mp3) и их воспроизведение при подъёме птички и прохождении трубы.
Мы создали простую игру Flappy Bird на чистом JavaScript, используя canvas и requestAnimationFrame. Это демонстрирует базовые принципы создания игр на JavaScript. Возможны расширения: добавление меню, сложных уровней, другой графики и звуковых эффектов.