3 подписчика

Java Script. Космическая стрелялка. Туториал. Часть 1.

3 сентября 20193 сен 2019

8 мин

Оглавление

1. Давайте начнём.
2.Корабль игрока.
3.Огонь

(Перевод статьи:

http://clockworkchilli.com/tutorials/top_down_shooter.html)

< Хочу начать серию переводов со статьи о создании космической стрелялки с видом сверху на Java Script, используя библиотеку WADE JS ©HD4E >

Это пошаговое руководство для создания простой стрелялки с видом сверху с помощью библиотеки WADE JS.

Загрузить исходный код можно отсюда.

Также есть видео руководство (< На Английском >) где игра создается полностью на сайте из редактора.

1. Давайте начнём.

Давайте начнём с создания где-нибудь в вашей директории новой папки и скопируем WADE файлы в неё. На момент написания последняя версия - это WADE 1.0

(< Сейчас последняя версия WADE 4.0.1 ©HD4E>)

Загрузите zip-файл c сайта clockwork chilli's, и распакуйте wade_1.0.js

(< В нашем случае wade_4.0.1.js ©HD4E>)

, index.html и style.css в вашу папку с игрой. Я так же создам папку images в нашей папке с игрой. Далее мы создадим новый пустой файл в нашей папке с игрой и назовём его shooter.js, в которой будет находится наша игра. Теперь давайте откроем и отредактируем файл index.html, изменив линию в которой написано:

wade.init('app.js');

поменяв её на:

wade.init('shooter.js');

Теперь в файле shooter.js мы создадим наш WADE приложение. Итак:

App = function()
{
};

Внутри функции App, мы создадим фунции load и init, вот так:

App = function()
{
this.load = function()
{

};

this.init = function()
{

};
};

2.Корабль игрока.

Давайте начнем с установки фиксированного разрешения для нашего проекта (709 x 398) в функции init, просто создайте эти строки:

this.init = function()
{

// Установка минимального размера области прорисовки
wade.setMinScreenSize(708, 398);

// Установка максимального размера области прорисовки
wade.setMaxScreenSize(708, 398);
};

Первая вещь, которую мы хотим сделать это создать под-папку images в нашей папке с игрой. Затем мы загружаем картинку с изображением корабля для игрока, которую мы собираемся использовать. Я загрузил одно изображение с сайта и сохранил его как ship.png в папке images.

(< Можете сохранить изображение ниже … ©HD4E>)

После этого, в функцию load вставляем код:

this.load = function()
{

// Загрузка изображения из папки images
wade.loadImage('images/ship.png');
};

Далее мы создадим объект который будет использовать эту картинку. Я собираюсь определить переменную ship в самом вверху нашей функции App. Определяя эту переменную тут, я открываю доступ к ней для любой дочерней функции, которая находится в функции App:

var ship;

Теперь давайте добавим следующий код в нашу init функцию:

// Создаём новый спрайт с нашим изображением корабля

var sprite = new Sprite('images/ship.png');

// создаем новый объект сцены с нашим спрайтом
ship = new SceneObject(sprite, 0, 0, 0);

// Добавляем объект на сцену
wade.addSceneObject(ship);

Теперь если вы откроете index.html в браузере, вы должны увидеть изображение вашего корабля:

(<По причинам безопасности браузеры блокируют загрузку локальных файлов. Но мы можем обойти это, запустив нашу игру через Chrome.

Для этого создайте ярлык для запуска Chrome и зайдите в его свойства. Далее на вкладке ярлык в строке — Объект после записи:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

вставтье через пробел эти строки: --allow-file-access-from-files

Далее запускаем index.html через Chrome ©HD4E>)

Этого не так много, но это начало! Теперь давайте заставим его двигаться, с помощью функции onMouseMove, которую мы добавим внутри нашей App функции:

this.onMouseMove = function(eventData)
{

// Установка позиции = координатам мышки
ship.setPosition(eventData.screenPosition.x, eventData.screenPosition.y);
};

Эта функция будет перемещать корабль, устанавливая его позицию на текущую позицию мышки(вы можете попробовать это обновив вашу страницу в браузере). Однако нам наверное нужно так же установить начальную позицию, на начальную позицию мышки. Давайте изменим содержимое нашей init функции на этот код:

var sprite = new Sprite('images/ship.png');

// получаем позицию мышки
var mousePosition = wade.getMousePosition();
ship = new SceneObject(sprite, 0, mousePosition.x, mousePosition.y);
wade.addSceneObject(ship);

Заметьте что мы здесь использовали «мышь», отвечая на событие onMouseMove, и запрашивая позицию мышки. Однако WADE будет автоматически переводить всё это, чтобы всё также работало на touch-screen устройствах, где мышь отсутствует и игроки вместо этого будут использовать свои пальцы.

3.Огонь

Теперь давайте выпустим несколько пуль. Мы захотим сделать это по нажатию кнопки мыши(или когда палец находиться на экране), и для простоты мы собираемся реализовать систему автоматического огня, так чтобы мы продолжали стрелять так долго, как долго будет удерживаться кнопка мыши или палец на экране. Нам нужна разновидность main loop (главной петли), или функции, которая будет выполняться на каждом шаге(т.е. несколько раз за секунду) с помощью WADE.

За это отвечает функция:

wade.setMainLoop (callback, name, priority)

Мы можем сделать это добавив петлю в init функцию, например:

wade.setMainLoop(function()
{
// код который будет выполняться несколько раз за секунду
}, 'fire');

Как вы можете видеть мы создали функцию( которую мы заполним кое-каким кодом) и мы говорим WADE, что этот код должен быть выполнен для каждого основного цикла(main loop) (и мы назовем эту конкретную main loop — 'fire', подробнее об этом позже). Сейчас добавим некоторый код в эту функцию:

wade.setMainLoop(function() {

// Если мышка нажата, то выполняется следующий код ...

if (wade.isMouseDown())
{

// получаем позицию корабля
var shipPosition = ship.getPosition();

// получаем размер корабля
var shipSize = ship.getSprite().getSize();

// создаем спрайт снаряда
var sprite = new Sprite('images/bullet.png');

// создаём объект снаряда из нашего спрайта, с заданными координатами впереди корабля
var bullet = new SceneObject(sprite, 0, shipPosition.x, shipPosition.y - shipSize.y / 2);

// добавляем снаряд на сцену
wade.addSceneObject(bullet);

// двигаем снаряд в заданную позицию, со скоростью 600
bullet.moveTo(shipPosition.x, -500, 600);
}

} , 'fire');

(<Вы должны будете добавить изображение снаряда (формат png) в папку images. И назвать его bullet.png

Также нужно добавить код загрузки изображения:

this.load = function()
{

// код загрузки изображения снаряда
wade.loadImage('images/bullet.png');
};

©HD4E>)

Как вы можете видеть, когда мышь нажата, я создаю новый спрайт снаряда на позиции корабля(на верху спрайта корабля, если быть точно). Затем я двигаю его наверх со скоростью 600 единиц в секунду. Если вы попробуете запустить этот код, то вы увидите, что корабль стреляет много снарядов когда нажата кнопка мыши, важно, что эти снаряды будут жить вечно, поскольку мы никогда не удалим их. Так давайте добавим еще пару строк кода после того, как мы говорим снаряду двигаться:

// когда снаряд закончит движение, выполниться следующий код

bullet.onMoveComplete = function()
{

// удаляем объект нашего снаряда со сцены
wade.removeSceneObject(this);
};

Этот код гарантирует, что снаряды будут удалены, когда они достигнут их места назначения(которое мы установили, примерно, -500 единиц вдоль оси Y, где то над верхней части экрана). Но мы хотим стрелять меньше снарядов: нам нужно определить скорострельность(как много снарядов в секунду) и мы должны отслеживать, когда мы в последний раз стреляли. Итак вверху нашей App функции будет код:

var lastFireTime = 0;
var fireRate = 5;

И этот код должен быть в начале нашей основного цикла(петли) с названием— fire:

// время прошлого выстрела + 1/5 секунды

var nextFireTime = lastFireTime + 1 / fireRate;

//получаем текущее время
var time = wade.getAppTime();

// проверка прошла ли 1/5 секунды
if (wade.isMouseDown() && time >= nextFireTime)
{

//устанавливаем текущее время момента выстрела
lastFireTime = time;
// далее идет код создания снаряда
}

Теперь наш корабль стреляет 5 снарядов в секунду, это то что нам нужно.

(< Окончательный код на данном этапе будет выглядеть так:

App = function()
{
var ship;
var lastFireTime = 0;
var fireRate = 5;

this.load = function()
{
wade.loadImage('images/ship.png');
wade.loadImage('images/bullet.png');
};

this.init = function()
{
wade.setMinScreenSize(708, 398);
wade.setMaxScreenSize(708, 398);

var sprite = new Sprite('images/ship.png');
var mousePosition = wade.getMousePosition();
ship = new SceneObject(sprite, 0, mousePosition.x, mousePosition.y);
wade.addSceneObject(ship);

wade.setMainLoop(function()
{
var nextFireTime = lastFireTime + 1 / fireRate;
var time = wade.getAppTime();

if (wade.isMouseDown() && time >= nextFireTime)
{
lastFireTime = time;
var shipPosition = ship.getPosition();
var shipSize = ship.getSprite().getSize();
var sprite = new Sprite('images/bullet.png');
var bullet = new SceneObject(sprite, 0, shipPosition.x, shipPosition.y - shipSize.y / 2);
wade.addSceneObject(bullet);
bullet.moveTo(shipPosition.x, -500, 600);