Szachownica w HTML to popularne ćwiczenie programistyczne oraz praktyczny komponent stosowany m.in. do nauki programowania, tworzenia gier online lub jako element dekoracyjny stron. Przygotowanie takiej planszy uczy podstawowych technik HTML, CSS, a w wersji bardziej zaawansowanej również JavaScript.
Prosta szachownica w HTML i CSS – krok po kroku
Najprostszym sposobem na zbudowanie szachownicy jest wykorzystanie siatki 8×8 z kwadratowych elementów. Oto przykładowy, minimalistyczny kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Szachownica w HTML i CSS</title>
<style>
.szachownica {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
border: 4px solid #333;
width: 400px;
height: 400px;
margin: 40px auto;
box-shadow: 0 2px 18px #888;
}
.pole {
width: 50px;
height: 50px;
box-sizing: border-box;
}
.biale { background: #f0d9b5; }
.czarne { background: #b58863; }
</style>
</head>
<body>
<div class="szachownica">
<!-- Wypełnienie planszy wygenerowane ręcznie (przykład tylko pierwszych 2 wierszy) -->
<div class="pole biale"></div>
<div class="pole czarne"></div>
<div class="pole biale"></div>
<div class="pole czarne"></div>
<div class="pole biale"></div>
<div class="pole czarne"></div>
<div class="pole biale"></div>
<div class="pole czarne"></div>
<!-- kolejny wiersz -->
<div class="pole czarne"></div>
<div class="pole biale"></div>
<div class="pole czarne"></div>
<div class="pole biale"></div>
<div class="pole czarne"></div>
<div class="pole biale"></div>
<div class="pole czarne"></div>
<div class="pole biale"></div>
<!-- reszta analogicznie -->
</div>
</body>
</html>
Najważniejsze elementy –
- HTML – szachownica to seria powtarzających się elementów div reprezentujących pola;
- CSS – wykorzystanie display: grid oraz naprzemienne kolorowanie pól.
Automatyzacja – generowanie szachownicy za pomocą JavaScript
Ręczne tworzenie 64 pól bywa żmudne. Możesz zautomatyzować to zadanie z użyciem JavaScript, co przydaje się np. podczas programowania własnej gry szachowej.
<script>
document.addEventListener('DOMContentLoaded', () => {
const szachownica = document.querySelector('.szachownica');
for (let y = 0; y < 8; y++) {
for (let x = 0; x < 8; x++) {
const pole = document.createElement('div');
pole.classList.add('pole', (x + y) % 2 === 0 ? 'biale' : 'czarne');
szachownica.appendChild(pole);
}
}
});
</script>
Umieszczając ten skrypt na stronie (po elemencie <div class="szachownica">), cały układ zostanie wygenerowany automatycznie.
Alternatywne sposoby – szachownica w tabeli HTML
Tradycyjnie, plansze siatkowe można budować za pomocą tabeli HTML. Przykład:
<table style="border-collapse: collapse; margin: 40px auto;">
<tbody>
<!-- Wiersze -->
<tr>
<td style="width:50px;height:50px;background:#f0d9b5;"></td>
<td style="width:50px;height:50px;background:#b58863;"></td>
<!-- Kolejne komórki -->
</tr>
<!-- Kolejne wiersze -->
</tbody>
</table>
Do generowania całej tabeli można użyć pętli w JavaScript, by uniknąć powtarzalnej, ręcznej pracy.
Najważniejsze zastosowania szachownicy w HTML
- Plansza gry szachowej online – podstawa do zaimplementowania ruchów figur, silnika gry, podświetlenia ruchów, obsługi przeciwnika AI lub gry z innymi osobami;
- Edukacyjne ćwiczenia programistyczne – doskonała nauka pracy z gridem, flexboxem, dynamicznym generowaniem treści, pętlami i warunkami;
- Wyświetlanie kolorowych układów – szachownica może służyć do pokazywania efektów wizualnych lub animacji CSS (np. efekt fali przez zmianę kolorów).
Personalizacja i rozbudowa
- Animacje – pola mogą zmieniać kolory po kliknięciu lub po najechaniu myszką (efekty :hover);
- Figury szachowe – możesz wypełnić pola ikonami z Unicode lub obrazkami SVG;
- Responsywność – dzięki elastycznym jednostkom (np. procenty, vw/vh) szachownica może automatycznie dopasowywać się do rozmiaru ekranu.
Przykład z dodaniem figur Unicode do pól –
<div class="pole czarne">♜</div> <!-- Wieża czarna -->
<div class="pole biale">♔</div> <!-- Król biały -->
Figury szachowe: ♔ ♕ ♖ ♗ ♘ ♙ (białe), ♚ ♛ ♜ ♝ ♞ ♟ (czarne).
Podsumowanie
Szachownica w HTML może zostać wykonana na wiele sposobów – zarówno w czystym HTML i CSS, jak i z pomocą JavaScript. Jest to świetny przykład praktycznego użycia siatek CSS, zagnieżdżania bloków oraz dynamicznego generowania treści. Plansza szachowa to nie tylko świetne ćwiczenie programistyczne, lecz również gotowy komponent do różnych projektów internetowych związanych z grami i edukacją.
