Hintergrund animieren/wechseln bzw. Bewegung simulieren

[ricounltd]

Hallo,
ich habe derzeit folgendes Problem. Mein Script sieht aktuell wie folgt aus:

function gameplay_start(event) {
  var current_position_x = document.getElementById('user').offsetTop;
  var current_position_y = document.getElementById('user').offsetLeft;
  
  /** Spielfigur nach rechts bewegen, solange die Taste gedrückt wird */
  if(event.keyCode == 39) {
	document.getElementById('user').style.width = '20px';
	
	var new_position = current_position_y + 10;
	document.getElementById('user').style.left = new_position + 'px';
	document.getElementById('user').style.backgroundPosition = '-36px 0';
  }
}

function gameplay_stop(event) {
  /** Spielfigur anhalten, wenn Taste (nach rechts) losgelassen wird */
  if(event.keyCode == 39) {
	document.getElementById('user').style.width = '17px';
	document.getElementById('user').style.backgroundPosition = '-19px 0';
  }
}

Das funktioniert schon ganz gut, nur leider sieht es nicht so aus, als würde sich die Spielfigur auch wirklich bewegen. Ich müsste es also irgendwie realisieren, dass sich der Hintergrund (bzw. dessen Position, weil ich Sprites verwende) ändert. Also wieder zurück auf den Ursprungswert (-19px) stellt. Nur weiss ich beim Besten Willen nicht wie ich es anstellen soll.

Folgender Ablauf soll also dargestellt werden:
- wenn Taste (nach rechts, ID:39) gedrückt wird, dann wechsle die Hintergrundbild-Position auf -19px (denn an dieser Stelle schaut die Spielfigur nach rechts)
- solange wie die Taste (39) gedrückt wird, soll sich die Hintergrundbild-Position zwischen -19px und -36px immmerwieder wechseln

Ich hoffe ihr könnt mir helfen. Würde mich darüber sehr freuen! Vielen Dank schonmal im voraus.

 

[CPoly]

Mach folgendes:

Wenn die 39 gedrückt wurde (keydown), starte einen Timer mittel setInterval. Bei jedem Auslösen wechselst du die Hintergrund position.

Wenn eine Taste losgelassen wird (keyup), stoppst du den Timer mittels clearInterval.

 

[ricounltd]

...ok, danke. Aber wie mache ich das denn? So etwa:

setInterval(document.getElementById('user').style.backgroundPosition = '-36px 0',500);

Wie kommt der dann aber wieder auf den Wert "-19px" zurück? Bin ein echter Anfänger in diesem Bereich.

 

[CPoly]

Ungetesteter Code

var
	userElem = document.getElementById('user'),
	animate = false,
	pos = -19,
	timer = null;

document.onkeydown = function(e) {
	e = e || window.event;
	
	if((e.which || e.keyCode) === 19) {
		timer = setInterval('animate()', 500);
	}
}

document.onkeyup = function() {
	clearInterval(timer);
}

function animate() {
	pos = (pos === -19) ? -36 : -19;
	
	userElem.backgroundPosition = pos + 'px 0px';
}

 

[ricounltd]

Oh man, da seh ich ja nicht durch - was soll der Code bedeuten? Funktioniert auch nicht so wie du ihn gepostet hast. Aber sag mal wo wir gerade dabei sind... ist es eigentlich möglich in einem externen Script zu prüfen, ob eine Taste gedrückt wird/wurde und welche es ist oder funktioniert das nur in dem ich im Body-Tag mit dem Event-Handler "onkeydown" eine Funktion aufrufe und diese dann nur prüfen kann, welche Taste gedrückt wurde?

~edit: ich hab das mal mit dem "document.getElementById" als "var" getestet und das funktioniert nicht, das Element kann ich so in Funktionen nicht nutzen, keine Ahnung was ich falsch mache -.-

 

[CPoly]

Meinen Code kannst du so in eine externe Datei kopieren.

Es gibt drei Möglichkeiten einen Event-Handler zu definieren

