Как сделать игровую карту из квадратиков (поле, по типу шахмат, но с прокруткой) на html + css?

Question

[olegkos]

Есть div блок
Нужно сделать в нём игровое поле (карту) состоящее из большого количества квадратиков одинакового размера

например 100 квадратиков по горизонтали и 100 по вертикали
Всё что выходит за пределы блока можно было бы прокрутить (скролл)
Квадратики должны быть кликабельными

Проблема возникла на создании следующей линии (как её лучше переносить) и на прокрутке

Более сложное: в идеале чтобы ещё можно было менять размер этих квадратиков колесиком мыши или кнопками (зум)

Использую react js, но можно пример и на чистом html
Буду благодарен!

Comments

[olegkos]

UPD: т.е. всего 10 000 квадратиков
по типу шахматной доски
И совсем в идеале, использовать какую нибудь реакт библиотеку для прорисовки только тех квадратиков, которые сейчас видно, тк не уверен как отразится на производительности наличие 10000 элементов

Answer 1

[VoidVolker]

не уверен как отразится на производительности наличие 10000 элементов

Крайне отрицательно. Для вашей задачи единственный вариант - это использовать canvas и соответствующую графическую библиотеку. Для проверки просто сделайте обычную таблицу и посмотрите как быстро оно будет работать.