Hey Leute.
Ich arbeite gerade an einem Tic Tac Toe mit JavaScript.
Ich bin jetzt soweit, dass ich einen hover habe und hänge nun beim Clicken.
Also theoretisch funktioniert alles:
Der Benutzer klickt auf das Feld
Das Programm prüft, ob es leer ist, wenn ja -> setze das Bild vom aktuellen Spieler
schreibe den neuen Eintrag in das Objekt.
Das Problem ist, dass ich ja mein Object ständig neu initialisiere sobald ich auf ein Bild klicke.
So wird nie das richtige Bild angezeigt.
Hier einmal die index.html:
Die Bilder sind als Anhang dabei.
Was es bis jetzt machen soll:
Richtigen Hover und das Bild bei einen Click setzen.
Ich arbeite gerade an einem Tic Tac Toe mit JavaScript.
Ich bin jetzt soweit, dass ich einen hover habe und hänge nun beim Clicken.
Also theoretisch funktioniert alles:
Der Benutzer klickt auf das Feld
Das Programm prüft, ob es leer ist, wenn ja -> setze das Bild vom aktuellen Spieler
schreibe den neuen Eintrag in das Objekt.
Das Problem ist, dass ich ja mein Object ständig neu initialisiere sobald ich auf ein Bild klicke.
So wird nie das richtige Bild angezeigt.
Hier einmal die index.html:
Code:
<html>
<head>
</head>
<SCRIPT LANGUAGE="JavaScript">
/*
1|2|3
-----
4|5|6
-----
7|8|9
Felder:
Felder ist ein Objekt mit den Daten der ganzen Felder.
player: 1 = x | 2 = o
*/
var player = 2;
var Felder = new Array();
function initial()
{
alert("Initializiere");
for(var i = 0; i < 9; i++)
{
Felder[i] = new Object();
Felder[i]["aktuell"] = "blank";
Felder[i]["clicked"] = false;
}
xyz = false;
}
function doHover(b)
{
var arr = new Array();
arr = document.getElementsByName("austausch"+b);
if(Felder[b-1]["clicked"] == true)
return;
if(Felder[b-1]["aktuell"] == "blank")
{
if(player == 1)
{
arr[0].src = "Bilder/x.png";
Felder[b-1]["aktuell"] = "x";
}
else
{
arr[0].src = "Bilder/o.png";
Felder[b-1]["aktuell"] = "0";
}
}
else
{
arr[0].src = "Bilder/blank.png";
Felder[b-1]["aktuell"] = "blank";
}
}
function doClick(f)
{
alert("In der Funktion");
var arr = new Array();
arr = document.getElementsByName("austausch"+f);
if(Felder[f-1]["clicked"] == true)
return;
alert("Nach dem Return");
if(player == 1)
{
alert("Player 1");
Felder[f-1]["clicked"] = true;
arr[0].src = "Bilder/x.png";
Felder[f-1]["aktuell"] = "x";
player = 2;
}
else
{
alert("Player 2");
Felder[f-1]["clicked"] = true;
arr[0].src = "Bilder/o.png";
Felder[f-1]["aktuell"] = "o";
player = 1;
}
alert("Ende");
}
</SCRIPT>
<body onload="initial()">
<table name="Tabelle" border="1">
<tr>
<th id="th1" width="100" height="100"> <a href="" onclick="doClick(1);" onmouseover="doHover(1);" onmouseout="doHover(1);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch1"> </a> </th>
<th id="th2" width="100" height="100"> <a href="" onclick="doClick(2);" onmouseover="doHover(2);" onmouseout="doHover(2);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch2"> </a> </th>
<th id="th3" width="100" height="100"> <a href="" onclick="doClick(3);" onmouseover="doHover(3);" onmouseout="doHover(3);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch3"> </a> </th>
</tr>
<tr>
<th id="th4" width="100" height="100"> <a href="" onclick="doClick(4);" onmouseover="doHover(4);" onmouseout="doHover(4);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch4"> </a> </th>
<th id="th5" width="100" height="100"> <a href="" onclick="doClick(5);" onmouseover="doHover(5);" onmouseout="doHover(5);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch5"> </a> </th>
<th id="th6" width="100" height="100"> <a href="" onclick="doClick(6);" onmouseover="doHover(6);" onmouseout="doHover(6);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch6"> </a> </th>
</tr>
<tr>
<th id="th7" width="100" height="100"> <a href="" onclick="doClick(7);" onmouseover="doHover(7);" onmouseout="doHover(7);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch7"> </a> </th>
<th id="th8" width="100" height="100"> <a href="" onclick="doClick(8);" onmouseover="doHover(8);" onmouseout="doHover(8);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch8"> </a> </th>
<th id="th9" width="100" height="100"> <a href="" onclick="doClick(9);" onmouseover="doHover(9);" onmouseout="doHover(9);"> <img src="Bilder/blank.png" border="0" width="100" height="100" name="austausch9"> </a> </th>
</tr>
</table>
<br>
<br>
</body>
</html>Die Bilder sind als Anhang dabei.
Was es bis jetzt machen soll:
Richtigen Hover und das Bild bei einen Click setzen.
