hallo,
Ich möchte fragen ob man irgendwie eine laufenede Figur machen kann, die genau dorthin lauft, wo man klickt.
Ausserdem sollte sich die grafik ändern, wenn sie nach links oder rechts lauft.
Wie bei
www.travianer.de
Da muss ich schon fast lachen
Hab sowas mal zu hause gemacht. Zum Testen auch eine Travianer Figur verwendet.
Also zunächst einmal musst du die maus abfangen. Diese Gibt dir ja auch die aktuellen Koordinaten wieder.
Da du ja ein Element bewegst (höchstwahrscheinlich ein img) ,kannst du auch von diesem die Position ermitteln. Das machst du am besten mit dieser Funktion:
Code:
/**
* Ermittelt die Position eines Elementes
*/
this.getTopLeft = function(elm) {
var x, y = 0;
//set x to elm’s offsetLeft
x = elm.offsetLeft;
//set y to elm’s offsetTop
y = elm.offsetTop;
//set elm to its offsetParent
elm = elm.offsetParent;
//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent
while(elm !== null) {
x = parseInt(x) + parseInt(elm.offsetLeft);
y = parseInt(y) + parseInt(elm.offsetTop);
elm = elm.offsetParent;
}
return {Top:y, Left: x};
};
Mit .animate (
.animate() – jQuery API) kannst du das Element bewegen lassen.
Dabei musst du nun 2 Sachen beachten. Ist die X-position der Maus kleiner als die der Figur setzt due die Grafik nach links. Ansonsten nach rechts.
Die zweite Sache ist, dass du die figur zwar animieren kannst, aber keine Geschwindigkeit eingeben kannst, sondern nur die Dauer der Bewegung.
So würde deine Figur mit fester zeiteinstellung für eine 100px Strecke genau so lange brauchen wie für 500 px.
Um die zeit also variabel zu machen brauchst du die Strecke.
Da wir 2 punkte haben, kannst du die Strecke Prima über den Satz des Pythagoras ausrechnen.(a² + b² = c²) Da hab ich auch noch eine Skizze für dich
Wenn du dann die Strecke hast musst du nur vorher als Variable die Pixel pro sekunde zu definieren.
Dann Strecke/variable_pixel_pro_sek -> Zeit.
Probier dich einfach mal damit. :)
