Карта для 2d стратегии на чистых html и js возможна?
Очень простая суть. Нужна карта состоящая из квадратных клеток (областей) количеством 100*100 т.е. общее количество 10000 областей. Возможно ли это сделать на чистых html css и js без фреймворков и движков? и как это сделать наиболее эффективно? например можно сделать 10000 div, или таблицу размеров 100 на 100 ячеек, или css grid.
Я пробовал grid но это не упрощает, все равно нужно делать такое же количество div, карта будет состоять из областей, каждая клетка это область, а с grid невозможно реализовать не симметричное расположение элементов, только квадрат или прямоугольник, например у меня будет лес в форме буквы Т, этого сделать с css grid не получится, template-areas тоже здесь не поможет. Пробовал через таблицу, но что то когда открываю эту страницу с 100000 ячеек ноут начинает странно тихо гудеть, закрываю страницу перстает гудеть, короче нагрузка большая. Еще не пробовал через обычное создание нужного количества div.
Может как то можно создать цикл или массив, кто может подсказать? не знаю куда копнуть.
Объясни, что за карта. Каждая ячейка карты - один вид поверхности или отдельная локация со своей картой ? Ходить по ней как? Игрок перемещает свою фишку с ячейки на ячейку ?
Если каждая ячейка - один террайн - отрисовываешь каждый уникальный террайн в отдельной картинке. Сама карта будет массивом 100x100 индексов этих террайнов. Канвасом копируешь картинки в канву в нужные места.
ksnk, Каждая ячейка это вид поверхности, точнее один из видов, а не отдельный вид для каждой ячейки, т.е. допустим есть всего три вида вода, берег, земля, и каждая ячейка имеет один из этих видов.
Да, игрок перемещает свою фишку с ячейки на ячейку, стандартная пошаговая 2d стратегия.
Из твоего ответа сделал вывод, что массив может содержать только несколько видов террайнов, а в канвас в нужные места копировать один из этих видов.
Допустим я создал в канвасе квадрат 64*64px (одна ячейка или клетка на карте) залил его картинкой террайна с помощью индекса из массива, сделал других квадратов для других видов террайнов, распределил эти террайны по канвасу создав карту 100*100 квадратов. Я правильно понял? Это первый вопрос.
Второй вопрос, как сделать каждый квадрат кликабельным? Управление должно быть мышкой, например я нажимаю на квадрат и мне выходит название местности, по попиксельным координатам канваса? Мне еще игрока надо перемещать ровно в центр квадрата даже если клик был в углу квадрата, как с помощью координат такое реализовать не понимаю, тут все равно нужна какая то сетка, css grid как то можно использовать с канвасом?
Арман Садырбаев, Да, примерно так. Со временем, возникнет желание сделать несколько масштабов для картинок террейнов, чтобы показывать всю карту полностью, например, кусочками 16x16, а при "увеличении" карты перестраивать видимую часть карты уже картинками максимального разрешения.
Второй вопрос обычный - ставишь клик на элемент канвас. При клике вычисляешь границы канваса и по относительным координатам вычисляешь нужную ячейку
Граница канваса вычисляется getBoundingClientRect. Координаты клика видны в событии мыши.
