Как создать анимацию с помощью simpleGame. js Ваша игра HTML5 - манекены

Возможно создать библиотеку, которая упростит все различные функции движка HTML5. Подумайте об использовании библиотеки: simpleGame. JS. Эта библиотека проста в использовании и полностью способна к сложной разработке игр. Чтобы начать работу, вам действительно нужно понять только два объекта:

• Сцена: Этот объект начинается с объекта HTML canvas и добавляет основной цикл. Сцена - объединяющий объект, который контролирует игру.

• Спрайты: Эти объекты являются элементами, которые перемещаются по экрану. Большинство элементов игры - спрайты. Каждый спрайт должен принадлежать к одной сцене, но вы можете иметь столько спрайтов, сколько хотите. Спрайт основан на изображении.

  

Этот код на самом деле намного сложнее, чем выглядит. Вот что он делает:

• Он добавляет холст к странице. Серого прямоугольника на самом деле является тегом холста, который был автоматически добавлен на страницу.

• Он начинает игровой цикл. Эта программа имеет игровой цикл, который уже работает со скоростью 20 кадров в секунду.

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

• Мяч движется. Он автоматически переносится на другую сторону экрана, когда он выходит с одной стороны.

Вот список всего кода:

redBall. html // простая игра с одной движущейся шарой var scene; var ball; function init () {scene = new Сцена (); ball = new Sprite (сцена, «redBall. png», 50, 50); мяч. setMoveAngle (180); мяч. SetSpeed ​​(3); место действия. start ();} // end init function update () {scene. Чисто(); мяч. update ();} // end update

Вы начинаете с базовой страницы HTML5 и добавляете несколько функций, чтобы превратить ее в игровую среду.

Как создать свою страницу игры

Начните с создания базовой страницы:

1. Начните с страницы HTML5.

   Вы можете использовать те же инструменты, которые вы использовали для своей другой веб-разработки. Создайте базовый шаблон HTML5, как и для любого другого документа HTML5.

2. Импортировать simpleGame. js library.

   Эта библиотека доступна бесплатно с сайта. Используйте тег для импорта библиотеки. Задайте для свойства src имя библиотеки (simpleGame. Js).

3. Держите HTML простым.

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

4. Вызов init () при загрузке тела.

   Очень часто возникает функция, называемая при загрузке тела. Добавьте onload = "init ()" в тег body, чтобы вызвать метод init ().

5. Создайте второй тег скрипта, который будет содержать ваш код.

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

6. Поместите две функции в свой скрипт.

   Все программы simpleGame будут иметь как минимум две функции: init () происходит при запуске, а update () происходит один раз за кадр.

Как инициализировать игру

Часть инициализации игры происходит при загрузке страницы. Это в основном связано с настройкой спрайтов и других ресурсов. Вот код:

var scene; var ball; function init () {scene = new Сцена (); ball = new Sprite (сцена, «redBall. png», 50, 50); мяч. setMoveAngle (180); мяч. setSpeed ​​(3);} // end init

В большинстве игр будет использоваться аналогичный стиль инициализации. Вот как вы создали игру:

1. Определите переменную, чтобы содержать сцену.

   В каждой игре simpleGame будет хотя бы один объект сцены. Определите сцену вне любых функций, поэтому она доступна для всех. Фактически вы создадите сцену внутри функции init ().

2. Определите переменную для каждого спрайта.

   Каждый спрайт в вашей игре должен также принадлежать к глобальной переменной. Вы создадите спрайты в функции init (), но вам нужно сделать переменную доступной для всех функций.

3. Создайте функцию init ().

   Эта функция вызывается тегом onload. Он будет запущен после загрузки страницы в память.

4. Создайте сцену.

   Чтобы создать сцену, создайте экземпляр класса сцены. То, что вы на самом деле говорите, это «Сделать объект« Сцена »и назвать сцену этого конкретного экземпляра. «Сцена не требует никаких параметров.

5. Создайте шарик спрайта.

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

6. Установите угол движения шарика.

   Вы можете изменить угол перемещения шара. Углы измеряются в градусах, как на карте.

7. Установите скорость движения шара.

   Вы также можете определить скорость мяча.

8. Запустите сцену.

   Когда вы закончите настройку, скажите, чтобы сцена начала.

Обновление игровой анимации

После запуска сцены начнется таймер. Двадцать раз в секунду он будет вызывать функцию на вашей странице с именем update (). Таким образом, у вас должна быть такая функция, и для ее запуска требуется некоторый код для вашей игры.

Функция update () также не слишком сложна.

функция update () {scene. Чисто(); мяч. update ();} // end update

Функция update () обычно выполняет три функции:

• Очищает предыдущий экран: Первый порядок бизнеса - это очистка любого беспорядка, вызванного последним экраном. Объект Scene имеет функцию clear () для этой цели.

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

• Обновляет каждый спрайт: Последняя часть обновления экрана обновляет спрайты. Когда вы обновляете спрайт, он будет рисовать свое новое положение.

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