Bei meinem Praktikum habe ich mit Javascript dieses Tic Tac Toe - Spiel erstellt, das man gegen den Computer spiele kann. Es werden 3 Grafiken im Ordner der html benötigt:
-Kreis.png
-Kreuz.png
-Leer.png
Ich denke die Dateinamen sollten selbsterklärend sein 
.
Hier der Code:
HTML
<html>
<head>
<title>Tic-Tac-Toe</title>
</head>
<body>
<table border="1">
<tr>
<td><img id="11" src="Leer.png" onclick="userklicks('11');"></td>
<td><img id="12" src="Leer.png" onclick="userklicks('12');"></td>
<td><img id="13" src="Leer.png" onclick="userklicks('13');"></td>
</tr>
<tr>
<td><img id="21" src="Leer.png" onclick="userklicks('21');"></td>
<td><img id="22" src="Leer.png" onclick="userklicks('22');"></td>
<td><img id="23" src="Leer.png" onclick="userklicks('23');"></td>
</tr>
<tr>
<td><img id="31" src="Leer.png" onclick="userklicks('31');"></td>
<td><img id="32" src="Leer.png" onclick="userklicks('32');"></td>
<td><img id="33" src="Leer.png" onclick="userklicks('33');"></td>
</tr>
</table>
<script type="text/javascript">
kreis = new Image();
kreis.src = "Kreis.png";
kreuz = new Image();
kreuz.src = "Kreuz.png";
leer = new Image();
leer.src = "Leer.png";
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function userklicks(id){
if(getValue(id)==0){
setValue(id,1);
if(checkFinish()){
computerZug();
checkFinish()
}
}
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function computerZug(){
if (computer_checkDouble(2, 2)){return(0);} //Wenn der Computer gewinnen kann, dann macht er das auch.
if (computer_checkDouble(1, 2)){return(0);} //Wenn der Computer den Sieg eines Gegners verhindern kann, dann macht er das auch.
if (easy_getValue(2, 2)==0){ //Wenn das Feld in der Mitte frei ist, schnappt es sich der PC weg.
easy_setValue(2, 2, 2);
return(0);
}
var ecken = new Array(); //Freie Ecken zählen + speichern
if (easy_getValue(1, 1)==0){ecken.push(XYadd(1, 1));}
if (easy_getValue(1, 3)==0){ecken.push(XYadd(1, 3));}
if (easy_getValue(3, 1)==0){ecken.push(XYadd(3, 1));}
if (easy_getValue(3, 3)==0){ecken.push(XYadd(3, 3));}
if (ecken.length>=1){ //Wenn es freie Ecken gibt...
setValue(ecken[Math.floor(Math.random()*ecken.length)],2); //Wird auf eine zufällige gesetzt.
return(0);
}
var rander = new Array(); //Freie Ränder zählen + speichern
if (easy_getValue(1, 2)==0){rander.push(XYadd(1, 2));}
if (easy_getValue(2, 1)==0){rander.push(XYadd(2, 1));}
if (easy_getValue(2, 3)==0){rander.push(XYadd(2, 3));}
if (easy_getValue(3, 2)==0){rander.push(XYadd(3, 2));}
if (rander.length>=1){ //Wenn es freie Ränder gibt...
setValue(rander[Math.floor(Math.random()*rander.length)],2); //Wird auf einen zufälligen gesetzt.
return(0);
}
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function checkFinish(){
//Hat jemand gewonnen?
//zeilen
var x = 1;
var y = 1;
var erster;
var winner = 0;
while(y <= 3){
erster=easy_getValue(1,y);
if(erster!=0&&easy_getValue(2,y)==erster&&easy_getValue(3,y)==erster){
winner = erster;
}
y++;
}
//spalten
while(x <= 3){
erster=easy_getValue(x,1);
if(erster!=0&&easy_getValue(x,2)==erster&&easy_getValue(x,3)==erster){
winner = erster;
}
x++;
}
//diagonalen
erster=easy_getValue(1,1);
if(erster!=0&&erster==easy_getValue(2,2)&&erster==easy_getValue(3,3)){
winner = erster;
}
erster=easy_getValue(3,1);
if(erster!=0&&erster==easy_getValue(2,2)&&erster==easy_getValue(1,3)){
winner = erster;
}
if (winner==1){
freeze("Du hast gewonnen.");
return(false);
}
if (winner==2){
freeze("Der Computer hat gewonnen.");
return(false);
}
//ist das feld voll?
var leer=false;
x=1;
y=1;
while(x<=3){
y=1;
while(y<=3){
if(easy_getValue(x,y)==0){
leer = true;
}
y++;
}
x++;
}
if (leer==false){
freeze("Unentschieden.");
return (false);
}
return(true);
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function freeze(msg){
alert(msg);
window.location.href = window.location.href;
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function computer_checkDouble(value, setval){
var lastNull=0;
var correctCount;
var x = 1;
var y = 1;
var currentVal;
//------------------------------------Zeilen--------------------------------------------------
while(y<=3){
lastNull = 0;
correctCount = 0;
x=1;
while(x<=3){
currentVal=easy_getValue(x, y);
if(currentVal==value){
correctCount++;
}
if(currentVal==0){
lastNull=x;
}
x++;
}
if ((correctCount==2) && (lastNull!=0)){
easy_setValue(lastNull,y, setval);
return (true);
}
y++;
}
//------------------------------------Spalten-------------------------------------------------
y=1;
x=1;
while(x<=3){
lastNull = 0;
correctCount = 0;
y=1;
while(y<=3){
currentVal=easy_getValue(x, y);
if(currentVal==value){
correctCount++;
}
if(currentVal==0){
lastNull=y;
}
y++;
}
if ((correctCount==2) && (lastNull!=0)){
easy_setValue(x,lastNull, setval);
return (true);
}
x++;
}
//------------------------------------Diagonalen----------------------------------------------
//--------------Nr.1------------------
var z = 1;
lastNull = 0;
correctCount = 0;
while(z<=3){
currentVal=easy_getValue(z,z);
if(currentVal==value){
correctCount++;
}
if(currentVal==0){
lastNull=z;
}
z++;
}
if ((correctCount==2) && (lastNull!=0)){
easy_setValue(lastNull, lastNull, setval);
return (true);
}
//--------------Nr.2------------------
z = 1;
lastNull = 0;
correctCount = 0;
while(z<=3){
currentVal=easy_getValue(z,4-z);
if(currentVal==value){
correctCount++;
}
if(currentVal==0){
lastNull=z;
}
z++;
}
if ((correctCount==2) && (lastNull!=0)){
easy_setValue(lastNull,4- lastNull, setval);
return (true);
}
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function easy_getValue(x, y){
return(getValue(XYadd(x, y)));
};
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function easy_setValue(x, y, value){
return(setValue(XYadd(x, y), value));
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function XYadd(x, y){
return (10*y + x);
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function getValue(id){
var dateiname
dateiname=document.getElementById(id).src;
if(dateiname==leer.src ){return (0);}
if(dateiname==kreis.src){return (1);}
if(dateiname==kreuz.src){return (2);}
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------
function setValue(id, value){
var dateiname;
if (value==0){dateiname=leer.src ;}
if (value==1){dateiname=kreis.src;}
if (value==2){dateiname=kreuz.src;}
document.getElementById(id).src=dateiname;
}
</script>
</body>
!
Wenn beide Spieler perfekt Spielen endet es immer unentschieden. Da das Script gut Programmiert ist kann man nicht gewinnen 
