JQuery Bilder austauschen

[Michimitsu]

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]

das schaut doch aus wie JavaScript...

und Java != JavaScript also falscher Bereich

 

[Michimitsu]

richtig ... gar nicht drüber nachgedacht sry

 

[Evil-Devil]

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]

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]

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]

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.

( 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]

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]

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]

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

 

[Andi_CH]

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]

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 ....

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]

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]

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]

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

 

[Evil-Devil]

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]

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]

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]

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]

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]

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]

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]

$(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]

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]

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]

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]

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]

@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]

^^ 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]

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]

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]

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]

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

 

[Evil-Devil]

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]

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]

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]

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]

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

 

[Michimitsu]

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]

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]

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]

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]

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

 

[Michimitsu]

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]

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]

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]

Ü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]

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]

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]

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