Javascript- Dreiteilige Bewegung mit Richtungsänderung

  • Java

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Javascript- Dreiteilige Bewegung mit Richtungsänderung

    Hallo zusammen!

    Ich stehe mal wieder vor einem Problem. Ich will mäxchen von a nach b wandern lassen wobei sie zuerst wo rauf, dann gerade aus und dann wieder runter gehen sollen. Das bewegen funktioniert schon sehr gut, nur leider nur in eine Richtung. Ich hab mir gedacht ich könnte es mit setTimeout() lösen, aber leider klappt das nicht. Hier mal mein code:

    [HTML]<html>
    <head>

    <style type="text/css">
    @import "website.css";
    </style>

    <script language="JavaScript" type="text/javascript">
    <!--
    var ie =(document.all)?1:0;
    var DOM =(document.getElementById&&!document.all)?1:0;
    var ns =(document.layers)?1:0;

    personenbilder= new Array ("http://www.html.de/images/w_n.gif","http://www.html.de/images/m_n.gif","http://www.html.de/images/m_s.gif","http://www.html.de/images/m_b.gif","http://www.html.de/images/m_c.gif");
    personengeschwindigkeiten= new Array (1,1,2,2,1);
    personengeschwindigkeit= new Array ();
    var timer=20;

    function moove(obj,startx,starty,endx,endy,stufe,ende){


    if (ie) {
    document.all["div"+obj].style.left=startx;
    document.all["div"+obj].style.top =starty;
    }
    if (DOM) {
    document.getElementById("div"+obj).style.left=startx;
    document.getElementById("div"+obj).style.top =starty;
    }
    if (ns) {
    document.layers["div"+obj].left=startx;
    document.layers["div"+obj].top =starty;
    }

    startx+=(endx-startx)/stufe;
    starty+=(endy-starty)/stufe;

    if(stufe>0)
    {
    setTimeout('moove('+obj+','+startx+','+starty+','+endx+','+endy+','+(stufe-1)+')',timer);
    }
    else
    {
    if (ende == 1)
    {
    if (ie) {
    document.all["div"+obj].style.display='none';
    }
    if (DOM) {
    document.getElementById("div"+obj).style.display='none';
    }
    if (ns) {
    document.layers["div"+obj].display='none';
    }
    }
    }
    }
    function startmoove(obj,startx,y,endx,endy,stufe) {

    X=(ns||DOM)?window.innerWidth:window.document.body.clientWidth;

    //rauf
    moove(obj,X*startx/100,y+50,(X*startx/100)-100,endy,stufe/8,0);
    //mitte
    seTimeout('moove('+obj+','+(X*startx/100)-50+','+y+','+(X*endx/100)+50+','+endy+','+6*stufe/8+','+0+')',(stufe/8)+1);
    //runter
    seTimeout('moove('+obj+','+(X*endx/100)+50+','+y+','+X*endx/100+','+endy+50+','+stufe/8+','+1+')',(7*stufe/8)+1);
    }

    //-->
    </script>

    </head>
    <body>




    <script language="javascript" type="text/javascript">
    //stiegenaufgang
    var stiegenrtop = 325;
    var stiegenrleft= 82;
    document.write('<div id="divstiege_rechts" style="position:absolute; z-index:50; top:'+stiegenrtop+'; left:'+stiegenrleft+'%"><img src="http://www.html.de/images/stiegenaufgang.png"></div>');
    document.write('<div id="divstiege_rechts" style="position:absolute; z-index:150; top:'+stiegenrtop+'; left:'+stiegenrleft+'%"><img src="http://www.html.de/images/stiegenaufgang_u.png"></div>');
    for (i=1; i<6 ; i++)
    {
    jetzsprite = Math.floor(Math.random()*personenbilder.length);
    document.write('<div id="div'+i+'" style="position:absolute; z-index:'+100+';"><img src="'+personenbilder[jetzsprite]+'"></div>');
    personengeschwindigkeit = personengeschwindigkeiten[jetzsprite];
    }
    for (i=1; i<6 ; i++)
    {
    setTimeout ('startmoove('+i+',90,300, 10,300,400/'+personengeschwindigkeit[i]+')',i*1000);
    }

    </script>


    </body>
    </html>[/HTML]

    Hier könnt ihr auch noch sehen, wie es ausschaut:
    Link

    Ich weiß der code is schon ziemlich gewachsen, aber ich hoffe ihr könnt noch den Überblick behalten. Ich denke hier liegt der Fehler:

    [HTML]function startmoove(obj,startx,y,endx,endy,stufe) {

    X=(ns||DOM)?window.innerWidth:window.document.body.clientWidth;

    //rauf
    moove(obj,X*startx/100,y+50,(X*startx/100)-100,endy,stufe/8,0);
    //mitte
    seTimeout('moove('+obj+','+(X*startx/100)-50+','+y+','+(X*endx/100)+50+','+endy+','+6*stufe/8+','+0+')',(stufe/8)+1);
    //runter
    seTimeout('moove('+obj+','+(X*endx/100)+50+','+y+','+X*endx/100+','+endy+50+','+stufe/8+','+1+')',(7*stufe/8)+1);
    } [/HTML]

    Ich kann aber leider nicht sagen was genau falsch ist :S

    Bitte um Hilfe, schön langsam verzweifel ich an Javascript

    Lg Johannski
  • Du solltest dich mal mit Dingen wie JQuery oder Mootools beschäftigen.. Sind zwei tolle Javascript-Bibliotheken.
    Vanilla Javascript wird nämlich schnell unübersichtlich und hässlich und hacky...
    JQuery erlaubt viele Effekte und Animationen über CSS Selektoren(in Javascript) aufzurufen und diese Browserunabhängig auszuführen.
    Mootools ist ähnlich, bringt aber zusätzlich objektorientiertes Programmieren ins Javascript.
    Das ist auch was du brauchst, um kompliziertere Anwendungen zu schreiben.
    Zieh dir Mootools rein und verpack deine Funktionalität in Klassen(Mootools Klassen).

    Zudem, wenn du Spiele oder fancy Animationen machen möchtest, rate ich dir, einen Blick auf HTML5 zu werfen, und speziell für Spiele auf den Canvas Tag, mit dem du ziemlich easy 2d-Sachen zeichnen kannst.

    edit: ausserdem natürlich die javascript debugger von firebug und von chrome debugger verwenden.. ;)
    "das war meine letzte flamewar PM an dich ."

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von blubberblub ()

  • Danke, Jquery schaut interessant aus. Ich werd mich mal ein bisschen damit spielen und die Lösung posten wenn ichs geschafft hab :)

    €dit: Oh mir fällt gerade auf dass ich hier nie wieder was gesagt hab.
    Danke Blubberblub, bin jetz auf JQuery umgestiegen und das schaut dann so aus:
    (beispiel Vogel)

    Body

    Quellcode

    1. for (i=1; i<=5; i++)
    2. {
    3. document.write('<div class="voegel" id="vogel'+i+'"><img src="'+pfad+'/layout/vogel.gif"></div>');
    4. vogelani(i);
    5. }



    Head

    Quellcode

    1. function vogelani(zahl) {
    2. var obj = $("#vogel"+zahl);
    3. ry = Math.random()*300+200;
    4. ry1 = Math.random()*300+50;
    5. obj.css({'left' : (screenxx+50), 'top' : ry, "display" : "inline"}).animate({"left" : (-400), "top" : ry1},7000*(0.8 + Math.random())*1000/screenxx,"linear").delay(800+Math.random()*2000).hide(100,function(){vogelani(zahl)});
    6. }


    Css

    Quellcode

    1. .voegel
    2. {
    3. position:absolute;
    4. z-index:3;
    5. }


    Großartig!

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von JOhannski ()