Игра-бродилка на js/html/css

Всем привет!

Некоторое время назад я решил попробовать написать простую игру на js/html/css с помощью нейросетей. Понимаю, что ничего оригинального и прорывного я не создаю, подобное делалось до меня миллионы раз, но все же. С js я знаком буквально на уровне азов, с html и css ситуация чуть получше. Игра писалась (пишется) с нуля. Я бы может и подсмотрел бы где нибудь идеи, но решил, что если уж эксперимент, то "чистый" :}
Изначально писалось для ПК, потом пришла идея ее как-то под браузер телефона подогнать

Собственно, игра представляет собой нечто вроде лабиринта. Нужно пройти лабиринт, по дороге собирая "ресурсы". Цель - взять чек-поинт (алмаз) и перейти на следующий уровень

Что реализовано:

есть игровое поле. есть управление с клавиатуры и кривоватое управление мышкой/пальцем
есть нечто вроде примитивной графики
есть зачатки баланса

Все это, надеюсь, со временем допилится до более-менее нормального вида, если не надоест этим заниматься :}

На данный момент есть проблема (ну или ошибка, если хотите), которую пока никак не удается устранить: так как все генерируется рандомно (кроме начальной позиции игрока), так или иначе игрок (или алмаз, или и то, и то вместе) может появиться в клетке, запертым с четырех сторон стенами. Как вариант - в некоем пространстве из нескольких клеток, из которого нет выхода (игрок) или в которое не попадешь (алмаз). Я пытаюсь это как-то решить таким образом, чтобы, например, у любой клетки на поле было не больше 3 стен с каждой стороны. Не выходит. Я пытался ограничить количество стен непосредственно вокруг алмаза - тоже не получается. Да, я учитываю и края поля (они тоже могут выступать как стена)

Вобщем, как-то так. Может у кого-то будут какие-то идеи или предложения - рад буду услышать. Конструктивная критика тоже принимается. Ссылка на codepen ниже. Также к посту прикрепляю архив, в нем 3 файла - страница, файл скрипта и картинка джойстика

https://codepen.io/whyxsrnb-th... en/qEWJRjp

Спасибо, что дочитали :}

P.S. На codepen нечто вроде "стабильной версии", в архиве как бы "ночная сборка". Все работает

Вложения

game.zip (57.6 Кб, 2 просмотров)

1

Всем привет!

Без излишних предисловий - сразу к сути

Мне частично удалось решить главных баг с "запиранием" героя или алмаза - я убрал генерацию вертикальных стен и раставил тыквы как препятствия. Вероятность коллизий существенно уменьшилась :)

Добавил динамики - есть ловушки, летают безвредные привидения, есть бонусные уровни. Переделал, с позволения сказать, графику - она стала "мягче", по крайней мере - для меня. Я верстаю в IE6 1024x768 Опере, у меня цветные текстовые иконки, а не смайлики (см. скрин)

Слева под джойстиком появилось информационное табло с событиями игры

Подогнал поле под ширину окна браузера - стало получше выглядеть :)

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

Актуальная версия: https://codepen.io/whyxsrnb-th... en/qEWJRjp

Во вложении архив. Там страница с игрой, изображение джойстика, скрин игры и техстраница для "отлова" ловушек через консоль (для читерства)

Буду рад отзывам. Спасибо, что дочитали :)

Миниатюры

 

Вложения

game.zip (166.5 Кб, 2 просмотров)

2

Сообщение от frogressive Может у кого-то будут какие-то идеи или предложения

а в вашу команду меня возьмете?

но в html/js я нуб...

0

frogressive, лучше заливайте на github

0

XLAT, как таковой "команды" нет - есть я и вечно тупящие нейросети, вот и вся команда :) а что касается "я нуб" - так я такой же нуб-аматор. с js я знаком (я уже писал об этом) на уровне азов - не то, что бы он прям "лунные руны", но где-то близко. да, я примерно понимаю, что такое функции-константы... и всё. все "исходники" есть, вы можете сами что-то попробовать в них добавить/изменить. могу подсказать, с чего можно было бы начать. ну вот как-то так ¯\_(ツ)_/¯

Custos, согласен, но пока там для меня разобраться очень сложно, да и лень, если честно. хотя проект разрастается, и придется таки этим заняться

0

И опять всем привет!

Решил таки почаще вылаживать "обновления". Да, оно еще все очень сырое, но, тем не менее, игра работает, поэтому вот свежий релиз :) Ну и ближе к сути

Реализован многопользовательский режим - есть авторизация и запись результатов в общую таблицу. Авторизация через js, запись в таблицу через php. Позже сделаю авторизацию (с предварительной регистрацией) через php. Пока что все аскетично, но это не главное, допилится

Переделал дизайн левой колонки - все стало аккуратнее и компактнее. Доделал джойстик. Добавил кнопки - при game over теперь можно либо начать игру заново, либо сохранить результаты в общую таблицу

Переиграл параметры - теперь есть жизнь (враги), энергия (движение) и деньги (достижение). Ну плюс лвл, само собой

Перебалансировал баланс (^:^), теперь у собираемых предметов есть рандом

На поле теперь есть, помимо ловушек, башни - пуляют в героя ядра - могут попасть, могут нет. Бродят враги - могут напасть, придется отбиваться (кнопка "атака" в наличии). Телепорты телепортируют, безобидные приведения по прежнему безобидны :)

