# JQuery Bilder austauschen



## Michimitsu (6. Dez 2011)

Hey ho, ich hab ein Problem ... hab ein spielfeld erstellt und wollte beim Klicken bilder austauschen, jedoch passiert bei mir irgendwie gar nixs ...


```
$(document).ready(
		function() {
			
			
			for ( var i = 1; i <= 4; i++) {
				$("#spielfeld").append("<div id='quadrat_" + i + "' class='quadrat'></div>");

				for ( var x = 0; x < 9; x++) {
					if (x % 3 == 0) {
						$("#quadrat_" + i).append("<div id='position_" + i + "_" + x + "' class='position clearboth'></div>");
					}
					else {
						$("#quadrat_" + i).append("<div id='position_" + i + "_" + x + "' class='position'></div>");
					}
				}
			}
			
			
			
			$('#spielfeld').click(function() {
				var feld; 
				  test(feldfinden());
				  $(this).attr("src","Image-Fields/Schwarzes-Feld.PNG");
			});
		});

var aktiverSpieler = 0;

function test(feld) {
	alert('test ' + aktiverSpieler);
	aktiverSpieler++;
	if(aktiverSpieler%2==0){
	console.log('weiß ist dran');
	
	}
	else {
		console.log('schwarz ist dran'+ feld);
	}
	
}
function feldfinden(){
	document.onclick = function(objEvt){
		  var objEvt = (window.event)? window.event: objEvt;
		  var objSrc = (objEvt.target)? objEvt.target : objEvt.srcElement;
		  console.log(objSrc.id);
		  feld = objSrc.id;
		  return feld;
		};

}
```

wäre cool wenn mir wer saegn könnte was ich falsch mache


----------



## Swoop (6. Dez 2011)

das schaut doch aus wie JavaScript...

und Java != JavaScript also falscher Bereich


----------



## Michimitsu (6. Dez 2011)

richtig ... gar nicht drüber nachgedacht  sry


----------



## Evil-Devil (6. Dez 2011)

Der Code schaut verwirrend aus.
Muss das Spielfeld dynamisch per Javascript aufgebaut werden oder ist das an sich eher statisch?

Falls letzteres würde ich die Events über Class/Name Selektoren einbinden.

Aber zu deinem Code. Wenn ich das richtig versteht wird click() auf dem Spielfeld ausgeführt, aber nicht auf dem eigentlich geklickten Feld. Somit kann sich niemals das Feld das geklickt wurde ändern. Deine ID Spielfeld umschließt doch alle Felder oder?


----------



## Michimitsu (6. Dez 2011)

