Я играл с HTML и CSS, чтобы создать простую настольную игру с двумя игроками без использования JavaScript. Я использую метки, переключатели и флажки для создания разных состояний и имитирую какую-то логику, поэтому кусок будет перемещаться по доске.
Он работает "отлично", хотя удобство использования не очень велико. Например, после нажатия на кубик, плитка перемещается, и я показываю кнопку, чтобы перейти к следующему игроку (снова контролируется меткой и флажком)... что не очень хорошо, было бы лучше, если бы он изменил игрока "автоматически."
Проблема в том, что <label> может ориентироваться только на один элемент, и я не знаю, как запускать два "действия" (или побочные эффекты) одним щелчком мыши.
Следующий код - это mcve, чтобы лучше визуализировать проблему: есть два игрока (по очереди), доска с тремя фрагментами (представленная 6 переключателями: 1 на игрока и плитка) и две кнопки для изменения поворота игрока (только один видимый). Если вы нажмете кнопку изменения поворота, поворот перейдет к следующему игроку. (Более сложный пример можно найти здесь)
Проблема в том, что пользователи вынуждены нажимать кнопку, чтобы изменить поворот, иначе один и тот же игрок всегда будет активным. Есть ли способ сделать так, чтобы при нажатии на ярлык активизировалась не только плитка, но и поворот? Или в его отсутствие есть ли альтернатива для достижения этого? (без использования JS)
#p1:checked ~ [for=p1],
#p1:checked ~ [for^=tile-p2],
#p1:checked ~ [name^=tile-p2],
#p2:checked ~ [for=p2],
#p2:checked ~ [for^=tile-p1],
#p2:checked ~ [name^=tile-p1]
{
display: none;
}
/* more rules to hide/show more elements */<h1>Players:</h1>
<input type="radio" id="p1" name="player" checked /> P1
<input type="radio" id="p2" name="player" /> P2
<h1>Board: </h1>
Player 1:
<input type="radio" id="tile-p1-1" name="tile-p1" checked />
<label for="tile-p1-1">P1 to 1</label>
<input type="radio" id="tile-p1-2" name="tile-p1" />
<label for="tile-p1-2">P1 to 2</label>
<input type="radio" id="tile-p1-3" name="tile-p1" />
<label for="tile-p1-3">P1 to 3</label>
<br/>
Player 2:
<input type="radio" id="tile-p2-1" name="tile-p2" checked />
<label for="tile-p2-1">P2 to 1</label>
<input type="radio" id="tile-p2-2" name="tile-p2" />
<label for="tile-p2-2">P2 to 2</label>
<input type="radio" id="tile-p2-3" name="tile-p2" />
<label for="tile-p2-3">P2 to 3</label>
<h1>Change of turn:</h1>
<label for="p2">Change to Player 2</label>
<label for="p1">Change to Player 1</label>