Кароч, процесс идет. Идей много, буду потихоньку реализовывать. В следующий раз думаю уже выложить игру на хостинг, можно будет играть непосредственно в интернетах

По прежнему коллизии игры на месте

Вобщем, кому интересно - тестируйте, как всегда буду рад замечаниям. Все файлы игры в архиве во вложении. Чтобы протестировать прям все - надо будет запускать через локальный сервер (XAMPP, OpenServer и т.д.), таблица результатов генерируется через php

На этом пока всё. Всем спасибо за внимание!

Миниатюры

 

Вложения

roomdoom.zip (222.9 Кб, 5 просмотров)

1

А зачем кнопки от сони пада? Думаю в это будут играть на компе с виндой, а к ним пады от пс подключаются с гемороем. Для них родные пады от коробки, а там XYAB, не говоря о том что большинство играют на клавосышке

0

alecss131, нет никакой привязки к физическим джойстикам, "крестик" реализован для управления мышью/пальцами (если, допустим, с телефона). все управление по умолчанию через клавиатуру, это просто как доп'опция

0

...

Миниатюры

 

0

Всем привет!

Жаль, что тема не вызывает особого интереса. Но, так или иначе, разработка продолжается. Я выложил игру на свой "домашний" хостинг, все новости теперь будут там. Доступна простая регистрация и занесение результатов игры в общую таблицу

Вобщем, сюда: wicca.pp.ua/roomdoom

0

Сообщение от frogressive Жаль, что тема не вызывает особого интереса.

Ну, тут форум "тыжпрограммистов", больше по коду подскажут чем игру оценят. По гемплею наверное есть смысл пытаться на itch.io выложить бету, но учитывая её вид -- не уверен что наберёться много желающих опробовать.

0

Сообщение от Wolfdp но учитывая её вид -- не уверен что наберёться много желающих опробовать

Согласен, но на js норм дизайн и не сделаешь. Да и цели такой не стояло

0

Сообщение от frogressive но на js норм дизайн и не сделаешь

на чем делать норм дизайн
Library 2024

0

XLAT, а у меня нет библиотек

0

Сообщение от frogressive а у меня нет библиотек

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

но только нафика, если можно использовать готовые?

иначе результат будет, что-то типа студенческой лабы, максимум курсовика...

0

Сообщение от frogressive но на js норм дизайн и не сделаешь

Спорно, но и не обязательно. Индюшатина, тем более в изометрии с примитивным графонеем -- обычное дело, и люди не редко играю и в такое. Всякие Ib или Ведьмин домик не то чтобы сильно графонистые, но люди с удовольствие их проходили. На js 100% можно набрать похожее, особенно если шарить за движки или хотя бы работу с canvas.

Я немного потыкал вашу поделку на сайте -- через время игра повисла, а CPU несколько засуетился. Ещё со старта не работали клавиши "влево-вправо" которые на вашем скрине (с клавиатуры стрелочки работали). Игра 100% сырая даже для беты.

0

XLAT, в ТС я уже писал, что проект - чистый эксперимент. JS я не знаю, все пишут нейросети. К библиотекам я даже не знаю, с какой стороны подходить. Графон максимально примитивный, но так и задумывалось - я, к примеру, так и не добился, чтобы вместо графических смайликов показывались текстовые ☺ В хроме и опере все более-менее нормально, в мозилле и с телефона все максимально вырвиглазно

Wolfdp, тема называется "бета-тестирование", так что вопросы не ко мне 8) То, что все сыро и убого - так я и не спорю. С кнопками вправо-влево действительно бида (вверх-вниз работает нормально) - как их не корректируй, все равно все постоянно сползает. Надо просто их заменить на простые кнопки (это которые button), это да. Странно, что у вас что-то "виснет", в коде нет ошибок, можете посмотреть через консоль. Коллизии на месте, я пока не знаю, как от них избавиться

0

Убрал джойстик, добавил кнопки. Так действительно проще и функциональней

Миниатюры

 

0

Сообщение от frogressive Так действительно проще и функциональней

С точки зрения юзера функциональнее было бы иметь возможность кликать прям по клетке, куда ожидается перемещение. Реализовать это очень просто.

Сообщение от frogressive JS я не знаю, все пишут нейросети.

Пока я не видел примера, чтобы от нейросети можно было добиться вменяемого конечного результата. Если будете строго через них писать -- думаю с текущими ИИ далеко не уедете.

0

Wolfdp, если писать мобильную игру - согласен, можно (нужно) переходить по 'тапу' пальцем (сам в такую играю). Сделать "мобилку" пока цель не стоит - тут хотя бы довести до ума, чтобы в браузере нормально все отображалось (да и какая "мобилка" на js, ну в самом деле?). Реализовать 'тапы' я тоже, наверное, смогу - но тут ломается логика игры, "у меня все ходы просчитаны"

По второму пункту пока не готов что-то обсуждать - все пока очень скользко. Но то, что ИИ тупые (не глупые, а именно тупые) - однозначно. Всякие эти ваши (их) "курсы" и прочий шлак по теме КАК ПРАВИЛЬНО ДАВАТЬ ЗАПРОСЫ ПРОМПТЫ НЕЙРОСЕТЯМ - мусор полнейший, это не работает. Но пока что я как-то справляюсь :Ъ

0