Tutorials Infos - Anleitungen - Hilfe - Dreamcodes
 

Jumpball

Zeigt einen hüpfenden Ball

Script:
<head>
      <title>Ballsimulation</title>
      <script language="JavaScript">
<!--

/************Copyright by Jan Hörsch*****************/

var form;

var xvel,yvel;   // Geschwindigkeit in x- und y-Achse
var x,y;   // Koordinaten

var wirkungsgrad = 0.7; // Elastizitaet des Balles
var max_y = 450;   // unterer Rand
var min_x = 18;      // linker Rand
var max_x = 400;   // rechter Rand

var reibung_roll = 0.975 // Reibung beim rollen
var reibung_flug = 0.99  // Reibung beim flug

var running = 0;   // Bei running = 0 wird die Animation angehalten

function starte(){

      // Zuweisung der Variablen aus dem Formular
       xvel = form.xvel.value*1;
         yvel = form.yvel.value*1;
         x =   form.x.value*1;
         y = form.y.value*1;

      // Überprüfen, dass der Ball sich innerhalb der Spielfeldes befindet
      x = (x < min_x ? min_x : (x > max_x ? max_x : x));
      y = (y > max_y ? max_y : y);

      // Start der Animation
      running = 1;
      bewegen();
}

function bewegen(){

       yvel++; // Schwerkraft

       // Ball legt den "Frameweg" zurück
         x += xvel;
         y += yvel;

       // Ball dotzt auf dem Boden auf
        if(y >= max_y){
           yvel = Math.floor(yvel*wirkungsgrad);
           yvel = - yvel;
           y = max_y;
        }

        // Ball dotzt links und rechts weg
        if(x >= max_x) {
           xvel = - xvel;
           x = max_x;
        }
        else if (x <= min_x) {
              xvel = - xvel;
              x = min_x;
           }

        // Ballbewegung
         document.getElementById("ball").style.left = x;
         document.getElementById("ball").style.top = y;

         // Reibung: knapp über dem Boden stärker
         xvel = xvel * (y >= max_y-5 ? reibung_roll : reibung_flug)

         // Abgrenzung, um dem Script die Rechnerrei zu ersparen
         if(xvel > -0.1 && xvel < 0.1){ xvel = 0; }
      
       //
       document.getElementById("geschwindigkeit").innerHTML = Math.round(Math.sqrt(xvel*xvel + yvel*yvel)*100*100)/100 + " px/s";
      
         // Anzeigen Position und Geschwindigkeit des Balls
       form.xvel.value = xvel;
       form.yvel.value = yvel;
       form.x.value = x;
       form.y.value = y;

       // Solang der Ball nicht Bewegungslos am Boden liegt, wird der nächste Bewegungsschritt ausgeführt
       if((yvel != 0 || xvel != 0 || y != max_y) && running){
            window.setTimeout("bewegen()",10);
         }
}

function change(){
    // Prüfung, damit die Werte immer innerhalb des Spielfelds liegen
   if(form.x.value < min_x){
      form.x.value = min_x;
   }
   else if(form.x.value > max_x){
      form.x.value = max_x;
   }
   if(form.y.value > max_y){
      form.y.value = max_y;
   }

   // Zeichnen der neuen Position
    document.getElementById("ball").style.left = form.x.value;
    document.getElementById("ball").style.top  = form.y.value;
}
//-->
     </script>
     <style type="text/css">
<!--
input{
   border:1px solid black;
}
//-->
     </style>
</head>
<body onLoad="form = window.document.formular;" text="#000000" bgcolor="#FFFFFF">
      <form name="formular">
            <div id="ball" style="font-size:80px;position:absolute;top:88px;left:20px;">
                 o
            </div>
            <div style="border:1px solid black;border-top-style:dotted;position:absolute;top:120px;left:20px;width:417px;height:402px;"></div>
            <table border="0">
               <tr>
                  <td id="geschwindigkeit">e</td>
                  <th>x</th>
                  <th>y</th>
               </tr>
               <tr>
                  <th>Koordinaten</th>
                  <td><input type="text" name="x" value="20" onBlur="change()"></td>
                  <td><input type="text" name="y" value="88" onBlur="change()"></td>
               </tr>
               <tr>
                  <th>Geschwindigkeit</th>
                  <td><input type="text" name="xvel" value="10"></td>
                  <td><input type="text" name="yvel" value="0"></td>
               </tr>
               <tr>
                  <td align="right" colspan="3"><input type="button" value="Start" onClick="starte();">
                  <input type="button" value="Stop" onClick="running=0;">
                  <input type="reset" onClick="window.setTimeout('change()',10);"></td>
               </tr>
           </table>
      </form>
</body>
</html>

 
ID: 433
eingestellt am: 24.06.2004
Autor: Jan Hörsch
Status zum lesen: Gast
gelesen: 8853
Webseite: www.dreamcodes.com
[Drucken]