Сетка из "включаемых" и "выключаемых" ячеек средствами только HTML и CSS
Наверное, достаточно простой шаблон показан ниже. Сам шаблон табличный, "кликабельность" построена на стилизованных элементах input type="checkbox" и label.
Таблицу-поле, конечно, можно генерировать и в двойном цикле яваскриптом, а также легко "прикручивать" сюда дополнительный игровой или иной функционал.
Ниже показан пример в работе (по пустым ячейкам таблицы можно щёлкать, включённый JavaScript не нужен) и код HTML/CSS (без внешнего обрамления HTML), предполагается, что он будет сохранён в кодировке Юникода UTF-8. Сами фигуры также представляют собой символы Юникода, поэтому включённая в браузере графика тоже не нужна :)
Вроде бы, не должно особо зависеть от других стилей страницы, по крайней мере, в админке тоже выглядит без искажений. В IE11 и очень старом Android-браузере у меня сработало.
<style> .mybordered { /* обрамление */ margin: auto; border: 1px dotted #f00; border-collapse: collapse; } .myscaled { /* абсолютный масштаб */ width: 10em; height: 10em; text-align: center; } .myscaled100ps { /* масштаб в процентах */ width: 100%; height: 100%; } .mytransparent { /* прозрачный */ display: none; opacity: 0; } .myspan { /*оформление внутреннего контента */ font-size: 8em; display: block; opacity: 0; } input[type="checkbox"]:checked + .myspan { /* выбранный кликом */ opacity: 1; color: blue; } </style> <table class="mybordered"> <tr class="mybordered"> <td class="mybordered myscaled" id="cell_1_1"> <label class="myscaled100ps"> <input type="checkbox" class="mytransparent"> <span class="myspan">♔</span> </label> </td> <td class="mybordered myscaled" id="cell_1_2"> <label class="myscaled100ps"> <input type="checkbox" class="mytransparent"> <span class="myspan">♕</span> </label> </td> <td class="mybordered myscaled" id="cell_1_3"> <label class="myscaled100ps"> <input type="checkbox" class="mytransparent"> <span class="myspan">♖</span> </label> </td> </tr> <tr class="mybordered"> <td class="mybordered myscaled" id="cell_2_1"> <label class="myscaled100ps"> <input type="checkbox" class="mytransparent"> <span class="myspan">♗</span> </label> </td> <td class="mybordered myscaled" id="cell_2_2"> <label class="myscaled100ps"> <input type="checkbox" class="mytransparent"> <span class="myspan">♘</span> </label> </td> <td class="mybordered myscaled" id="cell_2_3"> <label class="myscaled100ps"> <input type="checkbox" class="mytransparent"> <span class="myspan">♙</span> </label> </td> </tr> </table>
19.06.2020, 12:55 [1303 просмотра]