- PVSM.RU - https://www.pvsm.ru -
Возможно, многие из старожилов помнят эпидемию статей с заголовками вида "%something% в 30 строк JS". А также последовавший за ней эпичный пост "Игра в 0 строк кода на чистом JS [1]", после которого эпидемия резко сошла на нет. Полностью осознавая, что этот шедевр мне никогда не превзойти, я всё же спустя пять лет решил докинуть свои пять копеек.
Дамы и господа, вашему вниманию предлагается игра «Крестики-нолики» в нуль строк JS, а также, в отличие от игры, упомянутой выше, в нуль строк CSS (включая инлайн стили). Только голый HTML, только хардкор.
→ Ссылка на игру [2]
Выглядит неказисто, зато будет работать в любом браузере. Под катом я расскажу, почему игра без JS оказалась в рубрике «Пятничный JS», а также другие грязные подробности. Впрочем, Америку я никому не открою, если вы опытный кодер, можете под кат даже не заходить
Собственно, всё устроено очень тупо. Игра состоит из почти 6 тысяч страниц статического HTML, ссылающихся друг на друга. При тыке на клетку игрового поля происходит переход на страницу, где ход в эту клетку уже сделан. Очевидно, писать 6к страниц руками — удовольствие ниже среднего. Поэтому (сюрприз!) страницы генерируются JS-скриптами с помощью NodeJS.
Сначала мы строим так называемое дерево игры — совокупность всех возможных игровых состояний и переходов между ними. Начальное состояние игры в моём коде представлено следующим образом:
const initialState = {
player: PLAYER_X,
field: Array.from(Array(9)).map(() => EMPTY_CELL),
moves: {}
}
В нём содержится информация о том, чей сейчас ход и каково состояние игрового поля. В будущем в нём также явится информация о том, какие ходы могут быть сделаны и к каким состояниям они приведут, а также некоторые другие приятные вещи.
Дальше мы начинаем, прошу прощения за тавтологию, с начального состояния и делаем следующее:
moves
текущего состояния добавляем запись о возможном ходе. Ключом в этой записи служит индекс клетки, а значением — ссылка на новое состояние.
На самом деле мой код чуть сложнее, я по привычке развернул рекурсию в цикл, а вместо ссылок на другие состояния в moves
хранятся их строковые ключи в некоем ассоциативном массиве. Но это всё детали.
Затем из каждого объекта игрового состояния мы генерируем HTML-страницу. Пройдясь по объекту moves
, мы заполняем пустые клетки поля ссылками на страницы, соответствующие ходам, сделанным в эти клетки. Затем превращаем одномерный массив поля в двумерную HTML-таблицу. Добавляем всякие приятные мелочи вроде указания, который игрок ходит, и ссылки на начальную страницу — и вуаля!
Кроме режима, когда и крестики, и нолики ставятся человеком, в моём мега-инди-хите есть также возможность играть против железного
По сходным принципам можно реализовать любую игру с не очень большим деревом. Впрочем, если я захочу подобным образом сделать шахматы, мне кажется, гитхаб откажется это хостить =)
Кстати о гитхабе: можете посмотреть там код целиком (ссылка присутствует на заглавной странице игры). На этом, в общем-то, всё. До свидания, девочки и мальчики. До новых встреч.
P.S. Замена переносов строки с Windows-style на Unix-style — это очень долго, когда речь идёт о 6 тысячах файлов. Я пожалел, что не позаботился об этом на этапе написания кода, но всё-таки мужественно дотерпел до конца git add
.
Автор: Вадим Шевяков
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/288111
Ссылки в тексте:
[1] Игра в 0 строк кода на чистом JS: https://habr.com/post/203048/
[2] Ссылка на игру: https://siri0n.github.io/tictactoe/index.html
[3] мозга: http://www.braintools.ru
[4] Источник: https://habr.com/post/419135/?utm_source=habrahabr&utm_medium=rss&utm_campaign=419135
Нажмите здесь для печати.