Beseitige den letzten Bug in deinem Programm und sorge dafür, dass ein Spieler nicht weiter Kästchen anklicken kann, nachdem das Spiel bereits beendet ist. Füge eine Anweisung ein, die prüft, ob jemand gewonnen hat.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Tic-Tac-Toe</title>
<style>
.zeile div {
padding: 10px;
border: 1px solid black;
height: 30px;
width: 30px;
float: left;
}
.zeile {
clear: both;
}
</style>
</head>
<body>
Klicke hier, um Tic-Tac-Toe zu spielen!<br/>
<div>
<div class="zeile">
<div id="0_0" onclick="setze(this)"></div>
<div id="1_0" onclick="setze(this)"></div>
<div id="2_0" onclick="setze(this)"></div>
</div>
<div class="zeile">
<div id="0_1" onclick="setze(this)"></div>
<div id="1_1" onclick="setze(this)"></div>
<div id="2_1" onclick="setze(this)"></div>
</div>
<div class="zeile">
<div id="0_2" onclick="setze(this)"></div>
<div id="1_2" onclick="setze(this)"></div>
<div id="2_2" onclick="setze(this)"></div>
</div>
</div>
<script>
var gewonnen = false;
var aktuellerSpieler = "O";
function setze(kästchen) {
if(kästchen.innerText != "" || gewonnen) return;
kästchen.innerText = aktuellerSpieler;
aktuellerSpieler == "O" ? aktuellerSpieler = "X" : aktuellerSpieler = "O";
prüfeSpielfeld();
}
function prüfeSpielfeld() {
for(var i = 0; i <= 2; i++){
prüfeGewonnen(document.getElementById("0_" + i).innerText,
document.getElementById("1_" + i).innerText,
document.getElementById("2_" + i).innerText);
prüfeGewonnen(document.getElementById(i + "_0").innerText,
document.getElementById(i + "_1").innerText,
document.getElementById(i + "_2").innerText);
}
prüfeGewonnen(document.getElementById("0_0").innerText,
document.getElementById("1_1").innerText,
document.getElementById("2_2").innerText);
prüfeGewonnen(document.getElementById("0_2").innerText,
document.getElementById("1_1").innerText,
document.getElementById("2_0").innerText);
}
function prüfeGewonnen(erstes, zweites, drittes) {
if(erstes != "" && erstes == zweites && erstes == drittes) {
alert("Gewonnen!");
gewonnen = true;
}
}
</script>
</body>
</html>
Illustrations © Duncan Beedie
All rights reserved.