|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TikTacToe</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Kółko i Krzyżyk</h1> |
|
|
<div class="board"> |
|
|
<div class="cell"></div> |
|
|
<div class="cell"></div> |
|
|
<div class="cell"></div> |
|
|
<div class="cell"></div> |
|
|
<div class="cell"></div> |
|
|
<div class="cell"></div> |
|
|
<div class="cell"></div> |
|
|
<div class="cell"></div> |
|
|
<div class="cell"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let currentPlayer = 'x'; |
|
|
const cells = document.querySelectorAll('.cell'); |
|
|
|
|
|
cells.forEach(cell => { |
|
|
cell.addEventListener('click', () => { |
|
|
if (!cell.classList.contains('x') && !cell.classList.contains('o')) { |
|
|
cell.classList.add(currentPlayer); |
|
|
currentPlayer = currentPlayer === 'x' ? 'o' : 'x'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
