Kwert-soft.ru

IT Софт для ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как написать игру на javascript

Пишем игру на JavaScript, наконец-то до конца! (ну или типа того. )

Перед тем, как перейти к делу, небольшое вступление. Этот пост я решил написать по трём причинам:

  • Я хочу поделиться с читателями и сам структурировать данные по полученному результату в своей голове
  • Я так и не нашёл ни одной статьи про геймдев на JavaScript, которая была бы дописана до конца
  • Я таки корыстно хочу получить инвайт 🙂

Я надеюсь, что люди, которые решат ознакомиться с этим материалом, имеют базовое представление о работе c html, javascript и элементом canvas… Эй… Эй! Ну куда же вы!? Стойте, стойте! Не пугайтесь, я всё равно всё разжую, просто уберу это под спойлеры.

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

«… — Это пока прототип. — Прототип? — Да, прототип… »

Нет, правда, чем больше ссылок и комментариев по коду, тем радостнее я буду. Серьёзно изучать JS я начал с этого проекта, по этому он сырой и не оптимизированный. Конечно, пока это не совсем игра, а скорее технчиеское демо, но это уже больше информации, чем я получил из статей по разработке игр на Хабре (да и, честно говоря, вообще в интернете). Всё гуглилось по ходу дела, все алгоритмы движения я сочинял сам, попутно вспоминая школьный курс тригонометрии. После такого долгого оправдания, для самых нетерпеливых даю ссылку на тех. демо (да, пожалуй остановлюсь на этом термине)

И ещё раз перед самым хабракатом: я не профи и не гуру, я только учусь, если Вам кажется, что я где-то неправ, пожалуйста, не сливайте меня без объяснения причин, мне будет очень интересно узнать что именно не так. А так же Ваш гневный комментарий сбережёт других читателей от ошибки пользования моим мануалом не вникая в суть 🙂 Ну, поехали!

Для начала самое простое. Конец.

Итак, мы будем делать не самый изощрённый симулятор железной дороги. В 2D, вид сверху, графику будем собирать из блоков 64 х 64px.

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

Или нет? На собственном опыте я очень хорошо понял, что сразу бросаться в бой не стоит, хорошенько продумайте структуру будущей игры и размещение файлов. Думайте над тем, как называете функции и переменные. Думайте, какие именно аттрибуты в ваши функции можно и нужно передавать. Не начинайте писать ваши замечательные функции как придётся, с мыслью «поправлю потом». У меня таких «поправлю» до сих пор в достатке, о каждой я обязательно расскажу.

… сначала мы, конечно же, создадим html-документ примерно следующего вида:

Тут всё очень просто. Тэг html без доп. пояснений в новых стандартах сообщает браузеру, что нужно двигаться в светлое будущее с HTML5. Тэг canvas будет нашим будущим полотном для работы, а параметр id поможет обратиться к нему с помощью javascript. Так же тут есть много src тегов, какие-то странно обозванные div-ы, и даже один input. На что кто и где ссылается и почему именно в таком порядке, я объясню чуть позже

Ну так вот, давайте-ка для начала подумаем, какая перед нами сейчас стоит задача:

  • Загрузить наши картинки-блоки
  • Написать скрипт для отрисовки основных элементов (на данном этапе только игрового поля)
  • Отрисовать само поле

Итак, уже видно, что можно с чистой совестью создавать три отдельных .js файла. В моём случае это были image_load.js, trains_main.js, trains_playgr.js

Перед подробным разбором кода, расскажу, как имено будем рисовать игровое поле. Для 2д-вид-сверху-игр оптимальным мне кажется следующий вариант: представляем игровое поле в виде квадратной матрицы A[m,n], где каждая клетка A[i,j] это поле определённого типа со своими свойствами. Далее пишем (или генерируем, есть у меня желание такое реализовать, но не добрался пока) нужную нам матрицу и проходимся по ней циклом, рисуя в нужных местах нужные картинки. Вот так, легко и просто. Более подробно для симулятора поезда значения для матрицы у меня следующие:

ЗначениеЧто это?
пустая клетка (трава)
1прямой участок Запад-Восток
2прямой участок Север-Юг
3поворот Юг-Восток
4поворот Юг-Запад
5поворот Север-Запад
6поворот Север-Восток

image_load.js

Сам код тут прост до безобразия, я даже не уверен, что он требует каких-то комментариев:

