Космический шутер

Давайте создадим космическую стрелялку.

Вы создадите и спроектируете шутер на JavaScript. Пошаговые инструкции проведут вас через HTML, CSS и Javascript. На изображении ниже показано, как будет выглядеть игра.

Оглавление

1. Обзор
2. Как играть в игру
3. Настройка HTML-файла
4. Настроить CSS-файл
5. Игровые изображения
6. Настроить javascript-файл
7. Игровой объект
8. Javascript-функции
9. Цикл игры
10. Конец

Обзор

Это руководство научит вас проектировать и создавать двухмерный космический шутер с помощью Javascript, HTML и CSS. В космическом шутере есть космический корабль и звезды (метеоры). Пользователи могут управлять космическим кораблем и стрелять по звездам. Я расскажу о функционале игры и помогу вам разобраться в создании игр на Javascript. В конце этого руководства у вас будет полнофункциональный шутер, который вы сможете использовать в своем портфолио программистов.

Как играть в космическую игру

Цель этой игры состоит в том, чтобы стрелять во все звезды/метеоры, не подвергаясь нападению. Космический шутер имеет простое управление.

Когда игра загрузится, появится подсказка. Введите «y», чтобы играть.

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

​​

Переместите корабль вверх с помощью стрелки вверх.

Переместите корабль вниз с помощью стрелки вниз.

Двигайтесь вправо с помощью правой стрелки.

Двигайтесь влево с помощью левой стрелки.

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

Демонстрация игры: https://kekhan.github.io/spaceAstroidsGame/spaceAstroids.html

Задайте файл HTML5

Файл HTML содержит элемент холста, на котором отображается графика.

В теге head добавьте ссылку на файл CSS.

Внутри тега body включите тег скрипта javascript внизу.

Присвойте тегу body атрибут onload и назначьте onload для «startGame()». Функция startGame взята из файла javascript.

Внутри тега body включите элемент canvas. Назначьте атрибут id холста элементу холста.

Под элементом холста включите аудиоэлемент. Элемент audio создает звуки для игры. Лазерный объект будет использовать звуковой элемент каждый раз, когда пользователь нажимает пробел.

Изображение ниже структурирует файл HTML:

Вы можете получить доступ к HTML-коду по следующей ссылке:

https://github.com/kekhan/spaceAstroidsGame/blob/master/spaceAstroids.html

Как настроить файл CSS3

Файл CSS стилизует только два элемента HTML. Он стилизует тег body и элемент холста.

Ниже приведен CSS:

#canvas{
background-color: black;
}
body{
margin: 0;
}

Упражнение. Измените фон холста с черного на космическое изображение.

Изображения игр

Эта игра требует космических изображений. Вам нужно изображение космического корабля, камней и лазера. Лучшее место для поиска бесплатных игровых изображений — https://opengameart.org/.

Как настроить файл JavaScript

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

Графика игры отображается в элементе холста. Элемент canvas анимирует двухмерную графику в веб-браузере. Вы можете рисовать красивые изображения на холсте, а элементы холста позволяют этой графике перемещаться. Элемент холста настраивается с помощью следующих двух шагов.

вар холст = документ.getElementById («холст»);

var ctx = canvas.getContext('2d');

холст.ширина = окно.внутренняя ширина;

холст.высота= окно.внутренняя высота;

Что делает игра?

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

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

Прослушиватели событий

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

window.addEventListener(‘keydown’,function(){
 canvas.key=event.keyCode;
 if(canvas.key === 32){
 canvas.key=event.keyCode;
 shoot=true;
 }
})

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

Изменение прослушивателя событий на холст не будет работать. Любое нажатие клавиатуры назначается на canvas.key:

canvas.key=event.keyCode

Следующие прослушиватели событий проверяют, перестал ли пользователь нажимать какие-либо клавиши. Функция присваивает значение false для canvas.key

window.addEventListener(‘keyup’,function(){
    canvas.key= false;
})

Переменные

Космическая игра использует несколько глобальных переменных. Изображение кода показано ниже. Следующие строки поясняют код.

Строка 6: Инициализировать образ космического корабля.

Строка 7: Инициализировать образ для лазера

Line8: Инициализировать изображение для скалы

Используйте .src для каждого инициализированного объекта выше. Строки 9–11 демонстрируют, как назначить источник изображения объекту изображения.

Строка 13: создайте переменную с именем AlienHit (Плавающие камни) и присвойте ей значение 0. Переменная AlienHit (Камни) отслеживает, сколько пришельцев вы поразили лазером.

Игровой объект

В этой игре есть один игровой объект. Игровой объект помогает создавать новые игровые объекты. Например, из одного игрового объекта можно создать космический корабль, камень и лазер. Игровой объект принимает 11 параметров. Ниже приведены параметры игрового объекта:

Img: URL-адрес изображения объекта.

x: параметр x определяет положение объекта по оси x.

Y: Параметр x определяет положение объекта по оси Y.

Ширина: Параметр ширины хранит ширину объекта.

Высота: высота объекта

