Форум программистов, компьютерный форум, киберфорум
Бета-тестирование
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
 
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
 Аватар для frogressive
26 / 8 / 0
Регистрация: 02.11.2022
Сообщений: 28

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

25.01.2025, 08:39. Показов 3606. Ответов 23
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет!

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

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

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

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

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

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

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

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

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

P.S. На codepen нечто вроде "стабильной версии", в архиве как бы "ночная сборка". Все работает
Вложения
Тип файла: zip game.zip (57.6 Кб, 2 просмотров)
1
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
25.01.2025, 08:39
Ответы с готовыми решениями:

Браузерная игра: JS, html, css
Добрый день. Ко всему html, js и css коду, каждый пользователь имеет доступ. И сразу могут возникнуть проблемы: каждый сможет свободно эту...

Как лучше начинать изучать HTML и CSS с нуля? (И в ответ на теме: Что почитать по HTML, CSS )
Сначала думал ответить в в соседней теме от вчерашнего дня: "Что почитать по HTML, CSS, JS", но увидел, что тема закрыта для...

Что оптимальнее HTML + CSS + JS + С# или HTML + CSS + JS + Java и для каких задач?
Объясните, пожалуйста что оптимальнее и для каких задач HTML + CSS + JS + C# или HTML + CSS + JS + JAVA?

23
Эксперт .NET
 Аватар для Usaga
14367 / 9468 / 1360
Регистрация: 21.01.2016
Сообщений: 35,720
10.02.2025, 07:24
Студворк — интернет-сервис помощи студентам
Цитата Сообщение от frogressive Посмотреть сообщение
(да и какая "мобилка" на js, ну в самом деле?
А что не так? Не вижу никаких технических проблем с этим.
0
 Аватар для frogressive
26 / 8 / 0
Регистрация: 02.11.2022
Сообщений: 28
12.02.2025, 11:35  [ТС]
Всем привет!

Начну (и закончу) главным: мне так и не удалось реализовать, чтобы вместо ущербных графических эмоджи отображались нормальные ламповые текстовые ☺ как задумывалось. Графические смайлы выглядят максимально вырвиглазно, с ними продолжать нет никакого желания. Я перебробовал наверное все способы, что имеются - от CSS до вставки специальных кодов Юникода - результата ноль. Переписывать код практически с нуля, чтобы вместо смайлов, например, отображались картинки смайлов мне банально лень (хотя я их уже начал рисовать), мне эта игруля и так нервов съела порядочно. Кароч, проект не остановлен, но заморожен. Всем спасибо за внимание!
0
 Аватар для frogressive
26 / 8 / 0
Регистрация: 02.11.2022
Сообщений: 28
15.02.2025, 11:28  [ТС]
И снова всем привет!

Прошлый пост можно считать неактульным - я таки нашёл решение и "перерисовал" иконки, теперь все отображается как задумывалось*. Поигрался с иконками и их цветом. Наконец-то определился и с иконкой игрока - теперь мы играем за ведьму, она летает и что-то делает :) Кстати, поворачивается в ту сторону, в которую вы ходите

Допилил "бонусные" уровни - теперь каждый 5-й, 10-й и 25-й дает призы

На этом пока все. Игротест тут:

wicca.pp.ua/roomdoom

логин/пароль для входа: admin/admin ну или придумайте свои

*вот так:
Миниатюры
Игра-бродилка на js/html/css  
2
 Аватар для frogressive
26 / 8 / 0
Регистрация: 02.11.2022
Сообщений: 28
25.02.2025, 16:16  [ТС]
И опять всем привет!

Так или иначе, но потихоньку и не спеша продолжаем. Несколько обновлений:

Враги. Добавил еще 2 категории врагов (помимо пчел) - муравьи и гусеницы. У них разное кол-во жизни, в дальнейшем предпологается, что у них будет разная сила атаки, да и вообще, они будут появляться по мере прогресса в игре
Башни. Начиная с определенного уровня появляется вторая башня. В перспективе у них будет увеличиваться зона поражения по мере прогресса
Ловушки. На разных уровнях их разное кол-во (в начале 1-2, дальше 1-3 или больше)
Бессмертие. Сейчас на каждом 2-м уровне появляется "ангел", он дает бессмертие до конца уровня

На поле красными цифрами обозначены ловушки, я их пока оставил для отладки

Вобщем, пока как-то так ☺
Миниатюры
Игра-бродилка на js/html/css  
2
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
25.02.2025, 16:16

Старые добрые HTML и CSS или новые HTML 5 и CSS 3?
Здравствуйте ) Дело собственно вот в чем. Я хочу на лето заняться изучением создания сайтов. Посоветуйте с чего мне лучше начинать...

Задача по HTML и CSS: работа с абсолютным и относительным позиционированием в CSS
Добрый день или вечер, у меня возникла проблема, почему-то в html не отображается css, хотя ссылка на него есть. И даже пробовал писать...

Зацените/покритикуйте видео по html/css (тема - пример создания анимации в css)
Всем привет. Сделал свой первый видеоролик по сайтостроению и вёрстке. Не уверен, насколько хорошо получилось, так что обращаюсь к...

Как сделать вот такой макет через html и css (div и css)
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот серый цвет и меню тоже на весь экран.По...

Css добавление блока в низ страницы html css
Как сделать так, чтобы при добавлении блока вниз страницы остальные блоки(добавленные до этого блока) сьезжали вверх


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
24
Ответ Создать тему
Новые блоги и статьи
Море в объективе
kumehtar 06.07.2026
Хотел написать много проникновенных слов, но передумал. Оно само - говорит. Кто слышит тот слышит.
Оказывается, Unreal Engine позволяет качество на порядки выше, чем было в Lineedge
Etyuhibosecyu 05.07.2026
Жаль, конечно, что я не узнал об этом, пока Lineedge существовала, а то бы Noname2331 написал, что волки превращаются в пиксельную кашу, а я бы его попросил скачать какую-нибудь бриллиантовую или Pro. . .
Doom для терминала без стрельбы и монстров. 3D Raycasting на ascii.
dcc0 05.07.2026
Попросил нейронную сеть deepai. org написать рейкастинг 3D с библиотекой ncurses для Linux. Чтобы можно было ходить на стрелочки. Чтобы стены были отрисованы символами. Справилась. Первый вариант. . .
Установка статуса документа по условию
Maks 05.07.2026
Алгоритм из решения ниже реализован на нетиповом документе "НарядПутевка" разработанного в КА2. Задача: в табличной части "Материалы" документа при записи автоматически устанавливать статус. . .
Сезонность и суточность закисления почв
anaschu 04.07.2026
200 часов это все равно моловато. Есть ситуации, но нестандартные, когда смена происходит за 5 лет. Но обычно это 50 лет и более. Наверное, закисление почвы происходит сезонно в средней. . .
В чем ценность человеческого опыта в глобальном смысле?
kumehtar 03.07.2026
Возможно, ценность человека не в том, что он однажды достигает мудрости, а в том, что он становится носителем карты пути. Он знает не только истину, но и последовательность внутренних изменений,. . .
интеграция AnyLogic с самописным REST API и переход на Odoo
anaschu 03.07.2026
Успешная интеграция AnyLogic с самописным REST API и переход на промышленную Odoo WMS Сегодня проделал огромный путь от простой симуляции физических процессов до построения полноценной. . .
Поиск всех путей на ориентированном графе. Linux
dcc0 02.07.2026
Переработка старого кода из моей статьи. Через несколько переработок от PHP кода к C89 (надеюсь, 89). Но довольно запутанно получилось. Код для Linux. Но если убрать time и то, что с ним. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru