Найти тему

Wick Editor: пишем игру "Динозаврик" на JavaScript

#wickEditor #gravity #clones

Wick Editor - это простой редактор с открытым исходным кодом для создания анимации и игр. Редактором можно пользоваться без регистрации.

Ссылка: https://www.wickeditor.com/editor/

Создадим простую игру, похожую на встроенную в Google Chrome игру "Динозаврик".

Для начала нужно загрузить (или нарисовать) подходящие картинки:

-2

Сначала добавим фон (простым перетаскиванием):

-3

Всего у нас будет использоваться два кадра, поэтому фон тоже нужно растянуть на два кадра:

-4

Закрепим фон, нажав на замок:

-5

Добавим новый слой для остальных персонажей и перетащим его поверх слоя с фоном:

-6

Добавим Динозавра и Черепаху на первый кадр:

-7

И надпись Game Over на второй кадр:

-8

Итого, у нас должно получиться два кадра:

-9

Если сейчас нажать на кнопку Play, то мы увидим анимацию из этих двух кадров. Чтобы на экране оставался только первый кадр, мы должны написать первый скрипт. Щелкнем мышкой по первому кадру:

-10

И выберем скрипт, который будет выполняться по умолчанию (Панель справа):

-11

В открывшемся окне редактора кода напишем команду:

-12

Дадим имена нашим героям:

Динозавр:

-13

Черепаха:

-14

Научим Динозаврика подпрыгивать. Щелкнем мышкой по Динозаврику и создадим для него скрипты:

-15

Сначала в скрипт Default запишем, что он стоит (то есть координаты не меняются), а также запомним его координату y:

-16

Добавим скрипт Update:

-17

Затем, в скрипт Update запишем, что скорость меняется с учетом гравитации:

-18

Теперь нужно сделать так, чтобы Динозавр не проваливался сквозь землю. Допишем в скрипт Update:

-19

Сделаем также, чтобы Динозавр не выпрыгивал за кадр:

-20

Динозавр будет подпрыгивать при нажатии на клавишу Пробел. Добавим скрипт KeyDown:

-21
-22

Динозаврик таже будет создавать клонов Черепашек. Допишем в скрипт Update:

-23

Клоны должны двигаться. Создадим скрипт Update для Черепашки и напишем код:

-24

Если Динозавр коснулся Черепахи - проигрыш. Допишем в скрипт Update для Черепахи:

-25

Добавим счет с помощью инструмента "Текст":

-26

Назовем его s:

-27

Создадим переменную счет:

Перейдем на первый кадр (щелкнем по нему):

-28

Откроем скрипт Default и допишем:

-29

К счету будет добавляться единичка, если Динозавр перепрыгнул через черепаху, то есть она дошла до конца пути. Допишем скрипт Update для Черепахи:

-30

Вот и все. Теперь можно сделать экспорт игры в html, выложить на github и поделиться ссылкой с друзьями.

Здесь можно поиграть: https://polzets.github.io/dino/

Здесь скачать файл с кодом (открывать в Wick Editor): https://drive.google.com/file/d/1PEajjaMUr5Vs7bdrj7BKlQGa5SFj_sf9/view?usp=sharing

Спасибо за дочитывание, лайк и подписку.