{ Navigation }

Othello − LX

Quellcode

Zuerst ein bisschen CSS-Kram. Für dieses Spiel habe ich ein bisschen mit Klassen herumjongliert, die verschiedene Hintergrundbilder für Tabellenzellen setzen.

Nun zum eigentlichen Script. Zuerst kommen die üblichen Deklarationen globaler Variablen.
Wenn der Computer an der Reihe ist, ist die folgende Variable 1. Sie wird benutzt, um weitere Aktionen des Spielers zu unterbinden.

var progress = 1;

die Farben der beiden Parteien

var computer = 1; var player = 2;

1 wenn der Spieler die Anzahlen der umzudrehenden Chips sehen möchte

var showHelp = 0;

das Spielbrett, 0 ist ein leeres Feld, 1 ist ein weißer Chip, 2 ein schwarzer

var Spielfeld = new Array(64); var tempSpielfeld = new Array(64);

enthält mögliche legale Züge

var possibilities = new Array(); var tempPossibilities = new Array();

Eine Matrix mit Werten, die der KI hilft, Brettpositionen zu bewerten.
Die Ecken sind die wichtigsten Felder, da sie nicht mehr vom Gegner eingenommen werden können. Die angrenzenden Felder sind die schlimmsten, da diese normalerweise dazu f+ühren, dass der Gegner die Ecken gewinnt. Die Felder am Spielfeldrand haben höhere Werte als die in der Mitte, da letztere ihren Besitzer häufiger wechseln.

var wert = new Array( 50, -1, 5, 2, 2, 5, -1, 50, -1, -10, 1, 1, 1, 1, -10, -1, 5, 1, 1, 1, 1, 1, 1, 5, 2, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 2, 5, 1, 1, 1, 1, 1, 1, 5, -1, -10, 1, 1, 1, 1, -10, -1, 50, -1, 5, 2, 2, 5, -1, 50 );

die zwei Variablen, um die momentan auf dem Brett befindlichen Chips zu zählen

var white, black;

Die folgende Funktion initialisiert das Spiel. Sie entfernt alle Chips vom Feld, resettet die Arrays der möglichen Züge und setzt die 4 Start-Chips.

function init() { for (var i = 0; i < 64; i++) { putPiece(0,i); Spielfeld[i] = 0; possibilities[i] = new Array(); possibilities[i]['anzahl'] = 0; possibilities[i]['flips'] = ''; tempPossibilities[i] = new Array(); tempPossibilities[i]['anzahl'] = 0; tempPossibilities[i]['flips'] = ''; } putPiece(1, 27); putPiece(2, 28); putPiece(2, 35); putPiece(1, 36); }

Die startgame()-Funktion wird aufgerufen, wenn der Spieler den Neues Spiel-Button drückt. Sie ruft init() auf, prüft die möglichen Züge, versteckt den Button und ruft entweder die KI auf, wenn diese Schwarz spielt, oder zeigt die Flipcounts an, wenn der Spieler dies wünschte.

function startgame() { init(); checkPossibilities(2); document.getElementById('nG').style.visibility = 'hidden'; if (computer == 2) KI(); else { progress = 0; for (var i = 0; i < 64; i++) if (possibilities[i]['anzahl'] > 0) putPiece (5,i); } }

Die folgende Funktion prüft, ob es momentan gültige Züge gibt.

function checkMove() { var j = 0; for (var i = 0; i < 64; i++) { j += possibilities[i]['anzahl']; } return j; }

put() setzt den Chip des Spielers und iniziiert den Zug des Computers.

function put(field) {

Natürlich ist ein Zug nur möglich, wenn sich noch kein Chip auf diesem Feld befindet.

if (Spielfeld[field] != 0) return false;

Außerdem muss der Zug auch im possibilities[]-Array vorhanden sein.

if (possibilities[field]['anzahl'] == 0) return false;

verbiete weitere Aktionen, bis der Computer fertig ist

progress = 1;

setze den Chip

putPiece(player, field);

dreht die Chips zwischen dem neu platzierten Chip und bereits auf dem Brett liegenden Chips um

flip(player, field);

entfernt die Hilfe auf dem Brett

for (var i = 0; i < 64; i++) if (Spielfeld[i] != 1 && Spielfeld[i] != 2) putPiece(0,i);

Letztendlich werden die neuen Zugmöglichkeiten für den Computer geprüft.

checkPossibilities(computer);

Wenn ein Zug möglich ist, wird die KI aufgerufen.

if (checkMove() != 0) { setTimeout("KI()",2000); }

Ansonsten kann der Spieler einen weiteren Chip platzieren, wenn er mögliche Züge hat. Ist dies auch nicht der Fall, ist das Spiel vorüber.

else { progress = 0; checkPossibilities(player); if (checkMove() == 0) gameOver(); else for (i = 0; i < 64; i++) if (possibilities[i]['anzahl'] > 0) putPiece (5,i); } return true; }

