It is currently 19. Aug 2019 06:18  


  User Information

Guest Avatar




Facebook, Google Login
Registration

  Hot Links



  Board Categories








Post new topic Reply to topic  [ 1 post ] 
FollowersFollowers: 0
BookmarksBookmarks: 0
Views: 146

 [JAVA] Jumpball 
AuthorMessage
FkP Moderator
User avatar

Joined: 03.2014
Posts: 123
Gender: Male
Highscores: 2
Post [JAVA] Jumpball
Zeigt einen hüpfenden Ball bzw lässt diesen Ball über die Seite hüpfen.

Code:
<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>

_________________
Image
Image
Image


7. Apr 2014 13:43
Profile Visit website
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
© phpBB® Forum Software | designed by Vjacheslav Trushkin for Free Forums 3 & Free Forums/DivisionCore.
phpBB3 free Forum by UserBoard.org | All Rights Reserved.