Создаём объект изображение, присваиваем его аттрибуту src (источник) ссылку на нужную картинку. У меня они лежали в папке src/img, как видно из кода.

Как же так? В таблице аж семь значений, а тут всего три картинки! Но если подумать, больше нам и не нужно, все остальные мы можем получить, повернув исходные railsTurnUL (изображение поворота) и railsStraight изображение прямого участка рельс. Об этом чуть дальше.

Код ерунда, что важно, так это размещение тэга script со ссылкой на этот код в html документе. Вместо использования onload-ов для этих объектов вместе с функциями для подсчёта все ли картинки загрузились, я просто решил разместить тэг script в шапке html документа, а весь остальной код, как обычно, под тегом canvas.

Читать еще:  Словарь на ошибки
(Вот тут я, кстати, не уверен, что действую правильно, но подробного разбора подобных ситуаций найти не удалось, да и данный способ ни разу не давал сбоев, возможно в следующих версиях я таки добавлю счётчик объектов)
trains_main.js

Вот тут уже становится чуть интереснее:

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

На самом деле эта функция делает буквально следующее:

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

trains_playgr.js

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

С полем покончено

Вот и всё! Вызов функции drawField(playgr_1); нарисует нам поле с назначенными элементами.

А теперь немного об этих «потом поменяю» элементах, о которых я говорил чуть выше. Так вот, проблемы есть прямо в функции drawField, менял я её прямо по ходу написания этой статьи, а дело в том, что в неё нельзя было передать массив с полем, он в тупую задавался прямо в функции. Думаю не стоит объяснять, почему это плохо, ну или как минимум неудобно.

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

Прибытие поезда на вокзал Ла-Сьота́

Иии… нет. Прости, Хабр, я честно хотел написать одну большую статью, но это слишком сложно. Писать обучающие статьи оказалось много труднее, чем я думал сначала (на эту я потратил где-то пять часов). Поэтому я предлагаю договор: если эта статья «пойдет», если вам понравится, я обещаю, учитывая всю критику, написать вторую часть как можно быстрее, а в ней будет самое интересное — тонкости просчёта движения и вывода картинки на экран, разжёвывание моего нелепого алгоритма движения поезда, ну и конечно прохладные истории про муки моего вечно спящего мозга при сочинении механики движения поезда по рельсам.

Спасибо Никите Москвину за графику для игры 🙂

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

Разработка игр на JavaScript: реально и безболезненно

Почему JavaScript?

Масса людей думает, что все крутые игры (God Of War, Assassin’s Creed, Skyrim, добавь по вкусу) созданы на C++. Это отчасти так. В проекте принимают участие сотни специалистов из разных отраслей, в том числе и разработчики, юзающие другой язык – обычная распространенная практика.

Некоторые классные игры написаны на “непопулярных” языках программирования, и это нормально. Если ты работаешь с JavaScript, то не нужно после этой статьи бросаться изучать “плюсы”, оставайся с JavaScript.

Существуют Unity, Unreal Engine, CryEngine и прочие классные решения для создания игрушек, и если тебе удобно развлекаться с ними – пожалуйста. Поэтому нет никакой разницы, на чем ты будешь кодить, но в нашем случае речь пойдет о JS-фреймворках.

Основы

Прежде чем мы перейдем к рассмотрению фреймворков для создания игр, следует изучить существующие технологии. Один из вариантов – HTML5. Начиная с 5-й версии спецификации, HTML возымел тег , который позволяет создавать контекст для рисования на веб-странице.

Не нужно забывать о творении команды Khronos Group. WebGL – это веб-версия спецификации OpenGL ES, позволяющая разработчикам общаться с видеокартой через браузер (поверь, лучше не знать, как это работает).

Таким образом, можно создавать 2D и 3D сцены на GPU (что эффективнее, чем на CPU). Супер! Но если взглянуть на код JavaScript, использующий эти технологии, тебе поплохеет.

Поэтому давай разбираться с фреймворками, оберегающими нас от canvas и абстрагирующими от WebGL.

2D Frameworks

PixiJS

Этот инструмент можно назвать 2D-рендером WebGL. Это означает, что данная библиотека включает в себя множество функций, предназначенных для эффективной отрисовки 2D-сцен и объектов. Так проще сосредоточиться на создании программного кода, а хардкорные “низкоуровневые” вещи оставить разработчикам PixiJS.

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