Wenn das Spiel vorbei ist, wird einiges auf das Brett geschrieben und der Neues Spiel-Button wieder angezeigt.

function gameOver() { progress = 1; document.getElementById('O9').firstChild.nodeValue = 'G'; document.getElementById('O10').firstChild.nodeValue = 'A'; document.getElementById('O11').firstChild.nodeValue = 'M'; document.getElementById('O12').firstChild.nodeValue = 'E'; document.getElementById('O19').firstChild.nodeValue = 'O'; document.getElementById('O20').firstChild.nodeValue = 'V'; document.getElementById('O21').firstChild.nodeValue = 'E'; document.getElementById('O22').firstChild.nodeValue = 'R'; if (white > black) { . . . } else if (white < black) { . . . } else { . . . } document.getElementById('nG').style.visibility = 'visible'; }

flip() rotiert Chips

function flip(color, field) { var temp = new Array(); temp = possibilities[field]['flips'].split('|'); for (i = 0; i < temp.length-1; i++) { putPiece(color,temp[i]); } }

fakeFlip() macht dasselbe, außer dass es keine Grafiken austauscht

function fakeFlip(color, field) { var temp = new Array(); temp = tempPossibilities[field]['flips'].split('|'); for (var i = 0; i < temp.length-1; i++) { Spielfeld[(temp[i])] = color; } }

Die folgende Funktion wird benutzt, um Änderungen einer bestimmten Zelle auf dem Spielfeld vorzunehmen.

function putPiece(color, field) {

5 für den color-Parameter wird für die Hilfestellungen benutzt. Diese werden natürlich nur angezeigt, wenn der Spieler an der Reihe ist, d.h. wenn progress == 0.

if (color == 5 && progress == 0) { document.getElementById('O'+field).className = 'game point'; if (showHelp == 1) document.getElementById('O'+field).firstChild.nodeValue = possibilities[field]['anzahl']; }

0 für color wird benutzt, um eine Zelle zu leeren.

else if (color == 0 || (color == 5 && progress == 1)) { document.getElementById('O'+field).className = 'game normal'; document.getElementById('O'+field).firstChild.nodeValue = ' '; }

Die anderen Farben sind für Weiß und Schwarz. Der folgende Abschnitt rotiert oder setzt einen Chip. Nachdem die Rotations-Animation abgelaufen ist, wird sie außerdem durch ein statisches Bild ersetzt.

else { if (Spielfeld[field] != 0) { document.getElementById('O'+field).className = (color == 1) ? 'towhite' : 'toblack'; setTimeout("document.getElementById('O"+field+"').className = "+ ((color == 1) ? "'white'; " : "'black'; "), 1500); } else document.getElementById('O'+field).className = (color == 1) ? 'white' : 'black'; Spielfeld[field] = color; document.getElementById('O'+field).firstChild.nodeValue = ' ';

Jetzt werden die Chips der beiden Parteien gezählt.

white = 0; black = 0; for (j = 0; j < 64; j++) { if (Spielfeld[j] == 1) white++; if (Spielfeld[j] == 2) black++; } document.getElementById('white').firstChild.nodeValue = white; document.getElementById('black').firstChild.nodeValue = black; } }

Was jetzt folgt ist eine ziemlich umfangreiche Funktion. Diese prüft die legalen möglichen Züge für eine Partei, welche dann an den possibilities[]-Array angehangen werden.

