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 — игра-головоломка, в которой вам нужно починить камеры безопасности секретного объекта. Есть загадочные существа, за которыми вам нужно следить, иначе они убьют вас в темноте.
Удивительная игра-головоломка, в которой вы застряли на сломанной космической станции. Ваша миссия состоит в том, чтобы починить системы и сбежать до того, как закончится ваш кислород. В игру можно играть с помощью мыши или сенсорного управления, так же вы можете установить режим для дальтоников и выбирать из трех различных уровней сложности.
Эта игра проверяет ваши навыки логического мышления. Вам необходимо соединить узлы кабелем и подключить его к розетке, не касаясь лезвий. Довольно увлекательная и не так уж простая игра. Предусмотрено автоматическое сохранение, благодаря которому вы можете воспроизводить уровень несколько раз, не теряя при этом прогресса.
Off-line — одна из тех игр, которые имеют очень простую концепцию, и в то же время заставляют хорошо подумать перед прохождением уровня. Бросьте вызов 20 этапам с 3 уровнями сложности!
Это удивительная трехмерная головоломка, в которой вам предстоит переместить куб через сетку плиток и достичь финиша. Избегайте дыр, перемещайте различные объекты и попробуйте пройти все уровни менее чем за 1024 хода.
Spacecraft — интересная игра, в которой вам нужно собрать как можно больше жетонов с планет Солнечной системы. Вы должны оставаться на трассе, уклоняться от препятствий и астероидов и эффективно тратить жетоны, чтобы пройти все уровни.
dev-gang.ru
2D игра на чистом JavaScript — Разработка игр
В этом уроке мы шаг за шагом будем создавать простую игру MDN Breakout,
<canvas>.К каждому шагу предлагаются редактируемые опубликованные примеры, с которыми можно поиграть, чтобы вы видели, как должна выглядеть игра на промежуточных этапах. Вы изучите основы использования элемента <canvas> для реализации таких фундаментальных игровых механик, как рендеринг и перемещение изображений, обнаружение столкновений, механизмы управления, а также состояния выигрыша и проигрыша.
Для извлечения максимальной пользы из этой серии статей необходимо иметь средние (или хотя бы базовые) знания языка JavaScript. После прохождения этого урока вы сможете создавать собственные простые браузерные игры.
Детали к урокам
Все уроки и версии игры MDN Breakout доступны в GitHub:
- Создание Canvas и рисование на нем
- Движения мяча
- Реакция при столкновении со стеной
- Управление
- Конец игры
- Построение кирпичей
- Реакция при столкновении
- Счет и выигрыш
- Контроль мышью
- Заключение
Лучший способ получить надежные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, не лишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript.
Примечание. Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей 2D игра Breakout с использованием Phaser.
Примечание. Эту серию статей можно использовать как материал для практических занятий по разработке игр. Также можно воспользоваться набором инструментов Gamedev Canvas Content Kit, основанным на этом уроке, если нужно сделать доклад о разработке игр в целом.
Следующий шаг
Ладно, давайте начнем! Перейдите к первой главе — Создание Canvas и рисование на нем.
developer.mozilla.org
Игра в 0 строк кода на чистом JS / Habr
Я не хотел принимать участие в недельном тренде хабра — «Все пишем в 30 строк кода!», нет времени лишнего. Но пост theaqua про Hello world в 1 строчку на чистом JavaScript вдохновил меня побить этот рекорд. Я написал игру, используя JavaScript, HTML и CSS, при этом использовал всего 0 строк кода. После этого поста я не мог спать. Я мучался бессоницей и, взяв себя в руки, сел писать игру. Понимая что мне придется использовать 0 строк кода на Javascript — я сильно боялся. Написать программу в 1000 строк кода и больше — не составляет проблем. Но вот написать 0 строк кода… Это безумие. Это переворачивает мозг. Меняет отношение к вебу. Понимаешь, что раньше ты писал как-то не так…
Это не фейк, а полноценная игра. Подробности под катом.
Требования
Браузеры: Chrome, FF, Safari, IE10+
Как играть
Начать игру можно наведя курсор на поле с игрой.
Управление корабля осуществляется движением мыши.
При столкновении с кораблем противника — раунд заканчивается. Чтобы начать заново нужно увести курсор с игрового поля и занового его навести на поле.
Для наглядности есть видеотуториал:
Постскриптум
Я давно занимаюсь программированием. И именно по этой причине подумал, что я смогу осилить такую сложную задачу, как создание игры, написанной с использованием JS, в котором будет 0 строк кода.
Раньше я снисходительно относился к HTML-программистам. Но теперь я понял, что скоро они могут завоевать мир. Вы вспомните как когда-то JS программистов не воспринимали всерьез. Помните эти темные времена? А сейчас оглянитесь… JavaScript — это не просто тренд. Он уже везде. В браузерах, на сервере, в микроконтроллерах, мобильных ОС… На нем пишут ОС, игры… И вот тихо подкрадываются к нам HTML-программисты.
Однажды писать 0 строк кода на JS cтанет нормой. JS будет таким же немодным как сейчас Flash. Зачем писать на JS, если он работает медленнее чем HTML программа, написанная HTML программистом с использованием CSS.
UPD:
Репозиторий:
github.com/i0z/nojsgame
Фидлы:
codepen.io/i0z/pen/mFLCw
Оригинал nojsgame.majorov.su
habr.com
Программирование для детей. Пять самых крутых игр на HTML и JavaScript
Привет, Хаброжители! Хотите сделать отличный подарок ребёнку, желающему научиться программировать, или научить взрослого, далёкого от мира кодов? Тогда книга-героиня нашего поста Вам подойдет. Эта книга научит писать код веб-игр на языках HTML и JavaScript и даже поможет читателю написать несколько увлекательных игр. Под катом — отрывок из книги.Думаешь, программировать — это сложно? Вовсе нет! Научись программировать, создавая игры на HTML и JavaScript. «Приключения Марио» и «Майнкрафт» познакомят с циклами, таймерами, подсчетом очков, работой с графикой и даже с искусственным интеллектом. Краткие и простые объяснения позволят легко создать свою игру.
В начале каждой главы тебя ждет описание задачи от клуба «Счастливый кот». Тебе все расскажут об игре, которую хотят создать члены клуба.
Код каждой игры разбит на небольшие фрагменты. Следуя пошаговым инструкциям, ты сам напишешь игру от начала и до конца.
К концу каждой миссии у тебя будет созданная своими руками игра и приобретенные навыки.
Поиграй, отдохни, а потом зайди на сайт издательства Питер за новыми книгами по программированию.
» Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок
Для Хаброжителей скидка 25% по купону —
habr.com
Подборка уроков для начинающего разработчика игр на JavaScript / Habr
В этой подборке уроков рассматриваются основы создания игр на JavaScript, изучив которые вы научитесь:— Работать с позицией курсора мыши
— Вращать объекты внутри CANVAS элемента
— Выделять объекты мышью внутри CANVAS
— Перетаскивать объекты внутри CANVAS
— Создавать эмуляцию гравитации для объектов внутри CANVAS
— Определять скорость мыши
— Использовать мультиязычность в своих игровых проектах.
Все уроки полностью на русском языке и выполнены в наглядной форме.
Урок 1. Позиция курсора мыши на JavaScript.
Урок 2. Вращение объектов на JavaScript внутри элемента CANVAS
Урок 3. Выделение и выбор объектов на JavaScript внутри CANVAS
Урок 4. Drag & Drop, Перетаскивание объектов внутри CANVAS на JavaScript
Урок 5. Гравитация для объектов внутри CANVAS
Урок 6. Усложнение гравитации, добавление жидкой среды (вода) для объектов внутри CANVAS
Урок 7. Скорость движения курсора мыши на JavaScript
Урок 8. Мультиязычность в игровом приложении на JavaScript
Такие вот уроки получились, всё наглядно и доступно.
habr.com
10 браузерных игр, которые помогут изучить веб-разработку
Данная подборка игр включает в себя почти все аспекты веб-разработки. Попробуйте себя в данных играх, и уверен, у вас появится интерес изучать веб.
Процесс видеоигр включает в себя решение логических задач, для решения которых зачастую используют метод проб и ошибок. Но что же ещё может требовать подобных навыков? Верно – программирование!
В данной статье мы подготовили для вас 10 браузерных игр для изучения веба, играя в которые, вы узнаете больше о JavaScript, CSS и HTML, или вы можете использовать их как учебный полигон для тренировки ваших навыков в вебе. Некоторые из них легкие, другие, наоборот, очень сложные в прохождении, но абсолютно все весёлые!
Несмотря на то что Code Combat создан для детей школьного возраста, игра остается интересной для всех возрастов. В ней у вас под контролем находится храбрый герой, которому предстоит пройти через сотни подземелий, сражений с врагами, а также он будет собирать множество самоцветов. Прохождение игры занимает около 20 часов и охватывает основные аспекты программирования.
В данной версии классической аркадной игры мир подвергается нападению трёх пришельцев, каждый из которых имеет свой цвет. Для того чтобы спасти человечество, игроку требуется преобразовать шестнадцатеричные RGB-значения обратно в человеческие цвета и разгромить врага.
Игра-головоломка, в которой вам предстоит помочь группе разноцветных лягушек добраться до их кувшинок. Перемещение лягушек сделано с помощью Flexbox-лейаутов, что по-настоящему проверит ваши знания в области размещения лейаутов. Подсказки в игре помогут вам разобраться, какое свойство CSS использовать в той или иной ситуации, но игроку все же придется подумать, какую комбинацию свойств использовать.
Pixactly имеет очень простую идею, но всё же заставит вас показать свои способности. В начале игры вам дается два рандомных значения пикселей, одно из значений для ширины, другое для высоты прямоугольника. Игроку предстоит нарисовать коробку, максимально приближённую к заданным параметрам.
Отличная игра для изучения CSS селекторов. В игре дается анимированная таблица блюд, HTML форма и определённый элемент или элементы, которые будут выбираться из таблицы. Различные уровни охватывают все, что связанно с селекторами в вебе, начиная с самых основ до ~ и :first-child.
В данной игре вам предстоит побывать в роли цифрового муравья и фармить там, где вы запрограммируете. После того как вы создадите целую колонию и настроите поведение ваших муравьёв, они начнут исследовать все уголки игрового мира, будут собирать ресурсы и сражаться с врагами, даже если вы не в сети.
Огромная коллекция игр, в которой представлены различные языки программирования, такие как JavaScript, PHP, Ruby, Go, Python и многие другие. Данная платформа включает в себя различные головоломки, мультиплееры и игры, базирующиеся на искусственном интеллекте. Имеется поддержка редакторов Emacs и Vim.
Классическая игра жанра «оборона башнями» с использованием свойств CSS, для размещения башен и ловушек используются flexbox-лейауты. Игра включает в себя 12 уровней с различными волнами врагов, пытающихся достичь вашей базы. Для того чтобы отбить все волны врагов, вам придется применить все знания в области flexbox-лейаутов.
Elevator Saga – это головоломка, в которой вам предстоит использовать JavaScript, чтобы контролировать лифты в здании. Толпы людей постоянно поднимаются вверх и вниз, а вам предстоит доставить их в нужное место как можно быстрее. Игра проверит ваши навыки в написании алгоритмов, а также знания функций JS, массивов и обработчиков событий.
Untrusted – это приключенческая мета-JavaScript игра, в которой вам предстоит играть за Доктора Ивала. Знак @ может контролировать мир вокруг него при изменении исходного кода. Игроку предоставляются функции для инициализации каждого уровня, изменяя которые с помощью API игры, вы создадите путь для спасения Доктора Ивала.
Дерево талантов CSS, HTML и JavaScript вместо магии, огня и льда. Отметьте те знания, которые у вас уже есть, и посмотрите, насколько вы близки к становлению мастером веб-разработки. Отправьте дерево талантов в качестве резюме для рабочей вакансии, но на свой страх и риск.
Ссылка на оригинальную статью
Перевод: Александр Давыдов
Как стать Дуровым: практическое руководство для школьников и студентов
ТОП-12 игр, с которыми ребенок научится программировать
proglib.io
Node.js + HTML5 + js = online action game. Игра на Node.js / Habr
Давно задавался вопросом, а почему же написание онлайн игр на node.js является таким редким явлением, особенно на хабре?
Ведь какие дифирамбы пели ноде при ее появлении, и сколько пророчили хорошего (или нехорошего) сей платформе, а новых продуктов что-то не сильно прибавляется.
Я решил проверить, действительно ли такой подход к игростроению обречен на провал, и почему. Скажу сразу, результаты меня обнадежили!
Под катом подробности и проблемы, с которыми я столкнулся в процессе разработки.
Краткая предыстория
Будучи студентом 4-го курса кибернетики, я получил от преподавателя по программированию предложение поучаствовать в конкурсе, проводимом ШАГ-ом и еще несколькими компании в совместительстве. Конкурс «Золотой байт» проводится не первый год и я подумал, что это замечательная возможность опробовать себя на поприще игростроения. Имея опыт работы 1,5 года в веб-студии в качестве разработчика (php, js, html, ну все как обычно), я решил долго не колебаться и подал заявку в номинацию «Game design». Благо у нас с другом (художник-любитель), были наработки (в мыслях) о концепции браузерной игры.
Поехали!
Суть игры вкратце.
Браузерный тайм киллер. Две команды пластиковых солдатиков бегают по компьютерному столу и уничтожают друг друга, борясь за владение столом. Команда побеждает набрав определенное количество убийств. Управление: WASD+мышь.
Дизайн-документ был составлен за пару дней, отправлен и одобрен жюри конкурса. К этому моменту я уже определил платформу, на которой будет основываться серверная часть, клиент, в общем, основную архитектуру. Решение было принято в пользу Node.js (сервер), js + html5 (клиент). Данные о карте, предметах, доступных юнитах хранятся в xml формате и лежат на сервере.
Наброски юнитов рисовались пока я пилил код.
Особенности и предысторию к игре тут выкладывать, думаю, не уместно.
Логика
Итак, перед мной встало несколько проблем реализации, и поскольку с нодой я до сих пор дел не имел, пришлось подстраиваться под обстановку.
В качестве способа связи клиент-сервер я выбрал Web sockets, подключил socket.io, пару шаманств и танцев и вуаля, коннект есть. Первые наброски а-ля передвижение и синхронизация проводились с отрисоваными коряво в пеинте картинками (для наглядности).
Данные летают в json формате.
Процесс происходящего в бэкграунде был примерно таков.
- Пользователь заходит на сайт, получает первичные данные о карте, всю необходимую служебную информацию, first packet.
- Пользователь видит главный экран. — Загрузка необходимых картинок (preload).
- Пользователя анонимно коннектит socket.io с сервером, регистрирует его в сессию.
- Пользователь выбирает за какую сторону он будет играть — отсылается запрос, ставится пометка о стороне.
- Пользователь выбирает за какого персонажа он будет играть — отсылается запрос, ставится пометка о персонаже.
- Игрока помещают на точку респауна, исходя из настроек карты.
- Начинается процесс обмена данными с сервером, ну и сама игра (ниже алгоритм).
Алгоритм синхронизации действий был придуман следующий:
- На сервере стоит интервал, 50 мс, который отсылает всем подключенным юзерам необходимую инфу, о местоположении и действиях игроков.(отсылается список объектов игроков).
- У пользователей стоит catch-event на сообщения и когда они его ловят, проверяют какой именно пакет пришел, main/first/system и т.д.
- В ответ от пользователя летит пакет с текущим действием юзера. Летят только нажатые клавиши, все вычисления происходят на сервере (можно ли туда пойти, где окажешься и т.д. и т.п.).
И так по кругу.
Отрисовка
В качестве поля для отрисовки я использовал canvas. После недолгого просмотра популярных библиотек, я подумал что я все же делаю это больше для себя, а не для конкурса. А ведь куда приятнее писать свой велосипед, особенно в новой для меня сфере, так что было принято решение писать свой небольшой движок отрисовки.
Ну и как полагается, в ход пошли setInterval, requestAnimationFrame, и все знания, что остались по геометрии и элементарной алгебре.
После отрисовки бэкграунда выбиралась та активная область экрана, которую видно пользователю, минус разница в площади отрисовываемого объекта. В данном периметре производится рендеринг активной зоны. На сервере все регулярно сортируется по мере дальности от экрана (по высоте), чтобы картинка солдата стоящего дальше не накладывалась на солдата, стоящего ближе к экрану.
К этому моменту у меня уже был готовый набор спрайтов для отрисовки юнита. Я добавил в движок метод отрисовки анимации спрайтов, как результат получил следующее:
Итак, на данный момент у меня было готово:
- Отрисовка юнитов с анимацией
- Отрисовка предметов
- Неровные Границы стола (невозможность пройти за них)
- Передвижение по карте
Спрайты юнитов были отрендерены в 3Dmax и склеены вместе. Выглядело это вот так (кликабельно):
Ну и, конечно же, боевка
Боевая часть реализована достаточно просто. При клике левой кнопкой мыши по полю, персонаж разворачивается в ту сторону и бьет. Правая кнопка мыши — блок в сторону по направлению мышки. У персонажа есть определенные характеристики, которые обуславливают его скорость/живучесть/усталость/дальность_удара/дмг и т.д.
И опять же, все вычисления происходят на сервере, игроку приходит только результат его нажатия на клавиши.
Немного служебной информации/статистики
Сервер VPS за 5 евро в месяц:
CPU 1200 Mhz, ОЗУ 256Мб, ОС Debian.
Карта 3000 на 3000 (одномерный массив с последующим преобразованием). При старте сервера инициализируется, занимает 900 мс. Когда был двумерным массивом, занимал 6500 мс.
5Мб канал клиента. 40 подключений (20 на 20). Обеспечивался обмен данными и поддерживался постоянный фпс без проседаний 30-60.
Еще немного картинок:
Главный экран:
Отскроллили колесиком мыши:
Победа синей команды:
Кроссбраузерность предусмотрена для Chrome, Mozilla, Opera, Explorer 10+. В общем все, что поддерживает canvas и Websockets.
Так же была адаптированная версия для тех, кто зашел с телефона (интерфейс не допилен, но работает).
Итог
Вся работа заняла около полутора месяца трудов после учебы и работы.
Ссылку на игру не дам, бедный сервер не выдержит хабраэффекта, да и не готов я еще к нагрузочному тестированию.
На конкурсе в своем городе мы с другом заняли 2-е место, что в принципе не расстроило меня, а лишь подстегнуло. Игру делал скорее для себя, но в будущем, возможно переделаем графику, и можно будет выкладывать в общий доступ, но об этом говорить еще рано.
Для тех, кто хочет посмотреть мой корявый код, вот репозиторий на git. Только не плюйтесь, уже сейчас вижу, на сколько все коряво, хотя делал всего пол года назад: https://github.com/amikstrike/wn
Спасибо за внимание!
habr.com