1. Im Dokument als Attribut. Wie du beschrieben hast, man gibt z.B. beim body-Element dem Attribut "onkeydown" den Namen einer JavaScript Funktion.

2. Im Code, in dem man dem DOM Element die entsprechende Eigenschaft gibt. Das habe ich in meinem Code gemacht (document.onkeydown = ...). Das würde z.B. auch mit dem "user" Element funktionieren.

3. Im Code, in dem man beliebig viele Event Handler mittels "addEventListener" an ein DOM Element hängt. Das Funktion z.B. nicht im IE, da muss man "attachEvent" benutzen.


Ich habe meinen Code jetzt mal getestet und er war leicht fehlerhaft. Habe ihn geändert.

var
	userElem = document.getElementById('user'),
	animate = false,
	pos = -19,
	timer = null;

document.onkeydown = onKeyDown;
document.onkeyup = onKeyUp;

function onKeyDown(e) {
	e = e || window.event;
	
	if((e.which || e.keyCode) === 39) {
		timer = setInterval('onTimer()', 500);
	}
	
	//Funktion entfernen, weil wir weitere Tastendrucke ignorieren
	document.onkeydown = null;
}

function onKeyUp(e) {
	clearInterval(timer);
	
	//Funktion wieder dran hängen
	document.onkeydown = onKeyDown;
}

function onTimer() {
	pos = (pos === -19) ? -36 : -19;
	
	userElem.style.backgroundPosition = pos + 'px 0px';
}

Und den Code habe ich in diese HTML Datei eingebunden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Animation</title>
	
	<style type="text/css">
	#user {
		width:100px;
		height:100px;
		background:url(img.jpg) left top no-repeat;
	}
	</style>
</head>

<body>
	<div id="user"></div>
	
	<script type="text/javascript" src="anim.js"></script>
</body>

</html>

 

[ricounltd]

Tut mir echt leid, aber das ganze funktioniert so nicht. Ich kann diesen Code in eine externe Javascript-Datei packen:

document.onkeydown = meine_funktion();

function meine_function() {
  alert('hallo welt!');
}

und es funktioniert nicht einmal!

Ich muss es immer im Body-Tag angeben:

<body onkeydown="meine_function();">

Ich versteh das nicht?!

Wenn ich den JS-Code von oben in die HTML-Datei schreibe (also nicht extern auslagere) funktioniert es jedoch. Meine externe JS-Datei binde ich wie folgt ein:

<script type="text/javascript" src="rsrc/js/script.js"></script>

~edit: Habe soeben bemerkt, dass wenn ich den Code mit "onkeydown" und der Funktion an den Anfang der Datei setze führt er es aus, aber sobald ich Variablen davor definiere, dann tut es er dies nicht mehr.

 

[CPoly]

Vergleiche mal die beiden Zeilen, eine von mir und eine von dir.

document.onkeydown = onKeyDown;

document.onkeydown = meine_funktion();

Fällt dir was auf?

aber sobald ich Variablen davor definiere, dann tut es er dies nicht mehr.

JavaScript wird gestoppt, sobald ein Fehler auftritt. Also hast du vermutlich bei der Variablen Deklaration einen Fehler. Zeig mal den Code.

 

[ricounltd]

Hey,
also ich hab den Fehler gefunden. Die Klammern () waren überflüssig und ich musste das Einbinden des externen JS-Codes vor dem schliessenden </body>-Tag verschieben.

 

[CPoly]

Also funktioniert jetzt alles wie du wolltest?

und ich musste das Einbinden des externen JS-Codes vor dem schliessenden </body>-Tag verschieben.

Der Browser geht von oben nach unten vor und parst das HTML. Sobald er auf ein Script Tag stößt, führt er es aus. Wenn du das Script vor dem "#user" Element einbindest, wurde dieses noch gar nicht geparst und es wird deshalb nicht gefunden.
Anstatt das Skript ans Ende des Dokumentes zu setzen, könnten du z.B. auch den ganzen Code in eine body-onload Funktion stecken. Denn wenn diese ausgeführt wird, sind auf jeden Fall alle Element geparst worden.