isBullet: логический параметр, определяющий, является ли объект пулей.

isShip: логический параметр, определяющий, является ли объект кораблем.

isComet: параметр TBoolean для определения, является ли объект кометой.

цвет: Цвет объекта

Dx: dx - скорость объекта

Dy: dy — это скорость объекта по оси Y.

Внутри функции Component (игровой объект) привяжите каждый параметр к this. Этот объект обеспечивает глобальный доступ к игровым переменным и функциям.

Функции игровых объектов:

Игровой объект имеет несколько функций. Эти функции выполняют обновления и коллизии игры. Следующие функции являются независимыми игровыми объектами:

1. это.рисовать
2. this.collisionShipStars
3. это.столкновение
4. это.обновление

This.draw: функция draw использует метод drawImage из API Canvas 2d для рисования игровых изображений для каждого игрового объекта, который вызывается с помощью this.draw. Например, изображение корабля рисуется при вызове ship.draw().

This.collisionShipStar: игровая функция CollisionShipStart проверяет, сталкивается ли каменный объект с кораблем; если он попадает, игра окончена, и функция вызывает функцию воспроизведения снова. Используйте метод fillText, чтобы отобразить сообщение о завершении игры внутри элемента canvas.

This.collision: эта функция проверяет, попали ли лазеры в камни.

Строка 74: Первая часть условной проверки проверяет, меньше ли позиция х скального объекта, чем позиция лазера по оси х плюс ширина лазера.

Строка 79: присвойте AlienHit (Плавающие Скалы) плюс один

строка 82 — строка 86: присвойте ширину, высоту, x, y, dx и dy равным 0. Эти переменные присваиваются нулю и удаляются из области холста.

This.update: функция обновления обновляет позиции, скорости и вызывает функцию рисования для каждого игрового объекта. Если игровой объект является лазером, возникает условное выражение для лазера, и то же самое происходит для каждого объекта.

Строка 100: Создайте условный оператор, чтобы проверить, является ли объект пулей/лазером.

Строка 102: Создайте условный оператор, чтобы проверить, нажата ли клавиша пробела.

Строка 116: Создайте еще один оператор условия, чтобы проверить, является ли игровой объект кораблем.

Строка 140: Создайте условный оператор, чтобы проверить, является ли объект камнем.

Обновите скорость: y и скорость: x для камня и увеличьте позиции x и y до скорости.

Вызовите метод draw и метод collageshipstar внутри условного оператора isComet.

Функции JavaScript

​​startGame

Функция запуска игры спрашивает пользователя, хотят ли они играть, и вызывает функцию анимации.

Используйте встроенный метод приглашения javascript для пользовательского ввода.

Функция звука

Звуковая функция принимает параметр с именем src. Звуковая функция получает элемент с идентификатором музыки из HTML-файла.

функция playAgain

Функция повторного воспроизведения выводит подсказку, в которой пользователю предлагается воспроизвести еще раз. Если пользователь вводит «y», игра перезагружается. Если пользователь вводит «n», игра останавливается.

Строка 232: Создайте условный оператор, который проверяет, превышает ли пользовательская оценка исходное количество камней.

Строка 233: Создайте метод приглашения javascript, который принимает строку.

Строка 234: создайте условный оператор для быстрого ввода данных пользователем. Если введено значение y, игра загружается с помощью location.reload().

Инициация игрового объекта

В глобальной области действия и над функцией анимации необходимо создать игровые объекты.

Строка 183 — Строка 184: создание игровых объектов

Строка 196: создайте цикл for, который начинается с 0 и заканчивается начальным количеством камней и увеличивается на 1.

Строка 197: Присвойте dx случайное число скорости.

Строка 198: Назначьте день случайному числу, используя Math.random()*2, число от 1 до 2.

Создайте переменную для хранения положения звезды по оси X и назначьте ее случайному числу (точке) в области ширины холста.

Подобно положению звезды по оси x, напишите тот же код для создания и назначения положения звезды по оси y.

Используйте звездный массив, чтобы добавить звездные объекты. Создайте объекты состояния внутри метода push(). Обязательно используйте указанные выше переменные для параметров звездного объекта.

Цикл игры

Анимировать

API холста имеет встроенный цикл анимации. Вы можете использовать цикл событий, но цикл анимации

является более эффективным.

Строка 211: вызовите встроенный requestAnimationFrame с функцией анимации в качестве параметра. Анимированная функция продолжает вызываться до тех пор, пока игра не закончится.

Строка 212: Элемент холста необходимо очистить после обновления графики. Вызовите метод clearRect, чтобы очистить область холста, и задайте ему следующие параметры:

These parameters clear the canvas.
x position: 0
y  position:0
Width: canvas.width
Hight: canvas.height

Строка 216: цикл for выполняет итерацию по списку звездных объектов.

Строка 222: Каждый звездный объект должен обновить свою позицию в элементе холста.

Строка 223: Вам нужно вызвать метод столкновения для каждого звездного объекта.

Строка 228: После цикла for вызовите метод update для объекта корабля.

Конец

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