Создайте копию flappy Bird с помощью TypeScript и Pixi.js

Создайте копию flappy Bird с помощью TypeScript и Pixi.js

Онлайн демонстрационная ссылка и репозиторий кода (160 строк кода TypeScript).

Эта статья о том, что я узнал, создав небольшой проект, изучая Машинопись и Pixi.js и получая удовольствие.

Прежде чем говорить о деталях реализации, вот мои два цента о TypeScript и Pixi.js.

Первое преимущество TypeScript обеспечивает строгую проверку типов, приведенный ниже код является примером:

Если нам повезет, мы можем найти опечатку с locale на этапе разработки, но иногда ошибки такого рода незаметно переносятся в основную ветку кодовой базы и тратят много времени на отладку в производственная среда.

Второе преимущество TypeScript - облегчение страданий от разработки незнакомой мне библиотеки javascript, очень часто я очень беспокоюсь о том, использую ли я правильные подписи, и трачу много времени на проверку документов.
Теперь я могу полагаться на то, что говорит мне TypeScript:

Pixi.js - это легкая 2D-библиотека.

Первое преимущество - это оболочка WebGL (короче говоря, WebGL позволяет нам рендерить графику напрямую с помощью графического процессора), она позволяет нам использовать WebGL, не беспокоясь о WebGL API. (В моей последней статье WebGL и Image Filter 101 я упоминал о мощи WebGL, и мы должны предоставить много шаблонного кода, чтобы заставить WebGL работать, поскольку это низкоуровневый API).

Второе преимущество - это объединение всех видов 2D-контента (изображения, текста, фигур) в «Sprite», мы можем применять преобразование и добавлять интерактивность к этому контенту таким же образом с помощью простого в использовании API.
Мы также можем группировать различный контент с помощью контейнеров и быстро использовать пакетные эффекты.

Изображение летящей птицы

Чтобы начать использовать Pixi.js, вы можете начать с включения скрипта ниже в свой HTML-файл (или npm install pixi.js, если в вашем проекте есть инструменты для создания пакетов):
<script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.4/pixi.min.js'></script>

Начнем с создания сцены. После этой настройки любые изменения, происходящие внутри контейнера сцены, можно отобразить с помощью renderer.render(stage).

const renderer = PIXI.autoDetectRenderer(512, 512);
document.body.appendChild(renderer.view);
const stage = new PIXI.Container();

Чтобы создать летающую птицу, я нашел эти активы по этой ссылке (пожалуйста, используйте атлас текстур, если у вас намного больше изображений в вашем проекте, который также хорошо поддерживается Pixi.js).

Затем я создал «Спрайт» и обновил текстуру спрайта с помощью интервального таймера.

С помощью приведенного ниже кода вы получите анимированную птицу, похожую на летающую.

В reset мы используем x и y для управления положением.
Если у вас есть speedX и speedY, вы также можете обновить ориентацию птицы с помощью this.sptire.rotation=Math.atan(speedY / speedX).

Теперь у нас есть птица, и мы можем применить к ней различные преобразования; вы можете попробовать добавить новое поле speedY в Bird класс и обновить положение птицы, обновляя y каждый draw спрайта на основе этого поля.

Раздирающие трубки

Как я упоминал ранее, при использовании Pixi.js все виды 2D-контента (изображения, текст, фигуры) можно рассматривать как «спрайты», для трубки я просто рисую несколько прямоугольников.

Pixi.js предоставил API двухмерного рисования с PIXI.Graphics, например, для рисования «трубы» и ее перемещения по горизонтали:

const tube = new PIXI.Graphics();
tube.beginFill(0xffffff);
//drawRect(x, y, width, height)
tube.drawRect(100, 0, 50, 120);
tube.drawRect(100, 200, 50, 512);
tube.endFill();
tube.x = 200;
stage.addChild(tube);
renderer.render(stage);

И класс лампы, который я сделал, выглядит так:

Проверка столкновения

После того, как у нас есть движущиеся объекты (трубы и птица), мы можем рассматривать их как прямоугольники.
Если у нас есть их крайняя левая верхняя точка, ширина и высота (x1, y1, w1, h1 и x2, y2, w2, h2), то мы можем проверить, сталкиваются ли два прямоугольника друг с другом:

if((x1 + w1 < x2) || (x2 + w2 < x1) || (y1 + h1 < y2) || (y2 + h2 < y1))
  No collision

Итак, это практически все, что нужно для создания простой копии в виде птицы.

Спасибо за чтение :)