Если ты планируешь создать что-то большее, чем анимация, то поищи дополнительные библиотеки для других частей игровой разработки (физика, масштабирование, tilemaps и т. д.).

ExcaliburJS

Здесь у нас полноценный игровой фреймворк, написанный на Typescript. Полная система сцен и камер, спрайты и анимации, звуки, физика и т. д. – все, что пожелаешь. Многим очень нравится API, предоставляемый ExcaliburJS, т. к. с ним уютнее.

Читать еще:  Java lang runtimeexception что это

Это связано с тем, что создатели продукта из мира веб (некоторые являются веб-разработчиками, другие — DevOps), поэтому большинство шаблонов и подходов – это штуки, которые уже популярны в веб-разработке. Если тебе близка веб-разработка, попробуй этот инструмент.

ImpactJS

ImpactJS начал свой путь со звания “Первый фреймворк для веб-игр”. Большинство фреймворков, рассмотренных ранее, были просто экспериментами, а не коммерческим продуктом. Этот опенсорсный претендент распространяется бесплатно и поставляется с хорошим редактором уровней.

Фреймворк не является самым понятным или документированным, но его надежность уже доказана. Например, разрабы из CrossCode взяли за основу форкнутую версию Impact для своего движка за его производительность и способность масштабироваться под конкретную задачу.

CreateJS

CreateJS – это набор модульных библиотек и HTML5-инструментов, работающих асинхронно или параллельно в зависимости от ситуации.

Инструмент предоставляет все, что нужно для создания игры с нуля, с помощью отдельного модуля языка JavaScript. Например, для рендеринга можно взять PixiJS, а для работы со звуковыми материалами SoundJS и т. д.

PhaserJS

И напоследок самый популярный – PhaserJS. Это мощный набор инструментов для создания веб и мобильных игр. Этот фреймворк имеет огромное и активное сообщество – каждую неделю эти ребята выкладывают много новых статей, демо и туториалов, основанных на PhaserJS. Это обеспечивает отличное подспорье для людей, делающих свои первые шаги в геймдеве и нуждающихся в наставлениях. А еще, начиная с 3-й версии, это один из самых производительных игровых фреймворков.

3D Frameworks

ThreeJS

ThreeJs – самая популярная 3D-библиотека. Она предлагает наборы функций для выполнения общих операций, которые должны происходить в 3D-сцене. Все мероприятия происходят на более высоком уровне, чем raw WebGL, и не надо заморачиваться с горой низкоуровневых действий.

BabylonJS

Этот фреймворк похож на предыдущий, но имеются различия:

  • API меняется каждые 3 месяца, что помогает при поиске старых решений в интернете;
  • активное и полезное сообщество;
  • продуктивные и отзывчивые разработчики (у Three.js самый старый баг на GitHub датируется 2013 годом, в Babylon.js отмечен два дня назад);
  • The playground – это отличный инструмент для быстрого “опробования” кода, объяснения проблемы и оказания помощи.

Литература

Как в любом уважающем себя мануале, далее идет подборочка книг по теме.

Кстати, у нас есть очень крутая статья по книгам для геймдэва – рекомендуем!

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

Пишем игру на HTML5/JS

На выходных нашлось немного свободного времени и я решил попрактиковаться в gamedev разработке. Давно собирался написать какую-нибудь игрушку, но все руки не доходили. Бегло пробежался по сети в поисках как это делают настоящие гуру. Мне понравилась вот эта статья. За основу своей будущей игры я взял фреймворк автора статьи.

Начало

  • sprite.js — библиотечка работы со спрайтами
  • resources.js — подгрузка ресурсов
  • input.js — библиотека ввода с клавиатуры
  • app.js — основной файл игры

Далее буду рассказывать только о файле app.js . Разберем его содержимое.

Для плавности анимации будем использовать requestAnimationFrame . Подробно о нем ознакомиться можно здесь

Разделим разработку нашей игры на несколько этапов:

  1. Создание и инициализация холста (canvas) на странице
  2. Добавление основной функции-цикла игры
  3. Инициализация и рендер объектов и ресурсов игры
  4. Обработка событий ввода пользователя
  5. Математика и расчет столкновений объектов в игре
  6. Окончание и перезагрузка игры

Этап 1. Создание и инициализация холста

