Beispiel:Tic-tac-toe-4.html
Aus SELFHTML-Wiki
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Tic-Tac-Toe - 4</title>
<style>
.tic-tac-toe #gameboard {
width: 60vmin;
height: 60vmin;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.tic-tac-toe button {
width:20vmin;
height: 20vmin;
background: white;
border: 1px solid black;
margin: 0;
font: 0/0 transparent;
}
.tic-tac-toe [aria-label="x"] {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.1%22%20x2%3D%220.9%22%20y2%3D%220.9%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.9%22%20x2%3D%220.9%22%20y2%3D%220.1%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E');
}
.tic-tac-toe [aria-label="o"]{
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Ccircle%20cx%3D%220.5%22%20cy%3D%220.5%22%20r%3D%220.4%22%20fill%3D%22none%22%20stroke-width%3D%220.1%22%20stroke%3D%22blue%22%2F%3E%3C%2Fsvg%3E');
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#gameboard').addEventListener('click', markField);
var current = 0,
players = [ 'x', 'o'];
function markField (e) {
var field = e.target;
field.setAttribute('aria-label', players[current]);
field.setAttribute('disabled','disabled');
current = 1 - current;
document.querySelector('#hint').innerText = 'Spieler ' + players[current] + ' ist am Zug.';
}
}
);
</script>
</head>
<body>
<h1>Tic-Tac-Toe 4 (Spielerwechsel)</h1>
<div class="tic-tac-toe" aria-describedby="hint">
<p id="hint">Zum Spielen bitte abwechselnd in die Spielfelder klicken/tappen!</p>
<div id="gameboard">
<button>A1</button>
<button>A2</button>
<button>A3</button>
<button>B1</button>
<button>B2</button>
<button>B3</button>
<button>C1</button>
<button>C2</button>
<button>C3</button>
</div>
</div>
</body>
</html>
