✔ Tastenabfrage in einer Schleife?

  • Themenstarter Themenstarter L0ne
  • Beginndatum Beginndatum
L

L0ne

Ich möchte gerne eine wiederholende Tastenabfrage in JavaScript realisieren.
Die einzelne Abfrage funktioniert mit dem "onkeydown"- Event schon recht gut. In meinem kleinem funktionierenden Beispiel wird anschließend die jeweilige gedrückte Taste als Text ausgegeben.

PHP: 
<script type="text/javascript">
var aktuelleEingabe = 0;
document.onkeydown = function(event) {
    aktuelleEingabe = event.keyCode;  
    if (aktuelleEingabe == 38) {
        document.write("OBEN");
        aktuelleEingabe = 0;
    }
}
</script>

Ich würde aber gerne diese Tastenabfrage in einer Schleife wiederholen lassen.
Die for- Schleife habe ich jetzt nur als Beispiel genommen.

PHP: 
<script type="text/javascript">
var aktuelleEingabe = 0;
for(var i=0; i<=10; i++){
    document.onkeydown = function(event) {
        aktuelleEingabe = event.keyCode;  
        if (aktuelleEingabe == 38) {
            document.write("OBEN");
            aktuelleEingabe = 0;
        }
    }
}
</script>

Mein Problem besteht darin, dass sobald die Tastenabfrage in einer Schleife steht, diese nicht mehr ausgeführt wird bzw. sich auch nicht immer wiederholt, so wie ich es gerne hätte. Denn nachdem eine Taste abgefangen ist, soll auch gleich die nächste Taste die gedrückt wird, wieder abgefangen werden.

Ich Danke im Voraus.
 
Zuletzt bearbeitet von einem Moderator:
JavaScript ist event-basiert. In deinem ersten Beispiel legst du die Funktion fest, welche das "onkeydown" Event des "document" Objektes behandeln soll. Diese wird jedes Mal Aufgerufen, wenn eine Taste gedrückt wird, unabhängig davon, was gerade sonst noch für Skripte am laufen sind. Das ist so weit ja auch völlig korrekt.

In deinem zweiten Beispiel legst du ebenfalls diese Funktion fest und überschreibst sie dann zehn mal (die Schleife läuft elf mal). Wenn die Schleife durchgelaufen ist (die läuft innerhalb von Nanosekunden komplett durch) hast du also die letzte Funktion drin stehen.

Du musst also umdenken. Sag uns was du erreichen willst und wir können die bei der Lösung helfen.
 
@CPoly

Vielen Dank für die schnelle Antwort.
In meinem kleinen Beispiel hatte ich bisher nur etwas mit der Tastenabfrage experimentiert.
Letztendlich soll nachdem eine Taste abgefangen wurde beispielsweise ein stylesheet einer Grafik verändert werden. Sodass man ein Bild oder eine Form durch die Tasten bewegen kann.

Wie gesagt, die Tasteneingabe funktioniert aber halt nur einmal.
 
Wenn du mal folgendes nimmst, wirst du sehen, dass es nicht nur einmal passiert.

Javascript: 
document.onkeydown = function(event) {
	document.title = event.keyCode;
}

Für das was du vor hast würde man sich die zuletzt gedrückte taste merken und dann in gewissen intervallen das Objekt animieren (window.setInterval).

Mir war grad danach

HTML: 
<!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>Bewegung</title>
</head>

<body>
	<div id="das_ding" style="width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;"></div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
	var
		ding = document.getElementById('das_ding'),
		x = 0,
		y = 0,
		richtung = null,
		richtungen = {
			'87': 'oben',
			'68': 'rechts',
			'83': 'unten',
			'65': 'links'
		};
	
	window.setInterval(onTick, 33);
	
	document.onkeydown = function(e) {
		richtung = richtungen[e.keyCode];
	}
	
	document.onkeyup = function(e) {
		richtung = null;
	}
	
	function onTick() {
		switch(richtung) {
			case 'links':
				x -= 5;
				break;
			case 'rechts':
				x += 5;
				break;
			case 'oben':
				y -= 5;
				break;
			case 'unten':
				y += 5;
				break;
		}
		
		ding.style.left = x + 'px';
		ding.style.top = y + 'px';
	}
	/* ]]> */
	</script>
</body>

</html>

Edit: Ist WASD.
 
@CPoly

Ich danke vielmals, dass aufgezeigte Beispiel ist für das grundlegende Prinzip ausgezeichnet.
freundliche Grüße
L0ne
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück