Merkwürdiges ruckeln

one6666 · 16. März 2010

Hallo,

dank Sven und Maik, habe ich auch das letzte Problem meiner Steuerung gelöst, dachte ich zumindest,
denn jetzt tritt ein Fehler auf den ich mir in keinsterweise erklären kann

Schaut euch mal an was passiert wenn ihr die Pfeil Taste (nach oben) gedrückt haltet,
dann fängt das Objekt an zu springen wie ein Känguru

http://media-volex.de/steuerung/beta11.html

Aber wenn man den Pfeil nur kurz drückt geht alles perfekt

Hier der Code:

HTML:

<!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>Steuerung</title>

PHP:

<script type="text/javascript">

var button_top;

function key_top(count){
  if(button_top == "on"){
    if(typeof count == "undefined"){
	  count = document.getElementById("b_box").style.top;
	  count = count.replace(/px/, "");
	  count = parseInt(count);
	}
    if(count < 1000){
      count = count + 5;
	  document.getElementById("b_box").style.top = count + "px";
	  window.setTimeout("key_top(" + count + ")",100);
    }
  }
}

function key_read_on(key_code){
  switch(key_code.which){
  case 38:
    button_top = "on";
    key_top();
  break;
  }
}

function key_read_off(key_code){
  switch(key_code.which){
  case 38:
    button_top = "off";
  break;
  }
}

document.onkeydown = key_read_on;
document.onkeyup = key_read_off;

</script>

HTML:

</head>

<body>
<div id="b_box" style="background:#CF0; width:50px; height:50px; top:1px; position:relative;"></div><div style="z-index:1; position:relative;" id="ausgabe"></div>
</body>
</html>

CPoly · 16. März 2010

Du hast die geschweifte Klammer deines if(button_top == "on") zu früh geschlossen (oder ein else vergessen?)

Javascript:

function key_top(count){
	if(button_top == "on"){
		if(typeof count == "undefined"){
			count = document.getElementById("b_box").style.top;
			count = count.replace(/px/, "");
			count = parseInt(count);

			if(count < 1000){
				count = count + 5;
				document.getElementById("b_box").style.top = count + "px";
				window.setTimeout("key_top(" + count + ")",100);
			}
		}
	}
}

Übrigens wüde ich folgendes an deinem Skript ändern:
1.Merke dir die Position in zwei Variablen x und y. Das spart dir das ständige Parsen der Werte aus dem style und diesen Parameter, dessen Datentyp du ständig mit typeof überprüfst
2.Merke dir die Referenz auf dein Objekt in einer Variable. Das spart den ständigen Zugriff über getElementById()
3.Mach aus "button_top" ein Boolean und nutze anstatt on/off besser true/false

one6666 · 16. März 2010

Hallo CPoly,

danke für deine Antwort scheint der richtige Weg zu sein,
aber ist mir noch ein bisschen spanisch,

ich frage ab ob der Wert leer ist wenn ja (also beim start) dann schreibe mir in count den startwert,
so und nun hast du noch im true teil der if Anweisung den Schleifenzähler drin

beim nächsten durchlauf wäre doch die Variable nicht mehr undefined sondern mit einer Zahl belegt,
somit würde die if Anweisung nicht zum true Teil springen, aber trozdem läuft die Schleife, wie und warum, verstehe gerade nur noch Bahnhof

Nachtrag:
Also dieser ganze Teil dürfte ja nach dem zweiten durchlauf garnicht mehr starten:

HTML:

            if(count < 1000){
                count = count + 5;
                document.getElementById("b_box").style.top = count + "px";
                window.setTimeout("key_top(" + count + ")",100);
            }

Quaese · 16. März 2010

Hi,

nimm mal das

Code:

window.setTimeout("key_top(" + count + ")",100);

raus. Denn damit erreichst du, dass bei jeder Bewegung, während die Taste gedrückt gehalten wird, die Translation verzögert ein zweites Mal ausgeführt wird. Das führt zum "Ruckeln".

Ausserdem solltest du den Event derart behandeln, dass er auch im IE richtig ausgeführt wird - z.B.

Code:

