und
guy = eval(document.getElementById("Guy"));
das eval ist hier überflüssig und vor allem macht er das Skript merklich langsamer. Merke: eval ist evil.
Da du aber sowieso nur einen Layer verwendest, würd ich das aus der Funkiton rausnehmen und guy global definieren, da auch getElementBy relativ langsam sein kann.
guy.style.position = "absolute";
Das reicht einmal, bzw. besser gleich im CSS.
Desweiteren interessieren mich noch 2 Dinge:
- Warum geht es nicht bei der Zeile mit "document.onkeydown = moving;", wenn ich den Funktionsaufruf moving mit einer klammer abschliesse? Sprich
document.onkeydown = moving();
weil du so die Funktion moving aufrufst und den rückgabewert and den Event übergibst.
Mach einfach mal:
alert(moving)
und dann
alert(moving())
und du merkst den Unterschied
- Als ich es vorhin mit den 2 Funktionen getestet hatte und dabei das Div mit den Pfeiltasten in verschiedene richtungen steuerte, war bemerkbar, dass logischerweise die sich ständig wieder aufrufenden funktionen sich stets addiert haben. dabei haben ich nenne es mal "verschiedene Kräfte" aufeinander gewirkt die das Div zum rütteln brachten. Wie könnte ich (wenn ich die Richtung ändere) vorhergehende setTimeout() abbrechen. Gibt es noch eine Möglichkeit die setTimeouts irgendwie zu benennen oder zu finden damit ich später sagen kann "wenn ich nach rechts steuere, brich mir alle setTimeouts ab denen ich den Parameter 37 übergeben habe?!
Ich würd mal sagen dein Konzept ist nicht ganz sauber. Du solltest einfach eine globale Funktion move() erstellen, die den Layer bewegt und in welche Richtung wird bestimmt durch globale x/y Werte die durch den key event geändert wedern.
Also in etwa so (ungetester quickhack)
var isMove = false;
var d_x = 0; // horizontal
var d_y = 0; // vertikal
var obj = null;
var speed = 100;
function move()
{
if(!isMove || !obj) return;
obj.style.top = obj.offsetTop + d_x;
obj.style.left = guy.offsetLeft + d_y;
setTimeout('move()', speed);
}
Stattdessen könnte man hier auch setInterval anwenden (in der Funktion start())
function start()
{
obj = document.getElementById("Guy");
if(!obj) return;
move();
}
function keyDown(evt)
{
if(window.event.keyCode == 38) d_y = -1; // hoch
if(window.event.keyCode == 40) d_y = 1; // runter
if(window.event.keyCode == 37 ) d_x = -1; // links
if(window.event.keyCode == 39) d_x = 1; // rechts
}
Da liesse sich noch leicht der Mozilla Event einbauen, dann brauchst du noch eine Stop Funktion.
Struppi.