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

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

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

Сейчас браузеры дают JavaScript-разработчикам огромное количество возможностей для создания интересных сайтов. Раньше для этого использовался Flash — он был популярен, и на нём было создано бессчётное количество игр, плееров, необычных интерфейсов и так далее. Однако они уже не запустятся ни в одном современном браузере.

Дело в том, что технология Flash тяжеловесна, а также полна уязвимостей, поэтому от неё стали отказываться. Тем более что появилась альтернатива в виде HTML5 — в этой версии появился элемент canvas.

Canvas — это холст, на котором можно рисовать с помощью JS-команд. Его можно использовать для создания анимированных фонов, различных конструкторов и, самое главное, игр.

Из этой статьи вы узнаете, как создать браузерную игру на JavaScript и HTML5. Но прежде рекомендуем ознакомиться с объектно-ориентированным программированием в JS (достаточно понимать, что такое класс, метод и объект). Оно лучше всего подходит для создания игр, потому что позволяет работать с сущностями, а не с абстрактными данными. Однако есть и недостаток: ООП не поддерживается ни в одной из версий Internet Explorer.

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

Вёрстка страницы с игрой

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

Теперь нужно добавить стили:

Обратите внимание, что в HTML элементу canvas были заданы нулевые ширина и высота, в то время как в CSS указано 100%. В этом плане холст ведёт себя как изображение. У него есть фактическое и видимое разрешение.

С помощью стилей меняется видимое разрешение. Однако при этом размеры картинки останутся прежними: она просто растянется или сожмётся. Поэтому фактические ширина и высота будут указаны позже — через скрипт.

Скрипт для игры

Для начала добавим заготовку скрипта для игры:

В этом скрипте есть всё, что необходимо для создания игры: данные (массивы), функции обновления, прорисовки и управления. Остаётся только дополнить это основной логикой. То есть указать, как именно объекты будут себя вести и как будут выводиться на холст.

Логика игры

Во время вызова функции Update () будут меняться состояния игровых объектов. После этого они отрисовываются на canvas с помощью функции Draw (). То есть на самом деле мы не двигаем объекты на холсте — мы рисуем их один раз, потом меняем координаты, стираем старое изображение и выводим объекты с новыми координатами. Всё это происходит так быстро, что создаётся иллюзия движения.

Рассмотрим это на примере дороги.

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

Для этого создадим класс Road:

В массив с фонами добавляются два объекта класса Road:

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

Остаётся только добавить вывод этих изображений:

Теперь можно посмотреть, как это работает в игре:

Пора добавить игрока и NPC. Для этого нужно написать класс Car. В нём будет метод Move (), с помощью которого игрок управляет своим автомобилем. Движение NPC будет осуществляться с помощью Update (), в котором просто меняется координата Y.

Источник статьи: http://skillbox.ru/media/code/kak_napisat_igru_na_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] это поле определённого типа со своими свойствами. Далее пишем (или генерируем, есть у меня желание такое реализовать, но не добрался пока) нужную нам матрицу и проходимся по ней циклом, рисуя в нужных местах нужные картинки. Вот так, легко и просто. Более подробно для симулятора поезда значения для матрицы у меня следующие:

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 будет скрыт псевдонимом.

Источник статьи: http://habr.com/ru/sandbox/64940/

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

На JS можно создавать сложные и простые игры любых жанров. Мы расскажем как создать 2D игру на JavaScript и HTML5 всего за 20 минут.

Для создания веб игр на языке JavaScript используется технология Canvas , которая позволяет выполнять JavaScript код в HTML5 документе. Вы можете более детально ознакомиться с этой технологией посмотрев видео ниже:

На html странице прописывается лишь тег канвас, а также подключение JS файла, в котором будет происходить обработка всей функциональности. К примеру, HTML файл может выглядеть следующим образом:

В JS файле необходимо найти нужный канвас по id и указать способ работы с ним.

Добавление изображений и аудио

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

Код добавления изображений и аудио в игру:

Рисование объектов

Чтобы нарисовать объекты, а также добавить функционал к игре необходимо прописать функцию, которая будет постоянно вызываться. Такую функцию вы можете назвать как вам будет угодно. Главное, вам нужно вызвать эту функцию из вне её хотя бы один раз, а внутри неё прописать метод requestAnimationFrame , который будет вызывать функцию постоянно.

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

Чтобы отследить нажатие игрока на какую-либо клавишу, необходимо использовать отслеживание событий — addEventListener . К примеру, чтобы отследить нажатие на любую клавишу на клавиатуре надо прописать следующий код:

Видео урок

Это были лишь небольшие азы перед созданием самой игры. Предлагаем вам ознакомиться с небольшим видео уроком, в ходе которого вы создадите небольшую 2D игру на чистом JavaScript’е.

Весь JS код игры

Ниже вы можете посмотреть на полностью весь код JavaScript файла, который был создан в ходе видео урока выше:

Источник статьи: http://itproger.com/news/104