function key_read_on(key_code){
  key_code = (window.event)? window.event : key_code;
  try{
    key_code.which = key_code.keyCode;
  }catch(objExc){}

  // Bisheriger Code
}

Ciao
Quaese

one6666 · 16. März 2010

Das kann ich doch nicht rausnehmen

wer ruft dann meine function weiterhin auf ?
dann läuft die nur einmal ?

Nachtrag:
Häää doch das geht lol wie krass omg dank dir

CPoly · 16. März 2010

Bei mir (Firefox 3.5.8) wird beim Gedrückt halten einer Taste durchgehend onkeyup und onkeydown gefeuert. Das erklärt wieso deine Funktion trotzdem aufgerufen wird.
Das bedeutet dein Objekt bewegt sich je nach Browser und Betriebssystem unterschiedlich schnell. Also musst du noch irgendwie die Bewegung abhängig machen von der Zeit.

Quaese · 16. März 2010

Hi,

dann müsste das Script aber völlig anders organisiert werden.

Der onkeyup-Event wird nur noch zum Setzen der gedrückten Taste verwendet, der onkeyup-Event zum Resetten.

In einer zeitgesteuerten Schleife (Frames) wird geprüft, ob und welche Taste gedrückt ist und entsprechend gehandelt.

Ciao
Quaese

one6666 · 16. März 2010

Ah ich verstehe, werde jetzt mal alle Browser durch Checken, und dann brauch ich auch keinen Zähler mehr, das ist natürlich super und wird jetzt alles leichter machen,
man hab ich Heute super Anworten bekommen

Da hab ich erstmal genug Infos um mich mal ran zu machen

Nachtrag:

Quaese hatte deine Antwort noch nicht gesehen, was meinst du mit :

In einer zeitgesteuerten Schleife (Frames) wird geprüft, ob und welche Taste gedrückt ist und entsprechend gehandelt.

?

Quaese · 16. März 2010

Hi,

du startest mittels setIntervall ein periodisches Aufrufen einer Funktione (z.B. alle 40 Millisekunden). Innerhalb dieser Funktion prüfst du, ob eine relevante Taste gedrückt wurde und reagierst entsprechend - Bewegung nach oben, rechts, unten oder links.

Beispiel:

Code:

<!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>Steuerung</title>
<script type="text/javascript">

var button_top;
var hTimer = null;
var blnPressed = false;

function myFrame(){
  // Falls eine Cursortaste gedrückt wird
  if(blnPressed){
    switch(intKeyCode){
      case 37:	key_top(-1, 'left');
                break;
      case 38:	key_top(-1, 'top');
                break;
      case 39:	key_top(1, 'left');
                break;
      case 40:	key_top(1, 'top');
                break;
    }
  }
}

window.onload = function(){
  hTimer = window.setInterval(function(){myFrame();}, 40);
}

function key_top(intSgn, strDir){
  var count = parseInt(document.getElementById("b_box").style[strDir]);

  if(count < 1000){
    count += (intSgn)*5;

    document.getElementById("b_box").style[strDir] = count + "px";
  }
}

function key_read_on(key_code){
  key_code = (window.event)? window.event : key_code;
  try{
    key_code.which = key_code.keyCode;
  }catch(objExc){}

  intKeyCode = key_code.which;

  if(intKeyCode>=37 && intKeyCode<=40)
    blnPressed = true;
}

function key_read_off(key_code){
  key_code = (window.event)? window.event : key_code;
  try{
    key_code.which = key_code.keyCode;
  }catch(objExc){}

  intKeyCode = key_code.which;
  blnPressed = false;
}

document.onkeydown = key_read_on;
document.onkeyup = key_read_off;

</script>
</head>

<body>
<div id="b_box" style="background:#CF0; width:50px; height:50px; top:1px; left: 0; position:relative;"></div><div style="z-index:1; position:relative;" id="ausgabe"></div>
</body>
</html>

Ciao
Quaese

Merkwürdiges ruckeln

one6666

Mitglied Titanium

CPoly

Mitglied Weizenbier

one6666

Mitglied Titanium

Quaese

Moderator

one6666

Mitglied Titanium

CPoly

Mitglied Weizenbier

Quaese

Moderator

one6666

Mitglied Titanium

Quaese

Moderator

Neue Beiträge