Beispiel:Tic-tac-toe-6.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<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 - 6</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');
}
.tic-tac-toe .highlighted{
background-color: yellow;
}
.warning {
color: red;
}
.success {
color: green;
background-color: yellow;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#gameboard').addEventListener('click', markField);
var current = 0,
players = [ 'x', 'o'],
winner,
finished, // Flag für Spiel-ist-zuende;
fields = document.querySelectorAll('#gameboard button'),
hint = document.querySelector('#hint');
function markField (e) {
var field = e.target;
field.setAttribute('aria-label', players[current]);
field.setAttribute('disabled','disabled');
current = 1 - current;
hint.innerText = 'Spieler ' + players[current] + ' ist am Zug.';
checkIfCompleted();
}
function checkIfCompleted () {
var fields = document.querySelectorAll('#gameboard button'), // fields ist die Liste unserer Felder
full = true; // wir gehen davon aus, dass alle Zellen benutzt wurden
// alle Felder markiert?
for (var i = 0; i < fields.length; i++) {
if (!fields[i].hasAttribute('disabled')) {
full = false;
}
}
// wenn full, dann Spiel vorbei, wenn nicht full, dann noch nicht
if (full) {
full = true;
}
// Gewinner ermitteln
for (i = 0; i < 3; i++) {
// 3 senkrecht
if (fields[0 + i].getAttribute('aria-label') != ''
&& fields[0 + i].getAttribute('aria-label') == fields[3 + i].getAttribute('aria-label')
&& fields[3 + i].getAttribute('aria-label') == fields[6 + i].getAttribute('aria-label')
) {
// we have a winner!
winner = fields[0 + i].getAttribute('aria-label');
highlightCells([fields[i], fields[3 + i], fields[6 + i]]);
}
// 3 waagrecht
if (fields[i*3].getAttribute('aria-label') != ""
&& fields[i*3].getAttribute('aria-label') == fields[i*3 + 1].getAttribute('aria-label')
&& fields[i*3 + 1].getAttribute('aria-label') == fields[i*3 + 2].getAttribute('aria-label')
) {
// we have a winner!
winner = fields[i*3].getAttribute('aria-label');
highlightCells([fields[i*3], fields[i*3 + 1], fields[i*3 +2]]);
}
}
// diagonal links oben nach rechts unten
if (fields[0].getAttribute('aria-label') != ""
&& fields[0].getAttribute('aria-label') == fields[4].getAttribute('aria-label')
&& fields[4].getAttribute('aria-label') == fields[8].getAttribute('aria-label')
) {
winner = fields[0].getAttribute('aria-label');
highlightCells([fields[0], fields[4], fields[8]]);
}
// diagonal rechts oben nach links unten
if (fields[2].getAttribute('aria-label') != ""
&& fields[2].getAttribute('aria-label') == fields[4].getAttribute('aria-label')
&& fields[4].getAttribute('aria-label') == fields[6].getAttribute('aria-label')
) {
winner = fields[2].getAttribute('aria-label');
highlightCells([fields[2], fields[4], fields[6]]);
}
// Game over?
if (full || winner) {
finished = true;
if (winner == 'x' || winner == 'o') {
hint.innerText = 'Das Spiel ist zu Ende, weil Spieler ' + winner + ' gewonnen hat!';
hint.className = 'success';
} else {
// Spiel zu Ende weil alle Felder belegt
hint.innerText = 'Das Spiel endet unentschieden, weil alle Felder belegt sind.';
hint.className = 'warning';
}
//new game?
var newGame = confirm('Neues Spiel?', '');
if (newGame == true) {
location.reload();
return false;
}
}
}
function highlightCells (cells) {
for (var i = 0; i < 3; i++) {
cells[i].classList.add('highlighted');
}
}
});
</script>
</head>
<body>
<h1>Tic-Tac-Toe 6 (Spielende 2)</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 aria-label="">A1</button>
<button aria-label="">A2</button>
<button aria-label="">A3</button>
<button aria-label="">B1</button>
<button aria-label="">B2</button>
<button aria-label="">B3</button>
<button aria-label="">C1</button>
<button aria-label="">C2</button>
<button aria-label="">C3</button>
</div>
</div>
</body>
</html>
