Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: Tic Tac Toe mit Javascript

  1. #1
    Tobbi
    Gast

    Beitrag Tic Tac Toe mit Javascript

    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-Code:
    <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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Tic Tac Toe mit Javascript

    coole sache das... wie lange haste daran gesessen???
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Tobbi
    Gast

    Standard AW: Tic Tac Toe mit Javascript

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

  4. #4
    minder
    Gast

    Standard AW: Tic Tac Toe mit Javascript

    evt. noch eine Demo

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Tic Tac Toe mit Javascript

    also ich finds fett
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Meister(in) Avatar von goldeneye
    Registriert seit
    07.06.2008
    Ort
    Oberfranken
    Alter
    24
    Beiträge
    312
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tic Tac Toe mit Javascript

    Kann man die benötigten Grafiken herunterladen?

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Tic Tac Toe mit Javascript

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


    also des sollte wohl jeder selber hinbekommen....
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Tic Tac Toe mit Javascript

    Zitat 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 (http://www.forum-hilfe.de/showthread...ht=runde+ecken).
    Aber echt ne gute sache !
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  9. #9
    Bandit
    Gast

    Standard AW: Tic Tac Toe mit Javascript

    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.

  10. #10
    Tobbi
    Gast

    Standard AW: Tic Tac Toe mit Javascript

    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

Ähnliche Themen

  1. Javascript IE6
    Von jojo87 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 03.07.2009, 12:12
  2. Javascript in Javascript importiere
    Von FaFoo im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 08.04.2008, 19:24
  3. Javascript in php
    Von minder im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 30.03.2008, 21:36
  4. Javascript
    Von Gast im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.04.2006, 13:07
  5. Thema: JavaScript -- Variable einfügen JavaScript o. Bild
    Von Dj_P.D. im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 29.06.2004, 16:14

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •