alexbuki
@alexbuki
программист js

Как решить задачку (шахматная доска, ход конем) без использования js?

Задачка с контеста.
Нужно сверстать шахматную доску и когда кликаешь по клетке - тебе показывают, куда с этой клетки может пойти конь.
5db4b8ab26577686471390.png
Сложность в том, что нельзя использовать js. Только css и html.
Изначально ни одна ячейка не выделена.

Я пока смог сверстать только доску и при клике выделять нужную клетку.
Делал через input radio + label и display:grid
Ниже код и ссылка на codepen.
  • Вопрос задан
  • 2726 просмотров
Решения вопроса 1
profesor08
@profesor08 Куратор тега CSS
Вот ты с выделением ячейки справился. Молодец. Теперь задай для выделенной ячейки 8 теней синего цвета и позиционируй как надо.

input[type="radio"]:checked + label {
    background: #FF0000;
    box-shadow: 60px 30px 0 0 blue, 60px -30px 0 0 blue;
    position: relative;
    z-index: 1;
}


Можешь даже анимацию задать для тени
label {
    transition: ease box-shadow .3s;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
alexbuki
@alexbuki Автор вопроса
программист js
Спасибо всем и особенно profesor08 и Рустам Байназаров
В итоге так получилось
Ответ написан
Комментировать
zkrvndm
@zkrvndm
Архитектор решений
Для ячеек, что после красного идут можно определить стили через селекторы + / ~
А вот для ячеек что идут до красного, кажется что никак нельзя стили определить, ведь селекторы соседей работают только вниз. Однако, чисто гипотетически можно наложить поверх доски ещё одну прозрачную дочку повернув на 180 градусов и тогда по идее можно. Только надо изучить как себя тут будет вести свойство pointer-events
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
21 нояб. 2024, в 19:31
500 руб./за проект
21 нояб. 2024, в 19:28
200000 руб./за проект