Игра на чистом JS за 20 минут: Flappy Bird

Создадим простую игру на чистом 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. Возможны расширения: добавление меню, сложных уровней, другой графики и звуковых эффектов.

Что будем искать? Например,программа