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