function checkPossibilities(color) { var Reihe, Spalte; var i, j, k; var flips = ''; var anzahl = 0;

Zuerst muss dieser Array geleert werden.

for (i = 0; i < 64; i++) { possibilities[i]['anzahl'] = 0; possibilities[i]['flips'] = ''; }

Danach wird die Farbe des Gegenspielers ermittelt.

var opponent = (color == 1) ? 2 : 1;

Nun erfolgen für jeden Chip derselben Farbe einige Prüfungen.

for (i = 0; i < 64; i++) { if (Spielfeld[i] == color) {

Die Zeile und Spalte des aktuellen Chips werden berechnet.

Reihe = Math.floor(i/8); Spalte = i%8;

Nun wird die aktuelle Zeile auf leere Felder geprüft. Natürlich werden das aktuelle Feld und die angrenzenden Felder übersprungen.

for (j = 0; j < 8; j++) { if (j == Spalte || j == Spalte-1 || j == Spalte+1) continue;

Wenn ein leeres Feld gefunden wurde, wird geprüft, ob alle Felder zwischen dem ausgewählten und dem leeren Feld dem Gegenspieler gehören. Ist dies der Fall, wird anzahl inkrementiert und die Felder zu flips hinzugefügt, wenn nicht, werden beide Variablen resettet und nach dem nächsten leeren Feld gesucht.

if (Spielfeld[(Reihe*8+j)] == 0) { if (Spalte > j) { for (k = 1; k < Spalte-j; k++) { if (Spielfeld[i-k] == opponent) { anzahl++; flips = flips.concat((i-k) + '|'); } else { anzahl = 0; flips = ''; break; } } possibilities[(Reihe*8+j)]['anzahl'] += anzahl; possibilities[(Reihe*8+j)]['flips'] = possibilities[(Reihe*8+j)]['flips'].concat(flips); anzahl = 0; flips = ''; } else { for (k = 1; k < j-Spalte; k++) { if (Spielfeld[i+k] == opponent) { anzahl++; flips = flips.concat((i+k) + '|'); } else { anzahl = 0; flips = ''; break; } } possibilities[(Reihe*8+j)]['anzahl'] += anzahl; possibilities[(Reihe*8+j)]['flips'] = possibilities[(Reihe*8+j)]['flips'].concat(flips); anzahl = 0; flips = ''; } } }

Dieselbe Vorgehensweise für Chips derselben Spalte...

for (j = 0; j < 8; j++) { if (j == Reihe || j == Reihe-1 || j == Reihe+1) continue; if (Spielfeld[(j*8+Spalte)] == 0) { if (Reihe > j) { for (k = 1; k < Reihe-j; k++) { if (Spielfeld[(i-k*8)] == opponent) { anzahl++; flips = flips.concat((i-k*8) + '|'); } else { anzahl = 0; flips = ''; break; } } possibilities[(j*8+Spalte)]['anzahl'] += anzahl; possibilities[(j*8+Spalte)]['flips'] = possibilities[(j*8+Spalte)]['flips'].concat(flips); anzahl = 0; flips = ''; } else { for (k = 1; k < j-Reihe; k++) { if (Spielfeld[(i+k*8)] == opponent) { anzahl++; flips = flips.concat((i+k*8) + '|'); } else { anzahl = 0; flips = ''; break; } } possibilities[(j*8+Spalte)]['anzahl'] += anzahl; possibilities[(j*8+Spalte)]['flips'] = possibilities[(j*8+Spalte)]['flips'].concat(flips); anzahl = 0; flips = ''; } } }

entsprechend für die Diagonalen...

for (j = 2; j < 8; j++) { if (j <= Reihe && j <= Spalte && Spielfeld[(i-j*9)] == 0) { for (k = 1; k < j; k++) { if (Spielfeld[(i-k*9)] == opponent) { anzahl++; flips = flips.concat((i-k*9) + '|'); } else { anzahl = 0; flips = ''; break; } } possibilities[(i-j*9)]['anzahl'] += anzahl; possibilities[(i-j*9)]['flips'] = possibilities[(i-j*9)]['flips'].concat(flips); anzahl = 0; flips = ''; } if (j <= Reihe && j < 8-Spalte && Spielfeld[(i-j*7)] == 0) { for (k = 1; k < j; k++) { if (Spielfeld[i-k*7] == opponent) { anzahl++; flips = flips.concat((i-k*7) + '|'); } else { anzahl = 0; flips = ''; break; } } possibilities[(i-j*7)]['anzahl'] += anzahl; possibilities[(i-j*7)]['flips'] = possibilities[(i-j*7)]['flips'].concat(flips); anzahl = 0; flips = ''; } if ( j < 8-Reihe && j <= Spalte && Spielfeld[(i+j*7)] == 0) { for (k = 1; k < j; k++) { if (Spielfeld[i+k*7] == opponent) { anzahl++; flips = flips.concat((i+k*7) + '|'); } else { anzahl = 0; flips = ''; break; } } possibilities[(i+j*7)]['anzahl'] += anzahl; possibilities[(i+j*7)]['flips'] = possibilities[(i+j*7)]['flips'].concat(flips); anzahl = 0; flips = ''; } if (j < 8-Reihe && j < 8-Spalte && Spielfeld[(i+j*9)] == 0) { for (k = 1; k < j; k++) { if (Spielfeld[i+k*9] == opponent) { anzahl++; flips = flips.concat((i+k*9) + '|'); } else { anzahl = 0; flips = ''; break; } } possibilities[(i+j*9)]['anzahl'] += anzahl; possibilities[(i+j*9)]['flips'] = possibilities[(i+j*9)]['flips'].concat(flips); anzahl = 0; flips = ''; } } } } }

