Front and back-end engineer. JavaScript addict.
0,0
рейтинг
21 ноября 2013 в 12:20

Разработка → Игра в 0 строк кода на чистом JS


Я не хотел принимать участие в недельном тренде хабра — «Все пишем в 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

Фидлы:
jsfiddle.net/9dQx3/10
codepen.io/i0z/pen/mFLCw

Оригинал nojsgame.majorov.su
Майоров Александр @0xy
карма
133,0
рейтинг 0,0
Front and back-end engineer. JavaScript addict.
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (127)

  • –2
    «HTML-программисты» — вы серьезно? :)
    • +64
      Ну конечно же все это ирония, как и сам пост. Тут нет ничего серьезного, кроме потраченных 3 часов на все это баловство =)
      • +23
        0-js от 0xy. Ирония даже в этом!
    • 0
      HTML — это скриптовый язык программирования. Даже Википедия твердит нам это:

      Язык программирования — формальная знаковая система, предназначенная для записи компьютерных программ. Язык программирования определяет набор лексических, синтаксических и семантических правил, задающих внешний вид программы и действия, которые выполнит исполнитель (компьютер) под её управлением.


      Иными словами, язык программирования — множество управляющих машиночитаемых символов, где под символом понимается не только буква, но и то, что обычно называют директивами языка: всякие function, if/then/else, , по-англицки token. То, что этот язык не является полным по Тьюрингу, вовсе не говорит о том, что это не язык программирования. На нём нельзя выполнять арифметических операций, нельзя вычислять π до миллионного знака после запятой, на нём, наконец, нельзя реализовать машину Тьюринга. Но он и не предназначен для этого.
      • 0
        На нём нельзя выполнять арифметических операций

        Кое-что можно) htmlbook.ru/html/output
        • +3
          А нет, там же JS.
          • 0
            Только хотел указать на это)
          • 0
            в CSS — если считать его расширением HTML, появилась функция calc() — и думаю, простейший визуальный (двигаешь ползунки и складываешь числа, к примеру) калькулятор сделать можно.
        • 0
          Все зависит от интерпретатора. Мой вот, например, умеет выполнять простейшие действия.

          И вообще, язык без интерпретатора/компилятора — не язык программирования.
          • 0
            Браузер, хотите сказать, не транслирует html в картинку на экране?
            • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Немного не понял, что вы сказали. Я-то вбрасывал про то, что html может быть языком программирования, если прикрутить интерпретатор соответствующий.
              • 0
                Да я просто к тому, что, как мне кажется, html и так транслируется в картинку, т.е. есть интерпретатор/компилятор в лице браузера. Но это все равно не делает его языком программирования. Проще всего судить не по наличию преобразующей программы, а по тьюринг-полноте. Неудачный был комментарий, соглашусь.
      • +4
        Т.е., любой язык разметки = язык программирования? Мне почему то кажется, что мы зашли куда то не туда.
        Иначе ini-файл — тоже язык программирования. И WAV-файл. И векторный файл. Они ведь все задают «действия, которые выполнит исполнитель».
        • +1
          Они ведь все задают «действия, которые выполнит исполнитель».

          Некрасиво выдёргивать лишь часть предложения. Полностью оно звучит, как «Язык программирования определяет набор лексических, синтаксических и семантических правил, задающих внешний вид программы и действия, которые выполнит исполнитель (компьютер) под её управлением.».
          Какую программу выдаёт ini? wav? векторы? У wav и векторных даже нет никакой разметки. Если HTML не язык программирования, то язык чего это? Язык марсианских тостеров?

          У меня возникло стойкое ощущение, что Вы не прочли мой комментарий полностью, либо совсем не вникали в суть.
          • +2
            У wav и векторных даже нет никакой разметки.
            Google: SVG
          • 0
            Втянувшись в полемику про «HTML — язык программирования или нет», вы забываете, что вся функциональность игрушки вообще-то реализована на CSS, который может существенно больше.
            В терминах ООП: HTML — данные объекта, CSS — методы объекта.
            • НЛО прилетело и опубликовало эту надпись здесь
          • –1
            Какую программу выдаёт ini? wav? векторы? У wav и векторных даже нет никакой разметки. Если HTML не язык программирования, то язык чего это? Язык марсианских тостеров?


            HTML — HyperText Markup Language — «язык гипертекстовой разметки». Разметки, не разработки. Задаёт внешний вид документа.
            Если уж доводить до абсурда...) Какую программу выдаёт HTML? Вы её запустите без браузера? Получите внешний вид, функционал? Неет…

            Так и ini, если я напишу программу, вся логика поведения которой будет определяться ini-файлом, станет ли init-файл языком программирования? Нет. Или да?
            • +5
              А вы сможете запустить .net программу без .net? Или любой плагин к браузеру без браузера? Давным-давно, чтобы на экране компьютера нарисовать красивый текст приходилось программировать, что изменилось? Теперь вместо компилятора мы скармливаем некий исходник браузеру, экселю, еще чему-то. Так чем же это (по существу) отличается от того самого программирования?
              • –1
                >А вы сможете запустить .net программу без .net?
                Да, конечно. Прямо сейчас запускаю .Net программы на FreeBSD (без Mono).
                Кстати, раз уж речь о браузерах. Попробуйте chrome.google.com/webstore/detail/bastion/oohphhdkahjlioohbalmicpokoefkgid?hl=en на компьютере без .Net (на котором написан Bastion).
            • 0
              Если уж доводить до абсурда...) Какую программу выдаёт HTML? Вы её запустите без браузера? Получите внешний вид, функционал? Неет…

              Легко. Берем не браузер, а чисто html/css движок вроде вебкита с минимальной обвязкой. Браузера нет, а внешний вид и функциональность есть.
          • +2
            С некоторой философской стороны, нету разницы между кодом и данными. Нету особой разницы между «Hellow World!» и программой, которая его выводит. Это хорошо понимается на примере LISP, где был сделан формат для данных (S-expression), а на отдельный формат для программ (M-expression) решили забить, так как хватило первого формата.
            Но, если принимать такую точку зрения, то понятия «данные» и «программа» теряют смысл. Если мы хотим продолжать их использовать, нужно сузить эти понятия, пока они не разделятся. Для языков программирования хорошим критерием является Тюринг-полнота. Также, можно рассматривать сложность операций, которые обработка файла с программой/данными требует от «интерпретатора». Например, среди графических файлов, PostScript/WMF-файлы ближе к программам, а SVG — к данным.
        • +2
          Программирование бывает императивным и декларативным. ini-файл можно запросто считать декларативным языком программирования. Собственно, как и sql.
        • 0
          Postscript — подмножество FORT.
          • 0
            Не подмножество, а язык «по мотивам»
      • 0
        Вот вам ещё статья, говорящая об обратном про HTML ;) ru.wikipedia.org/wiki/Компьютерный_язык

        Понятие компьютерный язык (калька с англ. computer language), как правило, относится к языкам, ассоциируемым с компьютерной техникой.
        Чаще всего, этот термин соответствует понятию языка программирования, однако это соответствие не является вполне однозначным. Так, например, языки разметки (такие как HTML) не являются языками программирования, однако определённо относятся к компьютерным языкам[источник не указан 932 дня].
        Компьютерный язык, как и любой другой язык, появляется, когда требуется передать информацию из одного источника другому. Языки программирования способствуют обмену информацией между программистами и компьютерами, языки разметки текста определяют понятную для людей и компьютеров структуру документов и т. п.
        Нередко понятие компьютерный язык также отождествляют со сленгом, распространённым среди людей, так или иначе общающихся с компьютерами
        • 0
          Так, например, языки разметки (такие как HTML) не являются языками программирования, однако определённо относятся к компьютерным языкам[источник не указан 932 дня].


          Что же касается HTML как языка сценариев, то тут всё несколько нечётко:
          Сценарный язык (англ. scripting language, в русской литературе принято название язык сценариев) — высокоуровневый язык программирования для написания сценариев — кратких описаний действий, выполняемых системой. Разница между программами и сценариями довольно размыта. Сценарий — это программа, имеющая дело с готовыми программными компонентами.

          Однако даже из такого определения следует, что HTML ещё и скрипт. Что, кстати, и написано прямым текстом в статье про сценарии.

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

          Markup languages like XML, HTML or troff, which define structured data, are not generally considered programming languages.

          Ну тут всё правильно, судя по моим оппонентам, действительно not generally considered. И ниже типа в подтверждение этому приводятся ссылки на труды (в том числе и туториал для чайников), где, конечно, авторы этих обучателей, чтобы не перегрузить мозг целевой аудитории, сразу заявляют, что это не язык программирования. Чтобы людей не путать. А то, чего доброго, начнут пытаться складывать числа в HTML.
      • +4
        Ну можно и на XML и Bash писать скрипты, ок? Да и в экселе можно программы писать, со сложными формулами! Я вот Excel-программист, а вы?
        • +2
          Можно, почему нет? Вполне себе хорошие примеры.
          • –4
            Толсто. Нравится выпендриваться — программируйте XML, Excel, стиральную машину и детский конструктор. Все равно большинство людей под словом «программист» понимает «software engineer», а не тетю Зину из бухгалтерии или домохозяйку со стиральной машиной.
            • +5
              Вообще-то язык формул в Excel — вполне себе язык функционального программирования. Я даже не упоминаю, что там унутре неонка Васик
              • 0
                Да я что, спорю? Пишите у себя в резюме Excel-программист, на здоровье :)
            • +2
              Да нет, не толсто. Хотя бы потому, что я ответил безо всякого трололо. На Bash вполне можно накодить программки, хоть и небольшие (я делал для управления своим же серваком под дебианом).
              • 0
                Чего-же вы к словам цепляетесь. Мы тут про HTML и эксель говорим. Мне-то пофиг, хотите думать что вы крутой спец по функциональным языкам, если умеете сложить значениия 2 ячеек в экселе (или даже формулы писать!), ваше право.
                Теперь же у нас все знатоки ООП и сеньоры, даже программитсы HTML :)
                • 0
                  Да где ж я тут цепляюсь? «Ну можно и на XML и Bash писать скрипты, ок?» — это же ваши слова, не мои. Вот я касательно Bash и ответил…
              • 0
                >Bash вполне можно накодить программки, хоть и небольшие
                Да можно и большие. Я писал на нём довольно сложные системы. С библиотеками и т.д. Язык не самый приятный, но сойдёт. (говорю, как человек, хорошо знающий и часто использующий Bash, но не любящий его).
        • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Bash-то каким боком не язык программирования?
          B Excel зачем-то приплели… Это программа, а не язык программирования. Такая же, как Turbo-Pascal. Другое дело, что Excel поддерживает два языка программирования — функциональный язык формул и императивный язык Visual Basic for Applications.
    • 0
      Посмотрите «Developing HTML 5 Apps Jump Start» на Channel9. Там достаточно известные J. Foster и M. Palermo на полном серьезе рассуждают, что HTML-программисты сейчас очень востребованы.
      • 0
        Посмотрите сами. Там в понятие HTML5 включают не только язык разметки HTML, но и язык программирования JavaScript.
  • +5
    Суровый программист на html :) новый тренд?
    • +17
      Ждем-с node.html для серверной разработки. Тогда можно будет сказать с уверенностью: «Я видел все!»
      • +3
        node.css? :)
  • +6
    Супер. Ушел качать.
    • +6
      Я специально все положил на JSFiddle, чтобы можно было смотреть код и разбираться. Но если реально нужно рассказать, могу сделать UPD.
      Вот в редакторе все же, как бы видно jsfiddle.net/0dmin/9dQx3/light/ =)
      • +10
        Да это я хотел модно «отшутить», но не получилось :)
        Уже 10 минут гоняю эту финю :)
        • 0
          Все гениальное — просто:)
          Да еще и затягивает.
  • +53
    Заявочка на победу!
  • +8
    Знаете, когда происходит столкновение и экран застилает красным, подсознание ожидает появления потеков крови — видимо в детстве в подкорку отложился Doom II.
  • +5
    Когда выйдет коробочная версия?
    • +2
      К НГ. Осталосьтолько добавить звуки (что так же реально сделать без JS), фоновую музыку… Обернуть все в контейнер типа AppJS и можно начинать раздавать =)
      • +6
        Как будете на Стиме с радостью куплю бандл 4 для себя и друзей. Не планируете выйти на Кикстартер?
      • +2
        Напишите AppHTML. Я уверен, вы сможете.
      • 0
        … и ачивки добавьте, рейтинг результатов и прочие п.ськомерки! :)
  • +8
    Заходя в пост, ожидал увидеть в посте html со ссылкой на дистрибьютив игры или магазин с играми.
  • +7
    Сначала не врубился как на CSS сделали так что детектится пересечение объектов, потом дошло что всё на самом деле куда проще :)
  • +8
    Даже как-то не хочется больше шутить на эту тему, ведь найдется же тот, кто это обязательно реализует.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +3
        Поддался соблазну, не смог устоять. Да и просто задаю новый тренд =) Писать, используя 0 строк кода на чистом JS, это та еще развлекуха, скажу я вам )
        • +1
          Ждем тетриса на чистом HTML
  • +59
    А ведь отличается от 30-строчников вполне качественным контентом и геймплеем!
  • +14
    Абсолютный рекорд…
    • +2
      Скоре так: Абсолютный победитель Специальной олимпиады.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Но там же JS и он больше чем 30 строк кода )
      • +1
        Про это в курсе selenit.freeoda.com/experiments/nojs2/
        Но тут нет логики и геймплея =)
        Даже думал сначала на эту базу навернуть логику. Но потом решил идти своим путем.
  • 0
    В CSS не силён. Как оно определяет столкновения?
    • +7
      По :hover
    • +25
      По :hover. Корабль — это курсор, в котором вместо дефолтного — картинка космолета. Наведя курсор (космолет) на элемент — получаем срабатывание ховера, в котором через before и after пишем стили и текст для фаил скрина.

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

      Нашел интересные свойства, позволяющие чекбокс представить как кнопку:
      -moz-appearance:button;
      -webkit-appearance:button;

      Работает правда стабильно только в хроме и сафари. В FF под линуксом — ок, под вендой — чекбокс. В Ие так же чекбокс.
      • +1
        по идее можно же через checkbox ~ label делать как-нибудь, нет разве?
        • 0
          Надо пробовать
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Спасибо за наводку. На досуге буду мутить что-то более сложное =)
    • +1
      Так как управление происходит мышью то «столкновение» суть то же самое что навести мышью на противника.

      А значит просто на противника на :hover надо навесить появление попапа

      пока писал уже автор ответил
  • +10
    Сделал первый трейнер для игры, дает бессмертие!:) jsfiddle.net/K2GzL/
    P.S. Гораздо круче всех «30-строчников», респект автору.
    • +9
      Спасибо! Старался, до 4 утра делал…
      • 0
        Если не секрет то со скольки? )
        • +1
          Часов с 0 часов начал думать идею, к часу ее придумал и до 4х утра реализовывал.
    • +2
      Бессмертие есть уже из коробки: нужно просто не двигать мышью перед столкновением, ибо :hover отрабатывается только при шевелении курсором.
  • +20
    Издевательские посты прямо какие-то качественные пошли.

    На порядок лучше, чем 30-вздрочники!
  • +2
    Чит:
    Правый клик по полю — убираем мышь с поля и выигрываем.


    • 0
      Так бонусы не ловятся.
      А если что,
      спойлер
      Можно навести курсор на правый нижний угол
    • +4
      Чит еще проще
      Просто ничего не делаем. Когда объект подъезжает под мышку (а не мышка на объект) hover не срабатывает и долетаем спокойно до финиша. Правда без бонусов.
      • 0
        Да на телефоне только так играть и можно, но там баг — ваш кораблик не прорисовывается.
        • +1
          Кораблик — курсор. Для телефона придется переделывать принцип и механику )
          • +22
            Даже в текущем виде она интересней чем большинство игр из маркета )
            • 0
              Я ьы сказал что даже тридцатистрочники этой недели иной раз больше цепляют чем весь этот шлак с гуглПлея
    • 0
      Ещё hover не срабатывает если зажата лкм (по крайней мере в хроме), так можно и бонусы собрать и не думать о кораблях противника
      Понравились корабли )
  • +2
    Есть еще и отрицательные числа :)
  • 0
    Пройдемся по багам?

    — После проигрыша/рестарта игры путем выводы курсора за пределы поля — количество собранных бонусов не обнуляется
    — И сами бонусы (а их в игре 8 штук) перестают появляться, коль вы уж их все собрали. Запускаешь новую игру, а там одни враги-враги)

    Но вообще зачет:)
  • +1
    По правому клику врубается режим стелс пока меню вызвано.
    • +3
      Можно просто заждать левую кнопку и тогда будет режим стелс =)
      • 0
        На андройде под оперой — работает, бонусы собирать можно, вот только из-за привязки корабля к мышке не поиграешь. Вот если бы корабль передвигался зажатием лкм, то и на телефоне бы нормально работала:)
  • –8
    Фейк, при отключенном JS'е в браузере не работает.

    Пруф (после temporary allow — работает):

    • НЛО прилетело и опубликовало эту надпись здесь
      • +4
        Спасибо, работает.
    • +8
      Зайти на jsfiddle.net с отключенным js — это не фейк, а фейл…
  • НЛО прилетело и опубликовало эту надпись здесь
    • +3
      Я выложил на JSFiddle, что бы было сразу видно код и иметь возможность его форкнуть и править.
  • +1
    Опять в БД верстка отъехала…
    • 0
      В базе данных?
      • 0
        Ну да, стили закэшировались как обычно.
  • +1
    Следующий уровень – игра в -1 строку на JS, для её начала требуется ввести валидный код.
    • +5
      Так она уже есть! Консоль разработчика JS — для начала игры нужно добавить N строчек кода самой игры.
  • 0
    Мультиплеер будет?
  • 0
    Ждем игр с отрицательынм количеством строк.
    • 0
      Вызов принят! :)
    • +4
      Хотел выспаться, а теперь понял, что буду еще делать более компактный вариант =)
    • 0
      начинаешь играть, а игра начинает пожирать код браузера например, чтобы в ноль выйти
  • +13
    .kkrieger (для тех, кто помнит).
    • +1
      О-о-о да, у меня в свое время чуть глаз не выпал, когда я это увидел в первый раз. У них еще несколько шикарнейших демок есть, тоже в голове не укладывающихся, если посмотреть на размер файла (64К): www.theproduct.de/
  • 0
    хе хе.
  • 0
    Слабаки. Давно пора писать программы в −2,147,483,648 строк.
  • 0
    Даа-а-а, даже vanilla.js не понадобился!
  • 0
    Если не двигать мышку то объекты будут пролетать сквозь, кораблик игрока.
  • +3
    Ого, знаете, вы как буддист от мира веб программирования — достигли, так сказать, состояния просветления в кодинге — когда дух настолько высоко поднялся над этим бренным двоичным миром, что взглянул на ситуацию с такой высоты, на которой отчетливо стал виден тот самый код в 0 строк. Это гениально.
  • +2
    Вы забыли самую малость — запилить репозиторий на ГитХабе для своего JS мега-кода. Вдруг кто-то сможет его улучшить?
    • –1
      Напишет в -1 строчек кода?
  • 0
    На самом деле разница между программами и данными, между языками программирования и разметки, между красивым и некрасивым лежит только в восприятии и договорённостях.

    И, кстати, у меня не работает. Через секунду вылазит «game over». И корабликов нет.
    Браузер firefox 25 linux x64. ЧЯДНТ?
    • 0
      Ссылки на графику nojsgame.majorov.su/bg.jpg протухли.
      • 0
        Исправил
    • 0
      Уже испарвил. Щас все должно быть ок
  • 0
    Репозиторий:
    github.com/i0z/nojsgame

    Фидлы:
    jsfiddle.net/9dQx3/10/
    codepen.io/i0z/pen/mFLCw

    Оригинал nojsgame.majorov.su/
  • 0
    как называется игра в оригинале?
  • 0
    А вы знали, что демо можно разместить прямо на гитхабе, и не придётся иcпользовать для этого jsfiddle? Просто отпочкуйте от мастера новую ветку «gh-pages», и содержимое index.html станет доступно по адресу ioz.github.io/nojsgame/
    • 0
      Нет, не знал. Попробую, спасибо!

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