Первым делом что мы должны сделать — это создать canvas элемент и добавить его к тегу body основной страницы игры.

  • Создаем объект canvas
  • Указываем, что мы создаем 2D игру (далее будем использовать везде в коде объект ctx )
  • Задаем размеры холста
  • Добавляем холст к тегу body на странице

Этап 2. Добавление основной функции-цикла

Основной цикл необходим для обновления и рендера игры.

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

Этап 3. Инициализация и рендер объектов и ресурсов игры

Используем resource.js для загрузки ресурсов в игру. Хорошим правилом является добавить все изображения в 1 спрайт, но т.к я рисовал не сам, а брал готовые картинки, поэтому я решил с этим на заморачиваться, тем более, что в данном случае это не столь критично. Так это выглядит в коде

В функции init загружаем мир и добавлеем хэндлер кнопки reset , после game over.

Начальное состояние

Обновление состояния игрового процесса

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

Здесь же используем sprite.js . Всю функцию можно посмотреть в исходниках.

Этап 4. Обработка событий ввода пользователя

Наш герой должен уметь двигаться вверх, вниз, влево, вправо. Соответственно привожу ниже реализацию данного решения

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

Читать еще:  Javascript работа с базой данных

Этап 5. Математика и расчет столкновений объектов в игре

Анимация персонажей, математика движения пуль, и логика движения NPC в игре описаны в функции updateEntities . Вот тут как раз нам и потребуются базовые знания линейной алгебры.

Логика обновления анимации спрайтов башни. И создаем патроны для каждой башни в своем массиве.

Динамика пуль башни:

Напомню, что нашей целью было чтобы башни стреляли случайным образом во всех направлениях.

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

Полный код функции updateEntities можно посмотреть в исходникак на GitHub.

Математика расчета столкновений хорошо описана в статье автора (раздел Collision Detection) используемого мной 2d бутстрапа.

Этап 6. Game Over и рестарт

Когда пауки доползают до нашего героя наступает конец света игры.

Показываем окно GAME OVER и кнопку «Начать заного». Кликаем ее и все начинается сначала 🙂

Заключение

В итоге, я для себя понял, что в gamedev много плюсов:

  • Весело и интересно проводишь время
  • Повторяешь курс школьной геометрии. Если игра серьезней, то и универ вспоминаешь 🙂
  • Практика программирования игр
  • Удовлетворение от проделанной работы

Посмотреть исходники можно тут, поиграть здесь.

10 крутых игр на JavaScript до 13кб кода

В этой веселой статье мы познакомимся с удивительным игровым челленджем JS13K. Это ежегодный конкурс по программированию, в котором супер талантливые разработчики JavaScript демонстрируют игры, которые они создали с помощью JavaScript и использовали всего 13 КБ кода или даже еще меньше.

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

OnOff

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

Everyone’s sky

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

Underrun

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

Konnekt

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

Super Chrono Portal Maker

Этот платформер, представляющий собой оригинальную игру Super Mario, предлагает 30 уровней, в которых нужно бегать и прыгать. Каждый уровень вводит все больше игровой механики, делая игру супер увлекательной. Существует также конструктор уровней, создавайте свои уровни и делитесь с ними с друзьями.

Offline Paradise

Быстро развивающийся платформер, где вам нужно бегать, прыгать или разбивать различные препятствия. Отличная особенность этой игры — автоматическое создание точки сохранения, которая вернет вас обратно в действие, если вы не справитесь с одним из испытаний. Он работает очень плавно, постоянно держит высокий уровень FPS, сохраняя приятный параликсический фон, анимацию и музыку.

Raven

Raven — игра-головоломка, в которой вам нужно починить камеры безопасности секретного объекта. Есть загадочные существа, за которыми вам нужно следить, иначе они убьют вас в темноте.

Systems Offline

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

Re-wire

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

Off The Line

Off-line — одна из тех игр, которые имеют очень простую концепцию, и в то же время заставляют хорошо подумать перед прохождением уровня. Бросьте вызов 20 этапам с 3 уровнями сложности!

1024 Moves

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

Spacecraft

Spacecraft — интересная игра, в которой вам нужно собрать как можно больше жетонов с планет Солнечной системы. Вы должны оставаться на трассе, уклоняться от препятствий и астероидов и эффективно тратить жетоны, чтобы пройти все уровни.

Ссылка на основную публикацию
Adblock
detector