czwartek, 2021-10-28

HTML i CSS: Szachownica

Wykonanie szachownicy z pomocą języków HTML i CSS tylko pozornie wydaje się trudne.

Szachownica

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟
♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖

Symbole szachowe

Konieczność dołączenia do projektu symboli szachowych nie wygląda zachęcająco, jednak okazuje się, że nie ma potrzeby tworzenia (lub pozyskania) dodatkowych plików graficznych. Symbole szachowe zostały zdefiniowane w Unikodzie i aby je wyświetlić, wystarczy zastosować właściwe odwołanie znakowe lub wręcz „wkleić” je do dokumentu.

Nazwa	Symbol	Unikod	HTML (dec.)	HTML (hex.)
król	♔	U+2654	♔	♔
hetman	♕	U+2655	♕	♕
wieża	♖	U+2656	♖	♖
goniec	♗	U+2657	♗	♗
skoczek	♘	U+2658	♘	♘
pionek	♙	U+2659	♙	♙
król	♚	U+265A	♚	♚
hetman	♛	U+265B	♛	♛
wieża	♜	U+265C	♜	♜
goniec	♝	U+265D	♝	♝
skoczek	♞	U+265E	♞	♞
pionek	♟	U+265F	♟	♟

Kod HTML

Do przedstawienia szachownicy wykorzystano tabelę HTML. Zgodnie z zasadami gry w szachy ma ona wymiary osiem na osiem pól (osiem wierszy po osiem pól każdy).

<table class="szachy">
  <tbody>
    <tr>
      <td>♜</td>
      <td>♞</td>
      <td>♝</td>
      <td>♛</td>
      <td>♚</td>
      <td>♝</td>
      <td>♞</td>
      <td>♜</td>
    </tr>
    <tr>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
    </tr>
    <tr>
      <td>♖</td>
      <td>♘</td>
      <td>♗</td>
      <td>♕</td>
      <td>♔</td>
      <td>♗</td>
      <td>♘</td>
      <td>♖</td>
    </tr>
  </tbody>
</table>

Kod CSS

Szachownica otrzymała obramowanie (własność border dla selektora .szachy). Reguły CSS width oraz height zastosowane do każdego pola tabeli (selektor .szachy td) służą do ustawienia stałych rozmiarów. Własności text-align oraz vertical-align „wyśrodkowują” figury odpowiednio w poziomie i w pionie. Selektor .szachy tr:nth-child(odd) td:nth-child(even) odnosi się do parzystych (even) pól nieparzystych (odd) wierszy. Ostatni selektor wybiera elementy „odwrotnie” czyli parzyste pola nieparzystych wierszy.

.szachy {
	border:solid 1px #777;
}
.szachy td {
	width:36px;
	height:36px;
	text-align: center;
	vertical-align: middle;
	font-size:20px;
}
.szachy tr:nth-child(odd) td:nth-child(even) {
	background: #ccc;
}
.szachy tr:nth-child(even) td:nth-child(odd) {
	background: #ccc;
}