Как сделать морской бой на html+js+css с перетаскиванием кораблей? Куда копать?
Здравствуйте, я вообще верстальщик, учусь в магистратуре.
Так вот дали нам задание, написать игру морской бой, с возможностью сохранения игры в noSQL.
Решения не прошу, самому охота разобраться, но ничего не приходит в голову, буду рад Вашим советам и рекомендациям.
1) Как сделать перетаскивание + разворачивание кораблей разного размера на площадке?
2) Каким образом сохранять все в noSQL и какую использовать?
Полный текст задания:
Описание задачи
Морской бой - классический вариант известной детской настольной игры. В игре два участника. Игроки по очереди называют координаты на неизвестной им карте соперника. Если у соперника по этим координатам имеется корабль (координаты заняты), то корабль или его часть «топится», а попавший получает право сделать ещё один ход.
Цель игры - первым поразить корабли противника.
Игровое поле — квадрат 10х10 у каждого игрока, на котором игрок размещает свои корабли
В состав эскадры каждого игрока входят:
* 1 корабль — ряд из 4 клеток (четырёхпалубный)
* 2 корабля — ряд из 3 клеток (трёхпалубный)
* 3 корабля — ряд из 2 клеток (двухпалубный)
* 4 корабля — ряд из 1 клетки (однопалубный)
При размещении корабли не могут касаться друг друга даже углами.
Необходимо создать приложение для игры в морской бой. Программа должна допускать два режима игры:
* Человек-компьютер (бот)
* Человек-человек
Функциональные требования:
1. Программа должна состоять из RESTful-сервиса (API) и клиентской части (html5/Javascript).
2. В качестве хранилища данных использовать nosql.
3. Клиентская часть не должна использовать polling запросы (возможно использование async, web socket, SignalR).
4. Программа должна позволять регистрацию пользователя, создание новой игры, выбор режима (с ботом или с человеком), просмотр статистики игр и текущего рейтинга среди всех пользователей.
5. Клиентская часть должна позволять визуально разместить корабли вручную либо по желанию пользователя разместить рандомно с возможность ручного изменения.
6. Сервис должен поддерживать одновременно несколько игровых сессий.
7. Программа должна позволять сохранение и возобновление игр.
8. В игре устанавливается таймаут (лимит по времени на ход), по истечении которого выставляется поражение (нет необходимости в функционале пауз).
Перетаскивание проще всего будет самому написать используя эвенты mouseover и drag-евенты,
смысл в том, что при mouseover на ячейке карты проверять, можно ли расположить корабль и как-то подкрашивать ячейки, которые будут заполнены. Чтобы не париться с поворотом - можно предложить сразу выбрать, вертикальный или горизонтальный корабль хочется воткнуть. Т.е. в контейнере с выбором кораблей сделать оба варианта для каждого размера.
Что касается хранилища. Тут надо подумать, какие данные нужно хранить. Это очевидно координаты всех кораблей, текущая игровая ситуация, состояние полей противника для каждого игрока. Как хранить - вроде всё более-менее очевидно. Для noSQL я бы взял mongoDB, просто как самый простой и известный вариант. Можно хоть всю игровую сессию сваливать в один документ, и не особо заморачиваться с этим.
А зачем вообще перетаскивание? Это некрасиво и неудобно.
Лучше сделать панель кораблей. На панели клацнул, выбрал корабль. Потом наводишь курсор на поле, и под твоим курсором на поле в клетках отображается выбранный корабль. По щелчку на поле корабль закрепляется. По ПКМ допустим можно его крутнуть на 90 градусов.
+ можно сделать подсветку краев выбранных клеток, в которые мостится корабль, красными, если корабль ставится в недопустимое место и зелеными, если в допустимое
По поводу данных в API то в него вообще можно банально передавать обыкновенный двумерный массив
0 0 0 3 3 3
0 2 0 0 0 0
0 2 0 5 0 4
0 2 0 5 0 4
0 0 0 0 0 0
6 0 1 1 1 1
И то он нужен только когда игра инициализируется, а потом передаешь координаты точки в которую клацнул для получения ответа. Зачем БД — понятия не имею. Можно правда все ходы записывать что бы партию можно было сохранить/загрузить, но вроде в задании такого нет.
TLDR:
1. Удалить jQuery
2. Сделать математическую модель
3. Нарисовать на канвасе (mousedown, mouseup)
вообще что то почитал у вас снизу про сервер - это перебор для обычного вопроса.
человек умеющий делать такие игры может спокойно выкладывать их в магазины и зарабатывать приличные деньги, так как практически каждый пункт "Функциональные требования" является большой самостоятельной задачей и требует определенного опыта для его решения - поскольку игра в первую очередь идет на сервере, а клиент только принимает и передает команды.
если есть возможность - берите готовый сервер.
можно попробовать firebase, но не думаю что он будет соответствовать всем требованиям
PS: это задача не для верстальщика, тут нужно намного больший опыт чем перетаскивание
Простой
