JS-бродилка

Всем привет)

В процессе освоения таких поначалу непонятных и непривычных навыков как html, css а вслед за ними и js возникла необычная идея — написать небольшую браузерную игрушку, основанную на вышеперечисленных технологиях.

И использовать для этого не canvas, как это положено в «правильных» браузерных играх, а всё, что только можно выжать из вот такого джентльменского набора:
— все объекты в игре это div-ы.
— текстуры и мелкая анимация на css.
— логика, а собственно и весь «движок» это чистый js.

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

Update: сейчас игра находится на сервере (спасибо Senseye)
hidden-structure-copy.netlify.com
А также здесь:
shima3d.itch.io/hidden-structure

Исходники и просто присоединиться к разработке можно на гит-хабе вот по этой ссылке:
github.com/...​nsky/hidden-structure.git

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Симпатичная игрулина (имхо) ее кстати можно на itch.io выложить (это бесплатно, достаточно зарегаться, ну и всякие браузерные игрулины там выкладывают с возможностью запуска прямо в браузере). ;-)

Благодарю, за подсказку)

Скопіював твій сайт на hidden-structure-copy.netlify.com за пару хвилин, коли ти налаштуєш то зроблю перенаправлення на твій

Благодарю) Я на хостинге лимит сайтов превысил, поэтому сейчас он не доступен. Буду рад любому участию)))

Залил игру на itch.io shima3d.itch.io/hidden-structure
Спасибо, что поднял её на netlify)))

Так, спробуй зайти в режимі інкогніто і побачиш 404

Да, точно, страница была не доступна для общего просмотра — настроил доступ сейчас всё ок)

«движок» это вообще очень громкое заявление, там путь самурая-верстальщика :)

чистый js

:)
Обычно в таких игрульках весь их «мир» отталкивается от двухмерной матрицы, там тогда и нет вопросов с коллизиями.

Намека на ооп нет, хотя все игровые объекты типа player, wall, card, enemy это, как ни странно, объекты...

Принял к сведению)
Тут задумка такова, что игрок перемещается по карте состоящей из обычных html элементов, и выходит что карта собственно это обычная страница, а не массив элементов и переходя на следующий уровень игрок реально переходит на следующую страницу по ссылке.
Такое себе «путешествие по страницам сайта» )))

Ну а мог бы быть обычным JSON, по которому и строится модель карты, игровые объекты, спаунятся враги, с определенными характеристиками, и в последствии все это рендерится в тот же html, как этому почти и положено быть:) Сегодня это html, завтра svg, после завтра canvas, через неделю какой-нить pixi, это только представление, логика не должна быть на него жестко завязана.
Даже если оживляем страничку, все ровно это никак не отменяет необходимости иметь модели игрового мира отдельно от их отображений. Наверно, создание конструкторов котов и прочих зверюшек это следующий шаг.

<div id="empty_asfalt" class="world"></div>
<div id="empty_asfalt" class="world"></div>
<div id="empty_asfalt" class="world"></div>

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

Благодарю за подсказку, сейчас работаю над следующей версией этой игрушки и скорее всего именно этот подход возьму за основу)

И ещё: загляните в js-файл, там будет понятно, почему использую одинаковые id вместо классов. Точнее классы там есть, но только там, где это применимо)))
Суть в том, что в методе определяющем произошло ли столкновение у игрока с чем либо я в цикле проверяю что находится сверху, снизу, слева и справа. И для этого требуется именно id этих div-ов. Если использовать классы, то метод будет возвращать список всех элементов с данным классом, а не конкретный div перед игроком)))
Будет очень хорошо, если покопаетесь в коде)))

Суть в тому що id має бути унікальним на сторінці, а не «не юзайте id взагалі»

Это понятно) Но исходя из того, что canvas здесь не используется — пришлось искать «альтернативные» подходы к созданию «движка» — именно из-за этого пришлось применять одинаковые id к одинаковым элементам игры.
Возможно предложите способ это исправить?)))

Я в фронті небагато шарю, але одинакові айді це порушення. Як на рахунок додавати їм індекси: empty_asfalt0, empty_asfalt1і т.д. А якщо стоїть завдання селектнути одразу декілька, то можна або взамін айді або в додаток прописати одинаковий клас. Ще окрім класу можна dataset developer.mozilla.org/...​LOrForeignElement/dataset

Коротше максимально широко мислити варто при навчанні щоб побачити усі можливості. Таким чином куються програмісти. А якщо «аби працювало» і одна конструкція на всі кейси натягується, то це шлях в гівнокодери.

Попробую объяснить:
В игре есть функция, которая определяет столкнулся ли персонаж например со стеной:

// определение столкновения игрока со стенами «слева»
var x_left = (p.right-75)
var y_left= (p.bottom-25)
var left_elem = document.elementFromPoint(x_left,y_left);
left_empty = left_elem.id;
// alert(left_empty);

Может подскажете как можно применить классы здесь?

Получить список классов и проверить есть ли там один из асфальтов и т.д. Но data-attributes более корректное решение

