Fliegendes Bild

[Attacho]

Hallo,
ich hab letztens etwas gesehen was ich auch gerne haben würde nur weiss ich nicht wie ich das anstelle bzw. nach was genau ich mich in Javascript erkundigen muss.
Es geht um folgendes:
Ein Kasten indem eine Fliege hockt. Wenn man irgendwo hin in dem Kasten klickt fliegt die Fliege dort hin und bleibt sitzen.

Hoffe ihr könnt mir helfen.

[Felix Riesterer]

Lieber Attacho,

Ein Kasten indem eine Fliege hockt. Wenn man irgendwo hin in dem Kasten klickt fliegt die Fliege dort hin und bleibt sitzen.

das ist nicht unmöglich, aber für jemanden, der von JavaScript noch wenig versteht, ist es im Prinzip zuviel verlangt.

Was willst Du tun?

Liebe Grüße,

Felix Riesterer.

[Steel]

Moinsen,

ich hab letztens etwas gesehen was ich auch gerne haben würde nur weiss ich nicht wie ich das anstelle bzw. nach was genau ich mich in Javascript erkundigen muss.
Es geht um folgendes:
Ein Kasten indem eine Fliege hockt. Wenn man irgendwo hin in dem Kasten klickt fliegt die Fliege dort hin und bleibt sitzen.

Hoffe ihr könnt mir helfen.

War das JS oder Flash? Letzteres ist für sowas doch ne Ecke besser geeignet.

ansonsten: Fliege absolut im Kasten positionieren, Klick abfangen, Koordinaten auswerten, Koordinaten relativ zur Fliege in Flugbahn umwandeln, in einer Schleife Fliegengrafik zur Koordinate bewegen.  (Koordinaten schrittweise anpassen)

[LX]

Wenn das nicht mit Flash realisiert wurde, kamen entweder mehrere Grafiken (für die Drehung und Bewegung) oder das Canvas-Objekt zum Einsatz. Suche nach letzterem und Du wirst finden (insbesondere das Tutorial auf mozilla.org ist ganz brauchbar).

Gruß, LX

[Attacho]

Hallo! Danke für die Antworten.
Es war kein Flash sondern Javascript, finde nur leider die Seite nicht mehr.
Habe mich mal umgesehen und bin auf die Seite gekommen: www.travianer.de
Klickt mal dort rechts wo das Männchen steht irgendwo auf den Weg.
Das ist doch Javascript oder?
Soetwas in der Art meinte ich nur mit einer Fliege in einem Kasten ;-)

[Steel]

Moin,

Hallo! Danke für die Antworten.
Es war kein Flash sondern Javascript, finde nur leider die Seite nicht mehr.
Habe mich mal umgesehen und bin auf die Seite gekommen: www.travianer.de
Klickt mal dort rechts wo das Männchen steht irgendwo auf den Weg.
Das ist doch Javascript oder?
Soetwas in der Art meinte ich nur mit einer Fliege in einem Kasten ;-)

Jo! Sieht schwer nach JS aus, auch wenn ich mir den Code nicht angeschaut habe. Das ist aber nicht grad trivial. Allein das 'dem Weg folgen' ist nicht uninteressant. Aber im Grunde macht man es so, wie ich gesagt habe. Je nach Richtung benötigt man für eine Animation ein entsprechendes animiertes GIF, das mit der 'Grafik im Ruhezustand' getauscht wird, solange die Bewegungsroutine läuft.

[Attacho]

Hallo!

Verstehe nicht so ganz was du meinst kannst du mir eine Webseite sagen wo man das alles nachsehen kann?

Im moment hört sich das für mich so an:
ich sollte animierte Grafiken machen für jeden eventuellen klick, was bei einer Schaltfläche die Platz für 10000 Klicks hat ich 10000 animierten Grafiken brauch. Das kann doch nicht sein, oder???

[Patrick Andrieu]

Hallo Attacho!

ich sollte animierte Grafiken machen für jeden eventuellen klick, was bei einer Schaltfläche die Platz für 10000 Klicks hat ich 10000 animierten Grafiken brauch. Das kann doch nicht sein, oder???

nein, Du brauchst für jede Richtung eine Grafik, wenn es genauer sein soll, vielleicht ein paar mehr. Bei den vier Cardinalrichtungen N, O, S, W wären es also vier animierte, fliegende Fliegen:

• Fliege mit Kopf nach »oben« -> fliegt nach Norden
• Fliege mit Kopf nach »unten« -> fliegt nach Süden
• Fliege mit Kopf nach »rechts« -> fliegt nach Osten
• Fliege mit Kopf nach »links« -> fliegt nach Westen

Wenn Du NO, NW, SO, SW dazu nehmen willst, brauchst Du vier mehr. Und so weiter, wenn Du es ganz genau nachbilden willst.

Viele Grüße aus Frankfurt/Main,
Patrick

[Steel]

Hoi!

Verstehe nicht so ganz was du meinst kannst du mir eine Webseite sagen wo man das alles nachsehen kann?

SELFHTML ;)

Im moment hört sich das für mich so an:
ich sollte animierte Grafiken machen für jeden eventuellen klick, was bei einer Schaltfläche die Platz für 10000 Klicks hat ich 10000 animierten Grafiken brauch. Das kann doch nicht sein, oder???

Dazu hat le Patrick ja schon was gesagt. In Deinem Travianerbeispiel werden nur 2 Bewegungsanimationenen benutzt. Das wird haeufg so gemacht. Man nimmt einfach rechts/links. Fuer den Fall dass es mal gerade nach oben/unten geht muss man sich fuer eine davon entscheiden. Das wird schon seit Atarikonsolen und Heimcomputerzeiten so gemacht.

Du brauchst also 3 Grafiken.

• Eine fuer 'bewegt sich nicht' Die kann durchaus auch animiert sein.
• Eine fuer bewegt sich nach links (animiertes GIF)
• Eine fuer bewegt sich nach rechts (z.b. das gleiche GIF nur gespiegelt)

(Spaeter mal, wenn Du die eigentliche Bewegung hast. Vorerst reicht einfach eine einfache Grafik oder auch nur ein kleines farbiges DIV.)

Dann benoetigst Du Den Bereich in dem sich bewegt werden soll. Den positionierst Du am Besten relativ. Dorthinein packst Du (absolut positioniert) deine Figur. Die Koordinaten weisst Du. Die Zielkoordinaten ermittelst Du bei Klick auf das Feld. Und jetzt in kleinen Schritten dorthin bewegen.

Aber das hatte ich ja alles schonmal geschrieben.

[Attacho]

Ich habe genau das gefunden was ich brauche, dank eurer Hilfe.
Nun bräuchte ich sie aber nochmal.
Hier ist der Code:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (document.getElementById) {
    document.getElementById("Springer").style.left  = Ereignis.clientX + "px";
    document.getElementById("Springer").style.top = Ereignis.clientY + "px";
  } else if (document.all) {
    document.all.Springer.style.left = Ereignis.clientX;
    document.all.Springer.style.top = Ereignis.clientY;
  }
}

document.onmousedown = Mausklick;
</script>
</head><body>
<div id="Springer" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
<p>Klicken Sie irgendwo ins Dokument und der Springer bewegt sich zur Mausposition.</p>
</body>
</html>