Ja das problem ist an sich das das bisherige mit nem kollegen gemacht habe (und ich muss das spiel pentago programmieren, ist so ähnlich wie vier gewinnt) und es muss nicht dynamisch sein das spielfeld besteht ja aus 4 quadraten und jedes hat 9 felder ( ist dafür gedacht weil die 4 quadrate müssen nicht nach jedem zug in eine richtung drehen lassen... ich dachte das wäre so ganz gut aufgebaut ...


----------



## Michimitsu (6. Dez 2011)

ich glsub auch das projekt wurde einfach nur s*****e angefangen ^^ nur hätte ich ahnung davon würde ich auch nicht soein mist fabrizieren^^


----------



## Evil-Devil (6. Dez 2011)

Michimitsu hat gesagt.:


> das spielfeld besteht ja aus 4 quadraten und jedes hat 9 felder


Also im Idealfall vier DIVs die wiederum mit neun weiteren DIVs gefüllt sind.



Michimitsu hat gesagt.:


> ( ist dafür gedacht weil die 4 quadrate müssen nicht nach jedem zug in eine richtung drehen lassen...


Wie drehen lassen? *mal nach diesem Spiel google*

//edit: Ah ok...

Das ist ja doch etwas komplexer. Also bedarf es einmal einer Funktion zum drehen und einer Funktion zum setzen von Schwarz/Weiß/Leer. Letzteres ist einfach. das Drehen etwas aufwendiger.


----------



## Michimitsu (6. Dez 2011)

ich komm gar nicht mehr klar ^^ hab mir das jetzt mal im inet angesehn und frag mich wie soll ich jemals fertig werden ...


----------



## Evil-Devil (6. Dez 2011)

Na an sich ist es doch ganz einfach.

Du könntest damit anfangen das Spielfeld im HTML zu erzeugen und die Spielstein setzen oder Click() Funktion zu implementieren.
Und danach das Spielfeld drehen.

Ich weiß jetzt ja nicht in wie weit ihr das zusammen erledigen müsst oder ob das auch einer alleine kurz schreiben darf


----------



## Michimitsu (6. Dez 2011)

problem ist ich hab nicht viel ahnung von html / javascript / css ... ich brauch das game eigentlich nur zu programmieren ^^


----------



## Andi_CH (6. Dez 2011)

Michimitsu hat gesagt.:


> problem ist ich hab nicht viel ahnung von html / javascript / css ... ich brauch das game eigentlich nur zu programmieren ^^



Ich muss mir das ganz mal ganz genüsslich auf der Zunge zergehen lassen -
Nachdem das Thema ja schon in die Plauderecke gelangt ist, erlaube ich mir ein OT

Ich übersetz das oben mal - Ergebnis:

"Ich habe zwar keine Ahung von Programmiersprache ich muss ja nur programmieren..."

Wers löschen will, bitte - es wird ja so oder so nicht bewirken.

Ich ziehe mich wieder dahin zurück wo es erlaubterweise sinnbefreit zu und her geht ....


----------



## Michimitsu (6. Dez 2011)

Andi_CH hat gesagt.:


> Ich muss mir das ganz mal ganz genüsslich auf der Zunge zergehen lassen -
> Nachdem das Thema ja schon in die Plauderecke gelangt ist, erlaube ich mir ein OT
> 
> Ich übersetz das oben mal - Ergebnis:
> ...



Ehht falsch, wegen einer OP konnte ich nicht am unterricht teilnehmen und bin dann mal so in das projekt gerutscht ... habe allerdings noch nicht viel mit css und jquery gemacht ... html schon... es ist noch kein programmiergott vom himmel gefahlen ...


----------



## Evil-Devil (6. Dez 2011)

Wie gesagt. Erstelle erst einmal das Spielfeld in HTML.
Wenn das steht und sauber ist, dann geht es an die Logiken.

Ich helfe dir mal ein wenig beim HTML...


```
<div id="spielfelder">
	<div id="spielfeld_1">
		<span class="stein black"></span>
		<span class="stein"></span>
		<span class="stein white"></span>
		<span class="stein"></span>
		<span class="stein black"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein white"></span>
	</div>
	<div id="spielfeld_2">...</div>
	<div id="spielfeld_3">...</div>
	<div id="spielfeld_4">...</div>
</div>
```

Das wäre so mein grundlegender Ansatz. Das dazugehörige CSS darfst du dir selbst herleiten.


----------



## Michimitsu (7. Dez 2011)

Würde ich mir ein spielfeld zeichnen und die Steine dann drüber legen ??? oder eher sowas wie das spielfeld besteht aus 9 feldern und wenn was gesetzt wird, dann wird was ausgetauscht ? 
P.s. danke für deine hilfe


----------



## Michimitsu (7. Dez 2011)

Hab nochmal erfahren das wir soviel wie möglich mit jquery machen sollen


----------



## Evil-Devil (7. Dez 2011)

Das ist doch auch nicht schlimm. Dein Spielfeld und die Steine sind das HTML. Sowohl die Erzeugung als auch Spiellogik kannst du später im jQuery abbilden, aber am Anfang würde ich damit starten die Elemente einmal statisch zu erzeugen und die einfachen Logiken vorab definieren. Dann später so ein Spielfeld zu generieren ist nicht sonderlich schwierig, wenn man weiß wie das Spielfeld im HTML aussehen soll.


----------



## Michimitsu (7. Dez 2011)

ja eigentlich existiert das spielfeld ja bereits ^^ mir wird auch die id von dem feld angegeben was ich anklicke ... problem ist das ich halt beim anklicken das bild austauschen wollte mit dem schwarzen oder weißen stein auswechseln. Nur das war ja mein problem an sich ... das hat einfach nicht funktioniert ...


----------



## Evil-Devil (7. Dez 2011)

Wenn du dein Spielfeld anklickst, dann klickst du nicht deinen Stein an bzw. dein Stein hat keinen Event-Listener registriert. Jedes HTML Element das auf einen Klick reagieren soll brauch einen entsprechenden Listener.

Deine Click() Funktion hängt ja am Spielfeld. Das Spielfeld sollte bei einem Klick gedreht werden. Bei einem Klick auf einen Spielstein willst du ihn setzen. Hier müsstest du aber den Status des Spiels abfragen. Wenn also beide Spieler ihren Stein gesetzt haben, dann kann man doch das Spielfeld drehen. Oder muss man zum drehen gar nicht setzen? 

Du musst da leider sehr differenzieren.


----------



## Michimitsu (7. Dez 2011)

Das Spiel verläuft so, das der Spieler seinen Stein ablegt und danach eines der 4 felder in eine richtung um 90° drehen muss. Aufgebaut ist es halt so das die 4 felder in einem quadrat angeordnet sind. Und momentan mach ich das so, dass das spielfeld aus den den 9 bildern besteht. Und wenn ich was ändern möchte sollte halt das ganze bild besetzt werden.


----------



## Evil-Devil (7. Dez 2011)

Ja, dann brauchen aber trotzdem noch sowohl deine Steine als auch dein Spielfeld eine Click() Funktion.

Spielstart
-> Spieler klickt ins Spielfeld auf einen Stein (onClick-Event auf Stein und Spielfeld. Je nach Browser in verschiedener Richtung, siehe Event Bubbling)
-> Spieler klickt ins Spielfeld auf einen Stein um das Spielfeld zu drehen (wieder beide onClick Events werden ausgelöst und müssen verarbeitet werden)
-> Spielfeld wird gedreht
-> nächster Spieler...

Diese ganzen Prozesse musst du selbst abfangen und bearbeiten. Von daher wirklich mein Tipp: Mach es erstmal mit einem statischen Spielfeld. Das Spielfeld später zu generieren ist das kleinste Übel.


----------



## Michimitsu (7. Dez 2011)

Ok ich halte mich grade mal an deine vorgabe ... dann muss ich 4 felder a 9 divs mit der class stein machen richtig, wie sag ich ihm den das er nach 3 feldern in die nächste zeile hüpfen soll, das alles halt gut angeordnet ist und welche id hat dann ein feld ??? oder wird das erst beim on click wichtig


----------



## Evil-Devil (7. Dez 2011)

Das sagst du im per CSS. Du gibst deinem Spielfeld einfach eine Größe vor. Zb. 300x300px. Ein Stein ist dann 100x100px groß und ein Block Element das links gefloatet wird.

Ich würde erstmal mit nur einem Spielfeld anfangen, das wird am Anfang ausreichen. Denn das drehen des Spielfeldes musst schließlich auch realisieren.


//edit: Wenn dein HTML Spielfeld steht, dann schreib dir eine Dummy-Init Funktion die alle Spielsteine und das Spielfeld ermitteln sowie die entsprechenden onClick Event Funktionen setzt.


----------



## Michimitsu (7. Dez 2011)

```
$(document).ready(
		function() {
			
					
			$('#spielfelder').click(function() {
				var feld; 
				  test(feldfinden());
				 
			});
			$('#stein').click(function() {
				alert("stein treffer");
			});
		});
```

also das feld wird angezeigt, wie komme ich denn jetzt an einen einzelnen spielstein ran ???


----------



## Evil-Devil (7. Dez 2011)

So, mal schauen wie gut der HTML Formatierer hier ist...

In dem Beispiel unten habe ich grob das Spielfeld und die Spielsteine definiert. Ebenso existiert je für Spielfeld und Steine eine Click Funktion. Wenn man auf den Stein klickt werden aktuell beide Funktionen ausgeführt. Die Spielfeld Funktion weiß zur Zeit noch nicht welches spielfeld geklickt wurde - das kann man über den Spielstein ermitteln. Ebenso wenig stoppt die Spielstein Click Funktion aktuell. Denn die Wahl welches Spielfeld gedreht werden soll ist doch frei wählbar, oder?


```
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
#spielfelder { display: block; margin: 50px auto; width: 664px; height: 664px; }
#spielfelder div { float: left; width: 300px; height: 300px; margin: 15px; display: block; border: 1px solid #ff0000; }
#spielfelder span { float: left; width: 98px; height: 98px; border: 1px solid #000000; }
.stein { background: #CECECE; }
.black { background: #000000 !important; }
.white { background: #FFFFFF !important; }
.clear { display: none; clear: both; font-size: 0; height: 0; }
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>

<div id="spielfelder">
	<div id="spielfeld_1" class="spielfeld">
		<span class="stein black"></span>
		<span class="stein"></span>
		<span class="stein white"></span>
		<span class="stein"></span>
		<span class="stein black"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein white"></span>
	</div>
	<div id="spielfeld_2" class="spielfeld">...</div>
	<div id="spielfeld_3" class="spielfeld">...</div>
	<div id="spielfeld_4" class="spielfeld">...</div>
</div>
<span class="clear" />

<script type="text/javascript">


$(document).ready(function() {
	// we use no object abstraction...
	function clickStone(event) {
		console.log(event.target);
		alert('Stein ' + event.target + ' wurde angeklickt');
	}

	function clickGamefield(event) {
		console.log(event.target);
		alert('Spielfeld - ' + event.target + ' - soll gedreht werden?!');
	}		
		
	// all init logic goes here...
	$('.spielfeld').bind('click', clickGamefield);
	$('.stein').bind('click', clickStone);		
});
</script>

</body>
</html>
```


----------



## Michimitsu (7. Dez 2011)

genau ist egal welches man dreht, man kann auch ein leeres feld drehen ... ja und jetzt frage ich mich wie ich ihmden sage das er 

```
<div id="spielfeld_1">
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
		<span class="stein"></span>
	</div>
```

hierraus zum beispiel den 2 angeklickten stein das bild austauscht


----------



## Evil-Devil (7. Dez 2011)

Das sagst du ihm über die Click Funktion des Steins.

Zb. so:

```
function clickStone(event) {
	$(this).css('background-color', '#00ff00');
	//console.log(event.target);
	//alert('Stein ' + event.target.id + ' wurde angeklickt');
}
```

Ich setze hier zwar nur die Hintergrundfarbe, ein Bild zu setzen ginge natürlich auch.


----------



## Michimitsu (7. Dez 2011)

Du bist ein Held  so einfach ist das ... man muss nur wissen wie jetzt ist die frage wie drehe ich das ganze ..., hast du da vielleicht irgend ne idee ?


----------



## Evil-Devil (7. Dez 2011)

@einfach: Öhm, jQuery Dokumentation und ab gehts. Das ist jetzt auch mein erstes Mal mit jQuery. Nutze sonst nur Prototype.

@drehen: Ja...da bin ich auch noch am überlegen.
Eine Möglichkeit die man nutzen könnte wäre die entsprechenden Styles zu setzen. Das wäre zumindest für das DOM am schonenstens. Alternativ müsstest du die Spielsteine verwerfen und neu erzeugen.

Aber egal welchen Weg du gehst, du musst die Spielsteine des Felds ermitteln oder vorher schon festhalten und dann drehen. 
Wenn wir davon ausgehen das unsere Steine im einem Array liegen.
Ausgangsposition:
[
0, 1, 2,
3, 4, 5,
6, 7, 8
]

Nach Links drehen:
[
2, 5, 8,
1, 4, 7,
0, 3, 6
]

Nach Rechts drehen:
[
6, 3, 0
1, 4, 7
2, 5, 8
]

Jetzt muss man das nur noch in Logik gießen *hust*.


----------



## Michimitsu (7. Dez 2011)

^^ bin jetzt erstmal grade dabei festzuhalten welche spieler dran ist und wollt auch noch die felder sperren die schon belegt sind ... weißt du wie man die stumpf vom anklicken entfernen kann ?


----------



## Evil-Devil (7. Dez 2011)

Ja, es gibt ein Gegenstück zu bind(). Das nennt sich unbind() 

Ohne es getestet zu haben:
$(this).unbind();
Einfach ans Ende deiner clickStone() Funktion packen.


----------



## Michimitsu (7. Dez 2011)

jop, schnell und effektiv  

ich konnte beim dynamischen erzeugen der felder diese funktion zum feld bestimmen nutzen ..


```
function feldfinden(){
	document.onclick = function(objEvt){
		  var objEvt = (window.event)? window.event: objEvt;
		  var objSrc = (objEvt.target)? objEvt.target : objEvt.srcElement;
		  console.log(objSrc.id);
		  feld = objSrc.id;
		  return feld;
		};
```
glaubste das hilft mir noch iwi weiter ?


----------



## Evil-Devil (7. Dez 2011)

Die brauchst du an sich nicht mehr. Du sagtest doch selbst ihr sollt so viel wie möglich direkt über jQuery machen.
Deine Feldfinden Funktion ist ja effektiv nicht großartig anders als die kleine clickStone() Funktion mit dem großen Unterschied das $(this) dir all die window.event, etc. Abfragen abnimmt.

Wenn du später deine Felder dynamisch erzeugst, würde ich gar nicht die Events beim erzeugen anhängen sondern erst nachdem das SPielfeld erzeugt ist. Wenn du es unbedingt willst kannst du natürlich auf dem jeweils erzeugten DOM Element ein bind() ausführen.


----------



## Michimitsu (7. Dez 2011)

ja aber ich brauch doch trotzdem ne id der felder damit ich mich an das drehen ranwagen kann...


----------



## Evil-Devil (7. Dez 2011)

Nein, brauchst du nicht. Dein Spielfeld hat doch eine ID (siehe mein Beispiel) und selbst ohne die ID kannst du es drehen. Weil du dir ja alle SPAN Kindknoten geben lassen kannst. Dann musst die nur noch neu arrangieren bzw. entsprechend manipulieren.


----------



## Michimitsu (7. Dez 2011)

und wie soll ich das einbauen ??? irgendwie über ein abfrage dialog welches feld er drehen möchte und in welche richtung, oder wie sollte das laufen ?


----------



## Evil-Devil (7. Dez 2011)

Nein. Wenn man aktuell auf einen Stein klickt, dann löst das ja seine Click Funktion aus, und zeitgleich wird aktuell noch die Click Funktion vom Spielfeld ausgelöst.

Sobald du in der Spielfeld Funktion bist kannst du über den Ereignisauslöser herausfinden welches Spielfeld geklickt wurde. Wenn du das weißt holst du dir die Childs vom Spielfeld.


----------



## Michimitsu (7. Dez 2011)

hää, er kann doch aber auf spielfeld 1 sein chip setzten und spielfeld 3 drehen und dann frag ich mich trotzdem wie ich dem benutzter anbieten soll in eine bestimmte richtung zu drehen


----------



## Evil-Devil (7. Dez 2011)

Achso. Ja ok. dann einen Dialog oder im GUI eine Schaltfläche um das global zu setzen. Das ist dann dir überlassen


----------



## Michimitsu (7. Dez 2011)

Hatte ich auch die möglichkeit das komplette feld zu speeren und diese pfeile quasi vor das spielfeld zu setzten(die pfeile würde ich natürlich lieber mehr so in dei ecke machen ( und der eine ist falsch rum ^^))


----------



## Michimitsu (7. Dez 2011)

und brauche ich nicht trotzdem die id von jedem feld ??? ich meine ich muss immer schauen ob 5 stück nebeneinander sind ....

"L L L"       "L L L"
"S S S"      "S S W"
"W L W"      "L W W"
" ..."             "..."
"..."              "..."
"..."              "..."
das wäre dann ja n sieg für schwarz, das müsste ich doch überprüfen wo was liegt ( das spiel ist ja quasi 5 in einer reihe nur mit drehen)


----------



## Evil-Devil (7. Dez 2011)

Ich würde mir dazu die Felder und ihre Belegung in einem Array ablegen. Dann kannst das bequem prüfen.

Zb. 

```
var felder = [
	[0,1,2,0,1,2,0,1,2],
	[0,1,2,0,1,2,0,1,2],
	[0,1,2,0,1,2,0,1,2],
	[0,1,2,0,1,2,0,1,2]
]
```
0 = leeres Feld
1 = Spieler 1
2 = Spieler 2

Nach jedem drehen würdest du das jeweilige Array aktualisieren.

Zu den Pfeilen, ja das ginge auch. Einfach absolut über den Spielfelder positionieren oder direkt über dem Spielfeld. Dann könnte man sogar den Click() auf dem Spielfeld entfernen und die drehen Logik direkt an die Pfeile übergeben. Die Funktion müsste nur wissen welches Spielfeld gedreht werden soll und in welche Richtung.


----------



## Michimitsu (7. Dez 2011)

ja ich dachte mir auf jedes feld kommen 2 pfeile in jede richtung einer, nur weiß ich nicht wie man das machen würde über haupt was an son pfeil zu übergeben, den pfeil vors feld setzten usw ...


----------



## Evil-Devil (7. Dez 2011)

Na ein bisschen mitdenken musst du schon. Alles vorkauen kann und will ich nicht. Funktioniert denn bereits das setzen der Steine vollständig?


----------



## Michimitsu (7. Dez 2011)

jop die farbe ändert sich die felder werden gesperrt  brauchst du auch nicht, will nur tipps xD ( ich weiß ja nicht ob ich stumpf ein png in so ein spielfeld reinsetzten kann und obs darüber geht und ob der pfeil modal gemacht werden kann ....


----------



## Evil-Devil (7. Dez 2011)

Naja, bevor du irgendwas machst musst du dich entscheiden was du machen willst. Ein Pfeilelement direkt über dem Spielfeld setzt voraus das es absolut positioniert ist. Wenn es außerhalb des Spielfeldes stehen soll müssen vielleicht weitere Hilfscontainer genutzt werden. Design-Fragen über Design-Fragen.

Anstatt der Farben kannst du natürlich auch ein PNG nutzen


----------



## Michimitsu (7. Dez 2011)

das heißt ich würde mir jetzt erstmal solche pfeile zeichnen die ich dann in mitten in das spielfeld(wie oben angezeigt) rensetzten möchte und dann muss ich dafür sorgen das die pfeile modal sind und auch was tun ( also müsste ich quasi 8 pfeile beschreiben wobei)


----------



## Evil-Devil (7. Dez 2011)

Überlege dir besser erstmal wo du sie platzieren willst. Lieber nicht zu viele Elemente übereinander legen. Das macht es nur unnötig kompliziert am Anfang. Und soweit ich das richtig verstanden habe stehst du sowohl mit HTM/CSS als auch mit Javascript noch am Anfang.


----------



## Michimitsu (7. Dez 2011)

jou, deswegen versuche ich es leicht zu gestalten ^^ würdest du denn die pfeile nicht über die quadratte setzten ? Das problem an sich ist ich weiß nicht was für möglichkeiten ich habe ^^ vielleicht geht das auch über ein abfrage dialog das ich ihm erst ein feld anbiete ( zum anwählen von oben links bis unten rechts) und dann in nem zweiten dialog 2 pfeile zu auswahl setzte einen rechtsrum und den andren links rum ...

ich wills halt erstmal alles realisieren... um schönheit usw. kann ich mir auch später noch gedanken machen


----------



## Evil-Devil (7. Dez 2011)

Ich würde die Pfeile als eigene Flächen oberhalb und unterhalb der Spielfelder platzieren. Dazu wirst aber weitere DIV Container zur Gestaltung benötigen.


----------



## Michimitsu (7. Dez 2011)

kann man die ausgrauen die felder wenn sie grade nicht benötigt sind, bzw. dann auch das spielfeld wenn grade nixs geklickt werden darf ?


----------



## Evil-Devil (7. Dez 2011)

Ja, kann man alles machen. Das sind aber alles Dinge die nichts mit der allgemeinen Logik zu tun haben. Das sind kosmetische Dinge. Du könntest die Knöpfe auch animieren und weiß der Geier was machen lassen ^^

Am Anfang könntest du die Knöpfe zum drehen auch außerhalb der Spielfelder platzieren und sie einfach passend beschriften.
Deiner Kreativität sind nahezu keine Grenzen gesetzt. Einzig deiner Erfahrung


----------



## Michimitsu (7. Dez 2011)

joar ich setzte jetzt links neben das erste spielfeld 2 pfeile die die richtungen bestimmten .... beim zweiten feld setzte ich sie rechts und bei 3 und 4 so wie bei 1 und 2 ... dann muss ich für die pfeile auch ne onclick machen und dann wäre das mit der drehung dran, nichtwahr ?


----------



## Evil-Devil (7. Dez 2011)

Yepp, so kannst du es machen. Leb dich aus ^^


----------



## Michimitsu (7. Dez 2011)

hmm son paar darstellungsfehler habe ich ja noch  ... wie schaffe ich das denn das die beiden pfeil bilder untereinandern sind und das spielfeld rechts daneben ??


----------



## Evil-Devil (7. Dez 2011)

DIVs mit Float Eigenschaft oder Tabellen nutzen.

Da wirst dich wohl noch etwas in HTML einlesen müssen.


----------



## Michimitsu (8. Dez 2011)

Jou das stimmt schon irgendwo ^^ den großteil check ich auch schon, nur verstehe ich nicht warum er nach dem ersten pfeil alles leer lässt... beim 2ten pfeil ist das feld super dran ... bevor ich mich damit abhetzte, soll ich das ganze feld jetzt mal statisch erzeugen oder ist das zeitverschwendung ?


----------



## Michimitsu (8. Dez 2011)

jou kommisch... iwi nixs geändert und dann gings ^^ .... ähhm sollte ich mich erst mit dem drehen beschäftigen oder erst mit der gewinnbedingung ... ?


----------



## Evil-Devil (8. Dez 2011)

Drehen fand ich recht einfach. Hab das zwischendurch auch nen wenig geschrieben. Kann meine Felder drehen. Spiellogik hab ich keine gemacht. Vielleicht später, wenn ich Langeweile hab.

Gewinnbedingung könntest du auch machen. Dafür würden sich Tests mit deiner finalen Methode am besten eignen. Du wirst ja so einige Fälle abbilden müssen.

//edit: Meine Felder werden auch generiert


----------



## Michimitsu (8. Dez 2011)

joar ich habs jetzt einfach mal spontan wieder dynamisch erstellt ... will mich denke ich auch erstmal ums drehen kümmern ... naja einfach ist immer relativ ^^ weiß noch nicht so genau wie ich das genau machen soll ^^


----------



## Michimitsu (8. Dez 2011)

ja und bei mir will er die farbe einfach nicht ändern ... wie sprichst du denn deine generierten felder an ??? bzw. wie wechselst du die ???


----------



## Evil-Devil (8. Dez 2011)

Ich hol mir die, setze sie zurück, setze die neuen Positionen in einem Array und weise das danach zu.


```
function feldDrehen(direction) {
	var tiles = $('#spielfeld_0').children();
	var states = [];
	var state = 0;
	var obj = null 
	
	// gather current states and relocate
	for (i=0, il=tiles.length; i<il; i++) {
		obj = $(tiles[i]);
		states[i] = obj.hasClass('playerOne') ? 1 : (obj.hasClass('playerTwo') ? 2 : 0);
		obj.removeClass('playerOne playerTwo');	
	}
	// rearrange and apply them - left is default behavior
	var tmp = null;
	if (direction == 1) {
		tmp = [	states[6], states[3], states[0],
		   	states[7], states[4], states[1],
		   	states[8], states[5], states[2]];
	} else {
		tmp = [	states[2], states[5], states[8],
		   	states[1], states[4], states[7],
		   	states[0], states[3], states[6]];
	}
	
	for (i=0, il=tiles.length; i<il; i++) {
		$(tiles[i]).addClass( tmp[i] == 1 ? 'playerOne' : (tmp[i] == 2 ? 'playerTwo' : '') );
	}	
}
```

Könnte man sicher noch eleganter lösen. Reichte mir aber ^^ Und sie funktioniert aktuell nur mit einem vorher festgelegten Feld. Hab das bisher nicht dynamisiert.


----------



## Michimitsu (8. Dez 2011)

ich bin froh wenn ich überhaupt erstmal eine variante schaffe ... 

```
if(aktiverSpieler%2==0){
			console.log('weiß ist dran');
			$('#spielfeld.'+feld).css('background-image', 'url(Image-fields/Weißes-Feld.PNG)');
		}
```

damit will ich die felder ändern ... geht aber nicht weißt du warum ?


----------



## Evil-Devil (8. Dez 2011)

Gibt es den Pfad "Image-fields/Weißes-Feld.PNG" ? Und wieso willst du das Spielfeld mit einem Hintergrund belegen. An sich musst du doch den Spielstein belegen...


----------



## Michimitsu (8. Dez 2011)

das war das letzte ergebnis (also das spielfeld.stein1_1 (im feld steckt das gelickte feld drinne)) und jap das gibts ... wenn ich nur .stein ansspreche werden alle weiß ....

```
$('#spielfelder-drehen1').click(function(){
				feldfinden();
			if(feld =="pfeil-rechts"){
					alert("rechts");
				}
				else if(feld = "pfeil-links"){
					alert("links");
				}
				else{
					alert("gar nixs");
				}

			});
```
und kannst du mir sagen wieso er das falsch rum ausgbt ??? klick ich auf den rechts buttpn wird links ausgeben und umgedreht auch ....


----------



## Evil-Devil (8. Dez 2011)

Wo wird die Variable Feld denn gefüllt? Installier dir Firebug und nutze die Konsole. Das ist sehr hilfreich beim entwickeln.


----------



## Michimitsu (8. Dez 2011)

Firebug hab ich schon  hiernochmal der komplette quellcode ....

```
$(document).ready(
		function() {
			
				$("#spielfelder-drehen1").append("<div id='pfeil-rechts' class='pfeil-rechts'></div>");
				$("#spielfelder-drehen1").append("<div id='pfeil-links' class='pfeil-links'></div>");
				$("#spielfelder-drehen2").append("<div id='pfeil-rechts' class='pfeil-rechts'></div>");
				$("#spielfelder-drehen2").append("<div id='pfeil-links' class='pfeil-links'></div>");
			
			for ( var i = 1; i <= 4; i++) {
				$("#spielfeld").append("<div id='quadrat_" + i + "' class='quadrat'></div>");

				for ( var x = 0; x < 9; x++) {
					if (x % 3 == 0) {
						$("#quadrat_" + i).append("<div id='stein_" + i + "_" + x + "' class='stein clearboth'></div>");
					}
					else {
						$("#quadrat_" + i).append("<div id='stein_" + i + "_" + x + "' class='stein'></div>");
					}
				}
			}
				$("#spielfelder-drehen3").append("<div id='pfeil-rechts' class='pfeil-rechts'></div>");
				$("#spielfelder-drehen3").append("<div id='pfeil-links' class='pfeil-links'></div>");
				$("#spielfelder-drehen4").append("<div id='pfeil-rechts' class='pfeil-rechts'></div>");
				$("#spielfelder-drehen4").append("<div id='pfeil-links' class='pfeil-links'></div>");
			
			
			
			
			
			$('#spielfeld').click(function() {
				feldfinden();
				  test();
			});
			$('#spielfelder-drehen1').click(function(){
				feldfinden();
			if(feld =="pfeil-rechts"){
					alert("rechts");
				}
				else if(feld = "pfeil-links"){
					alert("links");
				}
				else{
					alert("gar nixs");
				}
				
				
				
			});
		});

var aktiverSpieler = 0;

function test() {
	alert('test ' + aktiverSpieler);
	aktiverSpieler++;
	
		if(aktiverSpieler%2==0){
			console.log('weiß ist dran');
			$('.'+feld).css('background-image', 'url(Image-fields/Weißes-Feld.PNG)');
		}
		else {
			console.log('schwarz ist dran'+ feld);
		}
	
}
function feldfinden(){
	document.onclick = function(objEvt){
		  var objEvt = (window.event)? window.event: objEvt;
		  var objSrc = (objEvt.target)? objEvt.target : objEvt.srcElement;
		  console.log(objSrc.id);
		  feld = objSrc.id;
		  return feld;
		};

}
```


----------



## Evil-Devil (8. Dez 2011)

Da ist ja wieder deine seltsame Feldfinden() Funktion. Du sagtest doch selbst das ihr jQuery nutzen sollt. Wieso tust du das dann nicht?

Klick auf HTML Objekt -> $(this) <-- geklicktes Objekt.

Davon abgesehen kann dein drehen nicht klappen, da du nie den Rückgabewert von feldfinden() zuweist.

Das ist alles nicht sonderlich sauber.

Zum Vergleich meine kleine Variante.


```
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
#spielfelder { display: block; margin: 50px auto; width: 664px; height: 664px; }
#spielfelder div { float: left; width: 300px; height: 300px; margin: 15px; display: block; border: 1px solid #CECECE; background: #FAFAFA; }
#spielfelder span { float: left; width: 98px; height: 98px; border: 1px solid #CFCFCF; -moz-border-radius: 49px; }
.stein { background: #EFEFEF; }
.stein:hover { background: #FFFFAE; cursor: pointer; }
.playerOne { background: #FFAEAE !important; cursor: default !important; }
.playerTwo { background: #AEFFAE !important; cursor: default !important; }
.clear { display: none; clear: both; font-size: 0; height: 0; }
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>

<div id="spielfelder"></div>
<br clear="left" />
<a href="#" onclick="feldDrehen();">Feld links drehen</a>
<a href="#" onclick="feldDrehen(1);">Feld rechts drehen</a>
<script type="text/javascript">


$(document).ready(function() {
	var currentPlayer = 0;	// 0 = none, 1 = first player, 2 = second player

	function generatePlayfields(obj) {
		// generate 4 playfields with 9 tiles
		for (var i=0, il=4; i<il; i++) {

			var field = $(document.createElement('div'));
			field.attr('id', 'spielfeld_' + i);
			field.className = 'spielfeld';
			
			// generate stones
			for (c=0, cl=9; c<cl; c++) {
				var tile = document.createElement('span');
				tile.className = 'stein';

				field.append(tile);
			}	
			obj.append(field);			
		}
	}
	
	// we use no object abstraction...
	function clickStone(event) {		
		if (currentPlayer == 1) {
			$(this).addClass('playerOne').unbind();			
		} else if (currentPlayer == 2) {
			$(this).addClass('playerTwo').unbind();			
		}
		currentPlayer ++;
		if (currentPlayer > 2) {
			currentPlayer = 1;
		}
		//console.log(event.target);
		//alert('Stein ' + event.target.id + ' wurde angeklickt');
		
	}	

	function clickGamefield(event) {
		console.log(event.target);
		//alert('Spielfeld - ' + event.target.id + ' - soll gedreht werden?!');
	}		
		
	// all init logic goes here...
	generatePlayfields($('#spielfelder'));
	//$('.spielfeld').bind('click', clickGamefield);
	$('.stein').bind('click', clickStone);

	currentPlayer = 1;		
});

function feldDrehen(direction) {
	var tiles = $('#spielfeld_0').children();
	var states = [];
	var state = 0;
	var obj = null 
	
	// gather current states and relocate
	for (i=0, il=tiles.length; i<il; i++) {
		obj = $(tiles[i]);
		states[i] = obj.hasClass('playerOne') ? 1 : (obj.hasClass('playerTwo') ? 2 : 0);
		obj.removeClass('playerOne playerTwo');	
	}
	// rearrange and apply them - left is default behavior
	var tmp = null;
	if (direction == 1) {
		tmp = [	states[6], states[3], states[0],
		   		states[7], states[4], states[1],
		   		states[8], states[5], states[2]];
	} else {
		tmp = [	states[2], states[5], states[8],
		   		states[1], states[4], states[7],
		   		states[0], states[3], states[6]];
	}
	
	for (i=0, il=tiles.length; i<il; i++) {
		$(tiles[i]).addClass( tmp[i] == 1 ? 'playerOne' : (tmp[i] == 2 ? 'playerTwo' : '') );
	}	
}
</script>

</body>
</html>
```


----------



## Michimitsu (8. Dez 2011)

hmm jou dein sieht auch um einiges strukturierter aus als meins ...


----------



## Michimitsu (8. Dez 2011)

ich hab deins mal bissl inspiziert und nen kleinen fehler gefunden ... wenn du das feld drehst dann ist dsa (möglicherweise leere) feld nicht mehr zum klicken möglich


----------



## Evil-Devil (8. Dez 2011)

Ah ok. Werde ich bei Gelegenheit ändern


----------



## Michimitsu (8. Dez 2011)

hmm da sieht man den unterschied zwischen lernend und gelernter xD da würd ich doch glatt gerne dein code nehmen und dran weiterarbeiten


----------



## Evil-Devil (8. Dez 2011)

Den Code aus meinen Javascript Anfängen oder Schnell-Schuss-Projekten willst du nicht sehen. Der ist auch Kraut und Rüben ^^. Dagegen ist der da oben sauber und verständlich.


----------



## Michimitsu (8. Dez 2011)

Ja ich bin eigentlich auch einfach nur froh wenn ich fertig bin .... aber son bissl dazugelernt hab ich mit sicherheit


----------



## Michimitsu (8. Dez 2011)

So jetzt hab ich iwi dein code mit meinem code n bissl zusammengeklatscht ^^ sieht gut aus xD


----------



## Evil-Devil (8. Dez 2011)

Na na  Nicht einfach nur zusammenklatschen. Auch verstehen


----------



## Michimitsu (8. Dez 2011)

ja das verstehen hat mir ein neues ergebnis geschaffen ^^ schaffe es schon alle felder zu drehen nur bei mir ist das problem hier --> 


```
$('#spielfelder-drehen1').click(function(){
	feldDrehen(1,'#spielfeld_0');//rechts
	alert("1 wird gedreht");
});
```

in der .css existieren bei mir die beiden hier : 

```
.pfeil-rechts{
	width: 195px;
	height: 195px;
	background-image: url(Image-fields/Pfeil-rechts.PNG);
	float: left;
}
.pfeil-links{
	width: 195px;
	height: 195px;
	background-image: url(Image-fields/Pfeil-links.PNG);
	float: left;
}
```

kann ich da irgendwie abwägen und ausschließen mit if(.pfeil-links) oder so `?


----------



## Evil-Devil (8. Dez 2011)

Du solltest im Idealfall dem Objekt das die Funktion auslöst direkt übergeben für welche Logik es zuständig ist. Also unabhängig vom verwendeten Style.


----------



## Michimitsu (8. Dez 2011)

hmm ich verstehe nicht genau was du meinst.


----------



## Evil-Devil (8. Dez 2011)

Na du hast doch deine Pfeile. 8 Stück an der Zahl. 4 für das Links drehen und 4 für das Rechts drehen. Denen fürs Links drehen übergibst du für das Click Event deine drehen Funktion so, dass sie Links drehen und für Rechts entsprechend mit dem Rechts Parameter.

drehen('spielfeld1'), drehen('spielfeld1', 1).
drehen('spielfeld2'), drehen('spielfeld2', 1).
drehen('spielfeld3'), drehen('spielfeld3', 1).
drehen('spielfeld4'), drehen('spielfeld4', 1).

Lässt sich sogar dynamisch alles erzeugen


----------



## Michimitsu (8. Dez 2011)

ja aber die pfeile erreiche ich über die klassen 
spielfelder-drehen1
spielfelder-drehen2
spielfelder-drehen3
spielfelder-drehen4


```
$("#spielfelder-drehen1").append("<div id='pfeil-rechts' class='pfeil-rechts'></div>");
$("#spielfelder-drehen1").append("<div id='pfeil-links' class='pfeil-links'></div>");
$("#spielfelder-drehen2").append("<div id='pfeil-rechts' class='pfeil-rechts'></div>");
$("#spielfelder-drehen2").append("<div id='pfeil-links' class='pfeil-links'></div>");

$("#spielfelder-drehen3").append("<div id='pfeil-rechts' class='pfeil-rechts'></div>");
$("#spielfelder-drehen3").append("<div id='pfeil-links' class='pfeil-links'></div>");
$("#spielfelder-drehen4").append("<div id='pfeil-rechts' class='pfeil-rechts'></div>");
$("#spielfelder-drehen4").append("<div id='pfeil-links' class='pfeil-links'></div>");
```


----------



## Evil-Devil (8. Dez 2011)

Ähm nein. Deine Pfeile haben eigene Klassen und wenn du ohnehin mit Inline HTML arbeitest, dann kannst du direkt das onclick Ereignis definieren oder nachträglich einmal
$('.pfeil-links').bind(....);
$('.pfeil-rechts').bind(....);
aufrufen.


----------



## Michimitsu (8. Dez 2011)

jou und was tippe ich dann hier rein ? 

```
feldDrehen(0,'#spielfelder_ <-- Hier ');
```
 
ich mein ist es dann überhaupt sinnvoll 
das ausm letzten post zu erstellen mit den spielfelder-drehen(1-4) ?


----------



## Evil-Devil (8. Dez 2011)

Na die Nr des Spielfeldes. Was sonst?


----------



## Michimitsu (8. Dez 2011)

ja aber wie teile ich ihm das 'dynamisch' mit ich will ja nicht mit allen 4 pfeilen nur ein feld bedienen ...


----------



## Evil-Devil (8. Dez 2011)

Du kannst auch in Javascript mit dem + Strings verknüpfen.


----------



## Michimitsu (9. Dez 2011)

Ich check grade nicht woher ich weiß das ich welches feld nun gemeint ist ...


----------



## Evil-Devil (9. Dez 2011)

Welches Feld gemeint ist übergibst du deinen Pfeilen. Entweder von Hand oder indem du irgendwelche Informationen am Pfeil hinterlegst oder die Pfeile auch dynamisch erzeugst.


----------



## Michimitsu (9. Dez 2011)

Ok hab grade die dynamische variante davon versucht problem ist erstmal das die felder s*****e angeordnet sind ...


>
<
> --- ---
< --- ---
> --- ---
< --- ---
>
<
 So siehts aus .... 
und so solles aussehen



> --- --- >
< --- --- <
> --- --- >
< --- --- <


----------



## Evil-Devil (9. Dez 2011)

Tja, da wirst du eben noch mit dem HTML probieren müssen. Erst das statische erzeugen und dann das dynamisch umsetzen. Mag viel Arbeit sein, aber dann übt das auch entsprechend.

<br> zum Umbruch deiner Elemente ist übrigens überflüssig, wenn du die Elemente floatest.


----------



## Michimitsu (9. Dez 2011)

hmm fällt dir da denn ein fehler auf ?? 
<pentago.js>

```
function generateDrehen(obj){
		for(var i = 0, il=4; i<il;i++){
			var field = $(document.createElement('div'));
			field.attr('id','pfeil-rechts_'+i);
			field.className = 'pfeil-rechts';
			obj.append(field);
		}
}
```


```
generateDrehen($('#spielfelder-drehen'));
```

<style.css>

```
#spielfelder-drehen{
	width: 195px;
	height: 390px; 
}
.pfeil-rechts{
	width: 195px;
	height: 195px;
	background-image: url(Image-fields/Pfeil-rechts.PNG);
	float: left;
}
```

<index.html>


```
<table cellpadding="0" cellspacing="0">
		<tr>
			<td>
				<div id=spielfelder-drehen></div>
...
...
...
```


----------



## Michimitsu (9. Dez 2011)

ok meine pfeile haben jetzt die id : pfeil-rechts_0 -4 und das gleiche auch mit den linken ... wie hol ich mir jetzt die id raus ?? ?


----------



## Evil-Devil (10. Dez 2011)

Indem du die ID abfragst? Auf den vorherigen Seiten hast du doch auch mitgedacht, wieso jetzt nicht mehr?


----------



## Michimitsu (13. Dez 2011)

Jou, projekt grade eben abgegeben hab noch n bissel hibekommen ... die gewinnprüfe funktion eigentich gut hinbekommen , noch paar unschönheiten beim spielen und der fehler mit dem drehen den ich dir mal gennant hatte ist noch drinne. Alles im allem möchte ich sehr für deine hilfe Danken. Du hast mir gut gehlfen nd ich denke ich bin eine ganze ecke besser in jquery, html und css geworden 
Vielen dank für deine hilfe


----------