И какой в этом смысл? Если на странице дублируются ID у элементов, значит верстка семантически неправильная. Нет вообще никаких гарантий корректной работы: разные браузеры/фреймворки могут по разному обрабатывать такую ситуацию, например, могут вообще ничего не показывать.

І поменше смайликів в коментах. Ніхто вас тут не зїсть, вище підборіддя.

Ніхто вас тут не зїсть

Так, понадкусываем только 🐊

Код очень сложно читать без форматирования. Ознакомьтесь с Prettier, ESLint и Husky: habr.com/...​ompany/ruvds/blog/428173. Про этот набор инструментов есть много статей в гугле, если на хабре не нравится или непонятно.

А id дублироваться не должны, это требования стандарта. Для того что вы хотите сделать есть developer.mozilla.org/...​Howto/Use_data_attributes

Спасибо, почитаю.
А про id — это вынужденная мера.

А id дублироваться не должны, это требования стандарта.

Да и вообще, вроде бы ЖС будет просто выбирать 1-й элемент с этим id, до остальных и не дойдёт... Или не так?

Да, getElementById должен вернуть один элемент. Как поведет себя querySelectorAll в такой ситуации — я не знаю, так как он возвращает коллекцию и чисто теоретически может не заморачиваться вопросами стандартов (но это на совести разработчиков браузера). Но автор по id не искал, он просто опрашивал id соседних элементов. Тем не менее, нарушать так грубо стандарты HTML рисковано

Да, всё верно. В JS опрашиваю id соседнего элемента.
Сейчас пробую писать уже более корректный «движок»)))

Вот кстати ответ на этот вопрос в хромиуме на текущий момент:

screenshots.gennady.pp.ua/20200114_0ea9de3c7.png

querySelectorAll не обращает внимания что id дублируются и отдает все ноды

Більше дозволеності в порушенні стандартів. Даєш костилі драйвен девелопмент!

querySelectorAll не обращает внимания что id дублируются и отдает все ноды

Спасибо

Именно так, все «активные» элементы(player, monster, key_card,locked_door), которые есть в игре имеют свой уникальный id. Остальные же, такие как стены имеют повторяющийся id (например wall). При нажатии стрелки влево на клавиатуре игрок перемещается влево, но перед этим JS обращается к элементу слева от игрока и проверяет его id, если это wall, то игрок остаётся на месте, а если это например empty_floor(просто пол), то JS перемещает игрока на заданное расстояние влево.
Знаю, что это не правильный подход)))
Это просто моя первая игра — вот решил ей поделится.

JS обращается к элементу слева от игрока и проверяет его id, если это wall, то игрок остаётся на месте, а если это например empty_floor(просто пол)

для такой проверки гораздо лучше подходит CSS класс, чем id или, в конце-концов data-attribute, например можно назвать его data-type и это будет логично. А с неуникальными ай-ди мне кажется браузер будет падать через некоторое время от начала игры, т.к. накопятся ошибки

Неплохо получилось, Игорь. Баги есть.. но у кого их нет?))

Где анимация фигуры, пару спрайтов не осилили добавить ? Прыжок через клетку словно в досовском text-mode. Аудио отсутствует. Давайте следующую версию выпускайте.

Я не профи в веб-разработке))) Присоединяйтесь, сделаем лучше)

Раньше такое же на С и ассемблере делали, в килобайты памяти укладывались :)

Полностью согласен, раньше были довольно крутые игрушки и главное, что сюжет был)

надо бы ее где-то на сервере поднять, а то сложно получается

Согласен, в ближайшие день два закину её на какой нибудь хостинг)

Можна просто github pages включити

Не уверен, т.к. в доках к github pages указано, что будут работать только статичные html/css конструкции.
Игра же построена на динамичном изменении содержимого с помощью js.
Вместо этого закинул ее на хостинг)))
hiddenstructure.000webhostapp.com

HTML/css/js це і є статика. Вона не змінюється залежно від того хто її просить. Т.е. бекенд не потрібен

Спасибо, почитаю ещё раз доки на github-pages, возможно я что-то упустил

круто!
реально крутая была игруха desktop dungeons.

Ну ещё не круто))) Буду пробовать получше версию накатать

Если быстро пробежать сквозь паука, он тебя не трогает :)))

Да, есть такой «косяк»)))
Буду благодарен за предложенное решение)

А канвас чем не угодил?

Знаю, что это неправильный подход к игростроению, но вначале была такая идея использовать DIVы, как элементарные строительные блоки для самой игры — то есть сама html-страница это собственно один уровень игрушки.
Правишь html и соответственно сразу-же изменяется строение уровня.

О, я думал я один такой сумашедший.

Как и чем делать игру — это вторичное. Главное — чтобы играть было весего и интересно.

Вот тут тоже div’ы.
twitter.com/...​tatus/1105211620995796992

Спасибо)
А вот управление мышкой действительно поинтересней будет)

Может оказатся чудовищно полезным: Как сделать обводочку вокруг gif с прозрачным фоном, если это div — www.patreon.com/...​s/how-to-make-on-24622815

Подписаться на комментарии