Schließlich und endlich das Herz des Spiels, die künstliche Intelligenz. I habe versucht, sie so einfach und effektiv wie möglich zu gestalten. Natürlich kann man sie ein bisschen austricksen, wenn man weiß, welche Züge bevorzugt werden, also wenn du das Spiel weiterhin genießen willst, überspringe diesen Teil und mache beim HTML-Teil weiter unten weiter. Wenn du allerdings wissen möchtest, wie die KI funktioniert, lies weiter.

function KI() { var i, j, k, l; var blah, blah2, nimm; var temp = new Array(); var temp2 = new Array(); var temp3 = new Array();

Die besten Züge sind immer die, bei denen der Gegner im nächsten Zug nicht setzen kann (auf diese Weite können auch mögliche Wipe-Outs herausgefunden werden, also Züge, bei denen dem Gegenspieler sämtliche Chips abgenommen werden). Als erstes wird also geprüft, ob solche Züge existieren. Dazu wird die oben bereits erklärte fakeFlip()-Funktion verwendet. Nachdem alle nötigen Chips gedreht wurden, wird die checkPossibilities()-Funktion für den Spieler aufgerufen und mit checkMove() geprüft, ob dieser legale Züge machen kann. Wenn nicht, so wird der aktuelle Zug sofort in die engere Auswahl der KI aufgenommen.

for (i = 0; i < 64; i++) { tempPossibilities[i]['anzahl'] = possibilities[i]['anzahl']; tempPossibilities[i]['flips'] = possibilities[i]['flips']; tempSpielfeld[i] = Spielfeld[i]; } for (i = 0; i < 64; i++) { if (tempPossibilities[i]['anzahl'] > 0) { Spielfeld[i] = computer; fakeFlip(computer, i); } else continue; checkPossibilities(player); if (checkMove() == 0) temp2.push(i); for (j = 0; j < 64; j++) Spielfeld[j] = tempSpielfeld[j]; } for (i = 0; i < 64; i++) { possibilities[i]['anzahl'] = tempPossibilities[i]['anzahl']; possibilities[i]['flips'] = tempPossibilities[i]['flips']; Spielfeld[i] = tempSpielfeld[i]; }

Wenn noch keine Züge gefunden wurden, sind die Ecken das nächste Ziel.

if (typeof(temp2[0]) == 'undefined') { if (possibilities[0]['anzahl'] > 0) temp2.push(0); if (possibilities[7]['anzahl'] > 0) temp2.push(7); if (possibilities[56]['anzahl'] > 0) temp2.push(56); if (possibilities[63]['anzahl'] > 0) temp2.push(63);

Wenn die Suche immer noch nicht von Erfolg gekrönt wurde, prüfe die Felder am Rand außer denen, die direkt an die Ecken grenzen. Diese Felder sind aber genauso wichtig unter der Bedingung, dass die Ecke bereits in Besitz genommen wurde, also werden sie direkt anschließend geprüft.

if (typeof(temp2[0]) == 'undefined') { for (i = 2; i < 6; i++) { if (possibilities[i]['anzahl'] > 0) temp2.push(i); if (possibilities[(i*8)]['anzahl'] > 0) temp2.push(i*8); if (possibilities[(i*8+7)]['anzahl'] > 0) temp2.push(i*8+7); if (possibilities[(56+i)]['anzahl'] > 0) temp2.push(56+i); } if (Spielfeld[0] == computer && possibilities[1]['anzahl'] > 0) temp2.push(1); if (Spielfeld[0] == computer && possibilities[8]['anzahl'] > 0) temp2.push(8); if (Spielfeld[7] == computer && possibilities[6]['anzahl'] > 0) temp2.push(6); if (Spielfeld[7] == computer && possibilities[15]['anzahl'] > 0) temp2.push(15); if (Spielfeld[56] == computer && possibilities[48]['anzahl'] > 0) temp2.push(48); if (Spielfeld[56] == computer && possibilities[57]['anzahl'] > 0) temp2.push(57); if (Spielfeld[63] == computer && possibilities[55]['anzahl'] > 0) temp2.push(55); if (Spielfeld[63] == computer && possibilities[62]['anzahl'] > 0) temp2.push(62);

Wenn noch kein Zug gefunden wurde, werden die dritte Reihe und Spalte von außen untersucht und die Felder, die diagonal an die Ecken grenzen, solange die Ecke bereits okkupiert wurde.

if (typeof(temp2[0]) == 'undefined') { for (i = 2; i < 6; i++) { if (possibilities[(16+i)]['anzahl'] > 0) temp2.push(16+i); if (possibilities[(i*8+2)]['anzahl'] > 0) temp2.push(i*8+2); if (possibilities[(i*8+5)]['anzahl'] > 0) temp2.push(i*8+5); if (possibilities[(40+i)]['anzahl'] > 0) temp2.push(40+i); } if (Spielfeld[0] == computer && possibilities[9]['anzahl'] > 0) temp2.push(9); if (Spielfeld[7] == computer && possibilities[14]['anzahl'] > 0) temp2.push(14); if (Spielfeld[56] == computer && possibilities[49]['anzahl'] > 0) temp2.push(49); if (Spielfeld[63] == computer && possibilities[54]['anzahl'] > 0) temp2.push(54);

Du weißt, wie's weitergeht... kein Zug gefunden, also weitersuchen. Dieses Mal in der zweiten Reihe und Spalte von außen...

if (typeof(temp2[0]) == 'undefined') { for (i = 2; i < 6; i++) { if (possibilities[(8+i)]['anzahl'] > 0) temp2.push(8+i); if (possibilities[(i*8+1)]['anzahl'] > 0) temp2.push(i*8+1); if (possibilities[(i*8+6)]['anzahl'] > 0) temp2.push(i*8+6); if (possibilities[(48+i)]['anzahl'] > 0) temp2.push(48+i); }

... die horizontal und vertikal an die Ecken grenzenden Felder, ungeachtet dessen, ob die Ecken bereits besetzt sind...

if (typeof(temp2[0]) == 'undefined') { if (possibilities[1]['anzahl'] > 0) temp2.push(1); if (possibilities[6]['anzahl'] > 0) temp2.push(6); if (possibilities[8]['anzahl'] > 0) temp2.push(8); if (possibilities[15]['anzahl'] > 0) temp2.push(15); if (possibilities[48]['anzahl'] > 0) temp2.push(48); if (possibilities[55]['anzahl'] > 0) temp2.push(55); if (possibilities[57]['anzahl'] > 0) temp2.push(57); if (possibilities[62]['anzahl'] > 0) temp2.push(62);

... und schließlich die diagonal angrenzenden Felder. Nun wurden alle Felder geprüft.

if (typeof(temp2[0]) == 'undefined') { if (possibilities[9]['anzahl'] > 0) temp2.push(9); if (possibilities[14]['anzahl'] > 0) temp2.push(14); if (possibilities[49]['anzahl'] > 0) temp2.push(49); if (possibilities[54]['anzahl'] > 0) temp2.push(54); } } } } } }

Jetzt muss der Computer aus den soeben herausgefundenen Zügen den besten wählen. Während der ersten 10 Züge geschieht das zufällig. Dies ermöglicht Züge, bei denen der Computer hinterher weit weniger Chips als der Gegner hat. Am Spielanfang kann dies einen großen Mobilitätsvorteil bedeuten. Außerdem macht die Zufallsauswahl die KI flexibler, da sie nicht immer mit denselben Zügen auf dieselbe Eröffung reagiert.

if (white + black < 25) { for (i = 0; i < temp2.length; i++) temp3[i] = temp2[i]; }

Später wird der Zug ausgewählt mit der größten Differenz zwischen den jetzt gewonnenen Werten und den möglichen Werten des besten Konterzuges des Spielers. An dieser Stelle wird der wert[]-Array vom Beginn wichtig.

else { var Differenz = -1000; if (temp2.length > 1) { for (i = 0; i < 64; i++) { tempPossibilities[i]['anzahl'] = possibilities[i]['anzahl']; tempPossibilities[i]['flips'] = possibilities[i]['flips']; tempSpielfeld[i] = Spielfeld[i]; } for (i = 0; i < temp2.length; i++) { temp = possibilities[(temp2[i])]['flips'].split('|'); blah = 0; for (j = 0; j < temp.length-1; j++) blah += wert[(temp[j])]; Spielfeld[(temp2[i])] = computer; fakeFlip(computer, (temp2[i])); checkPossibilities(player); for (j = 0; j < 64; j++) { temp = possibilities[j]['flips'].split('|'); blah2 = 0; for (k = 0; k < temp.length-1; k++) blah2 += wert[(temp[k])]; } for (j = 0; j < 64; j++) { possibilities[j]['anzahl'] = tempPossibilities[j]['anzahl']; possibilities[j]['flips'] = tempPossibilities[j]['flips']; Spielfeld[j] = tempSpielfeld[j]; } if (blah - blah2 > Differenz) { while (typeof(temp3[0]) != 'undefined') { temp3.pop(); } temp3.push(temp2[i]); Differenz = blah - blah2; } else if (Differenz == blah - blah2) { temp3.push(temp2[i]); } } } else temp3[0] = temp2[0]; }

Es kann natürlich immer noch mehr als einen Zug derselben Wichtigkeit geben. Letztendlich muss also dennoch per Zufall ein Zug gewählt werden.

blah = Math.floor((Math.random() * 1000) % temp3.length); nimm = temp3[blah]; putPiece(computer, nimm); flip(computer, nimm);

Schließlich werden die Möglichkeiten des Spielers bestimmt. Wenn er setzen kann, wird ihm die Kontrolle übergeben, wenn nicht, ruft sich die KI nach 2 Sekunden selbst wieder auf. Wenn die KI allerdings auch nicht setzen kann, ist das Spiel vorbei.

progress = 0; checkPossibilities(player); if (checkMove() == 0) { checkPossibilities(computer); if (checkMove() == 0) gameOver(); else setTimeout("KI()", 2000); } else for (i = 0; i < 64; i++) { if (possibilities[i]['anzahl'] > 0) putPiece (5,i); else if (Spielfeld[i] == 0) putPiece(0,i); } } </script>

Was noch fehlt ist der HTML-Teil. Wir brauchen 2 Zählen für die aktuelle Anzahl der Chips auf dem Brett:

Außerdem muss natürlich das Brett selbst generiert werden:

Und schließlich der Neues Spiel-Button sowie die Auswahlbuttons um die Farbe zu wählen und ob man Hilfe haben möchte oder nicht.

<table width="100%" id="nG"> <tr> <td width="33%"> <input type="radio" name="Color" onClick="player=2; computer=1" id="C0" checked> <label for="C0">Player Black, Computer White</label> <br> <input type="radio" name="Color" onClick="player=1; computer=2" id="C1"> <label for="C1">Player White, Computer Black</label> </td> <td width="34%" align="center"> <input type="button" value="New Game" onclick="startgame(); this.blur()"> </td> <td width="33%"> <input type="radio" name="Help" onClick="showHelp=0" id="H0" checked> <label for="H0">do not show help</label> <br> <input type="radio" name="Help" onClick="showHelp=1" id="H1"> <label for="H1">show help</label> </td> </tr> </table>

Das letzte, was zu tun ist, ist das Spiel zu initialisieren.