DevGang
Авторизоваться

Введение в Boxbox.js: создание клона Angry Birds с помощью JavaScript 

Идея создания игр с использованием JavaScript поначалу может показаться сложной, если вы не знакомы с основами, такими как c чего начинать работу, различные игровые движки, доступные для оптимизации процесса разработки и т.д.

В этом руководстве мы продемонстрируем, как использовать Boxbox.js и Box2D, создав простой клон «Angry Birds». Мы сосредоточимся на том, как создавать объекты и блоки JavaScript Boxbox.js и как с их помощью представлять объекты реального мира.

Начало работы с Boxbox.js и Box2D

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

Boxbox.js - это JavaScript-фреймворк для создания игр. Под капотом он использует движок Box2d, что новичкам на первый взгляд очень сложно разобраться. Boxbox.js помогает упростить процесс создания простых и увлекательных 2D-игр с помощью библиотеки Box2D.

Сначала загрузите и добавьте библиотеки в свой HTML-файл.

Создайте файл index.html и добавьте следующий код.

<html>
  <head>
    <script src="https://github.com/hecht-software/box2dweb/blob/master/Box2d.min.js"></script>
    <script src="https://github.com/incompl/boxbox/blob/master/boxbox.min.js"></script>
  </head>
  <body>
    <main>
      <canvas id="angrybird" width=640 height=380></canvas>
    </main>
    // Added our custom Game
    <script src="AngryBird.js"></script>
  </body>
</html>

Настройка холста

Создайте файл с именем AngryBird.js и вставьте следующий код инициализации.

const canvas = document.getElementById("angrybird");
const ourWorld = boxbox.createWorld(canvas);

Используя объект ourWorld, мы можем вызвать метод createEntity для создания различных типов сущностей или объектов в нашем ourWorld.

Создание наших птиц и наземных объектов

В приведенном ниже случае мы создаем объект круга с именем bird. Как вы уже, наверное, догадались, мы собираемся изобразить нашу птицу в виде круга.

Мы дадим нашей птице следующие свойства ниже и добавим функцию onKeyDown, которая заставляет птицу прыгать при любом нажатии клавиши.

ourWorld.createEntity({
  name: "bird",
  shape: "circle",
  radius: 1,
  imageStretchToFit: true,
  density: 4,
  x: 2,
  onKeyDown: function (e) {
    this.applyImpulse(200, 60);
  },
});

Затем мы создадим еще один объект с именем ground, который будет представлять наш пол. В мире физики, если что-то не блокирует объект или если он не установлен в статическое состояние, гравитация перемещает его вниз под поверхность.

Чтобы не потерять наши сущности, мы создали сущность ground со следующими свойствами. Мы также должны убедиться, что он установлен в статическое состояние, чтобы он не двигался вниз.

ourWorld.createEntity({
  name: "ground",
  shape: "square",
  type: "static",
  color: "rgb(0,0,0)",
  width: 20,
  height: 0.5,
  y: 12.5,
});

Препятствия

Следующий код создает блок, который будет представлять препятствия для нашей птицы. Поскольку мы будем генерировать три блока одного типа, мы создадим объект since для его представления.

const block = {
  name: "block",
  shape: "square",
  color: "red",
  width: 0.5,
  height: 4,
  onImpact: function (entity, force) {
    if (entity.name() === "bird") {
      this.color("black");
    }
  },
};

Используя сгенерированный выше block, мы создаем наши препятствия со:

ourWorld.createEntity(block, {
  x: 15
}

ourWorld.createEntity(block, {
  x: 17
}

ourWorld.createEntity(block, {
  x: 16,
  y: 1,
  width: 4,
  height: .5
}

Финальный код нашей игры

Объединение приведенного выше кода дает нам следующее:

const canvas = document.getElementById("angrybird");
const ourWorld = boxbox.createWorld(canvas);

ourWorld.createEntity({
  name: "bird",
  shape: "circle",
  radius: 1,
  imageStretchToFit: true,
  density: 4,
  x: 2,
  onKeyDown: function (e) {
    this.applyImpulse(200, 60);
  },
});

ourWorld.createEntity({
  name: "ground",
  shape: "square",
  type: "static",
  color: "rgb(0,0,0)",
  width: 20,
  height: 0.5,
  y: 12.5,
});

const block = {
  name: "block",
  shape: "square",
  color: "red",
  width: 0.5,
  height: 4,
  onImpact: function (entity, force) {
    if (entity.name() === "bird") {
      this.color("black");
    }
  },
};

ourWorld.createEntity(block, {
  x: 15,
});

ourWorld.createEntity(block, {
  x: 17,
});

ourWorld.createEntity(block, {
  x: 16,
  y: 1,
});

Если вы все сделали правильно, ваша игра-клон «Angry Birds» должна выглядеть так.

Для следующих шагов вы можете подумать о включении изображений, например, чтобы круг выглядел как птица - или, на самом деле, всего, что вы можете вообразить.

Вывод

В этой статье мы продемонстрировали, как создать простую 2D-игру с помощью JavaScript и как создать клон «Angry Birds» с помощью BoxBox.js.

Источник:

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить