Tic Tac Toe mit Javascript

Tobbi

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>

Alles anzeigen

synaptic

coole sache das... wie lange haste daran gesessen???

Tobbi

Einen Tag. Die genaue Stundenzahl kann ich nicht sagen, da ich immer wieder zwischendurch etwas anderes gemacht habe.

minder

evt. noch eine Demo

synaptic

also ich finds fett

synaptic

"Kreis.png";
"Kreuz.png";
"Leer.png";

also des sollte wohl jeder selber hinbekommen....

Tobse

Zitat von synaptic

"Kreis.png";
"Kreuz.png";
"Leer.png";

also des sollte wohl jeder selber hinbekommen....

Naja, wenn wir an den mit seinen runden ecken denken, würde ich das bezweifeln (https://www.forum-hilfe.de/showthread.php…ght=runde+ecken).
Aber echt ne gute sache !

Bandit

Nicht falsch verstehen, ich will nichts unterstellen, aber

Ergebnisse 1 - 10 von ungefähr 205.000 für javascript tic tac toe

Das ist wirklich ein alter Hut.

Tobbi

Ich hab die Grafiken zusammen mit der *.html einfach mal hochgeladen. Wer das Ding also nur mal schnell ausprobieren will, der braucht sich nicht extra noch Grafiken zusammenzubasteln.
Ich habe meine Grafiken allerdings auch nur in 2 Minuten mit paint.net zusammengebastelt. Man sollte also nichts großes erwarten...
http://www.load.to/pkrjKiWQ7B/TTT.zip

Unregistriert

Zitat von Tobbi

Ich hab die Grafiken zusammen mit der *.html einfach mal hochgeladen. Wer das Ding also nur mal schnell ausprobieren will, der braucht sich nicht extra noch Grafiken zusammenzubasteln.
Ich habe meine Grafiken allerdings auch nur in 2 Minuten mit paint.net zusammengebastelt. Man sollte also nichts großes erwarten...
http://www.load.to/pkrjKiWQ7B/TTT.zip

Gut gemacht isses, aber gewinnen tue ich nie(nach dem 34 spiel immer noch nicht) entweder unentschieden oder pc gewinnt

lukasn

Das liegt daran dass Tic-Tac-Toe nicht aufgeht Wenn beide Spieler perfekt Spielen endet es immer unentschieden. Da das Script gut Programmiert ist kann man nicht gewinnen

-Lukas

Macrosdesign

Also das Script ist echt gut allerdings hab ich schon häufig gewonnen denn perfekt ist es nicht

Aber ansonsten gut gemacht das Ding

::RMB::

Zitat von lukasn

Das liegt daran dass Tic-Tac-Toe nicht aufgeht Wenn beide Spieler perfekt Spielen endet es immer unentschieden. Da das Script gut Programmiert ist kann man nicht gewinnen

-Lukas

Das Script ist aber nicht perfekt.

Man kann immer gewinnen.

Erster Zug Linke Obere Ecke
Script nimmt Mitte
Zweiter Zug Rechte Untere Ecke
Script nimmt eine freie Ecke
Dritter Zug Freie Ecke nehmen
Zwei Gewinnmöglichkeiten stehen offen! Script verhindert eine

Tags