Wie muss ich vorgehen wenn ich den Weg des divs langsam bis zu Klickfläche haben will?
Ich dachte ich benutze setIntervall() aber es hat keinerlei auswirkungen :-(

[Felix Riesterer]

Lieber Attacho,

zum Animieren findest Du hier ein etwas umfangreicheres Tutorial: Fader-Framework - kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts

if (document.getElementById) {
    document.getElementById("Springer").style.left  = Ereignis.clientX + "px";

Das Vorhandensein der Funktion document.getElementById ist Dir garantiert! Die Browser, die das noch nicht konnten, sind heute praktisch nicht mehr unterwegs. Das Vorhandensein dieser Funktion alleine garantiert Dir noch lange nicht, dass Du im Dokument dann auch ein Element mit der ID "Springer" finden wirst. Löse das Problem daher wie folgt:

var springer = document.getElementById("Springer");  
  
if (springer) {  
    ...  
}

Weitere Hinweise findest Du in oben genanntem Artikel.

Liebe Grüße,

Felix Riesterer.

[Attacho]

Hallo!

Weitere Hinweise findest Du in oben genanntem Artikel.

Ich bekomm es einfach nicht hin, ich müsste für window.setTimeout ja einen vergleich machen und zwar der Klickpunkt und der momentane Punkt des Divs und dann solange window.setTimeout ausführen bis der momentane Punkt am Klickpunkt ist.
Kenne mich nicht sehr gut mit JavaScript aus und möchte eigentlich nicht wirklich für so ein kleines Kästchen mit einer Fliege meinen Kopf zerbrechen :-(

Könnte mir vielleicht bitte jemand einen ausschlaggebenden "Tipp" (sprich: Lösungsweg) zeigen? Danke.

[Struppi]

Könnte mir vielleicht bitte jemand einen ausschlaggebenden "Tipp" (sprich: Lösungsweg) zeigen? Danke.

Ein Lösungsweg hast du, wenn du das bon Felix verlinkte Fader Framework verstanden hast. Mit zwei Sätzen hier im Forum ist das nicht getan.

Struppi.

[Felix Riesterer]

Lieber Attacho,

Ich bekomm es einfach nicht hin,

nicht jetzt schon aufgeben!

ich müsste für window.setTimeout ja einen vergleich machen und zwar der Klickpunkt und der momentane Punkt des Divs und dann solange window.setTimeout ausführen bis der momentane Punkt am Klickpunkt ist.

Nö. Es geht auch anders. Du könntest einen Timer ständig laufen lassen (wie eine tickende Uhr), der ständig prüft, ob die aktuelle Position geändert werden muss, um im Bedarfsfalle eine Positionsveränderungs-Funktion aufzurufen, die einen einzelnen Bewegungsschritt ausführt. Das steht aber alles in dem Artikel, den ich Dir verlinkt habe!

Kenne mich nicht sehr gut mit JavaScript aus

Das ist schon OK. Alle hier haben einmal da angefangen, wo Du jetzt bist. Das ist kein Grund aufzugeben.

und möchte eigentlich nicht wirklich für so ein kleines Kästchen mit einer Fliege meinen Kopf zerbrechen :-(

ZONK! Falsche Antwort. Das hier ist das _SELF_HTML-Forum! Hier wird alles selbst gemacht. Wer nicht dazulernen will, ist hier in aller Regel falsch.

Könnte mir vielleicht bitte jemand einen ausschlaggebenden "Tipp" (sprich: Lösungsweg) zeigen? Danke.

Ich habe Dir bereits einen hilfreichen Artikel verlinkt. Wenn Du Dir zu fein bist, den einmal etwas durchzuarbeiten, sondern eine Lösung geschenkt bekommen möchtest, dann bist Du hier definitiv im falschen Forum.

Also frisch auf ans Werk!

Liebe Grüße,

Felix Riesterer.

[Attacho]

Hallo Felix, danke für die nette Antwort!

Und genau DAS kann ich nicht bzw. versteh ich nicht:

der ständig prüft, ob die aktuelle Position geändert werden muss, um im Bedarfsfalle eine Positionsveränderungs-Funktion aufzurufen, die einen einzelnen Bewegungsschritt ausführt

Helft mir :(

Mfg

[Steel]

Moin!

Du hast doch die aktuelle Position, oder? Die Zielkoordinaten hast Du auch. Der Rest ist simples Mathe.

Im Grunde musst Du die Figur nur auf einer waagerechten oder senkrechten Linie bewegen. Also z.B.  vom Startleft zum Zielleft. (x1 zu x2) Das wirst Du doch wohl hinbekommen? Alle X Sekunden Das Bild z.B. um 1 Pixel verschieben.

Eine vertikale Bewegung bekommst Du, wenn Du für jeden Pixel in X Richtung das Verhältnis der Geraden nimmst und daraus einen y Punkt errechnest. Damit der ganze Spaß jetzt nicht viel schneller geht, wenn Du vertikal mehr Abstand hast, als horizontal, nimmst Du einfach die laengere Strecke (horizontal oder vertikal) als Basis für Deine Bewegung.

Ich sagte bereits, es ist nicht trivial. In diesem Fall ist es aber recht leicht, weil man nur ein wenig Basismathematik benoetigt (jede Bewegung quasi nur ein popeliges Dreieck). Es ist aber relativ komplex.

Welcome to the world of programing. Wo ein kleiner Fliegenschiss mehr Arbeit erfordert, als irgendwer bereit ist zu zahlen.