js小球碰撞模拟小球落下
2012-04-11 16:44
405 查看
//模拟小球碰撞
<html>
<head>
<title>move</title>
<script>
var left = false,top=true;
var x=0,y=0;
var xx=0,yy=0;
function fun(){
x=parseInt(document.getElementById("div1").style.left);
y=parseInt(document.getElementById("div1").style.top);
xx=parseInt(document.getElementById("div2").style.left);
yy=parseInt(document.getElementById("div2").style.top);
if(left){
xx=xx+2;
}
if(top){
y=y+2;
}
var p=(xx-x)*(xx-x)+(yy-y)*(yy-y);
var hypot=Math.sqrt(p);
if(hypot<=50){
left=true;
top=false;
}
if(yy>1000){
ss();
}
document.getElementById("div1").style.left=x;
document.getElementById("div1").style.top=y;
document.getElementById("div2").style.left=xx;
document.getElementById("div2").style.top=yy;
temp=setTimeout(function() {fun();}, 30);
}
function ss(){
clearTimeout(temp);
}
</script>
</head>
<body>
<input type="button" value="start" onclick="fun()">
<input type="button" value="stop" onclick="ss()">
<div style = "height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;" id="div1">
<img src="Mars.jpg" style="height: 50px; width: 50px;">
</div>
<div style = "height: 50px; width: 50px; position: absolute; top: 700px; left: 86px;" id="div2">
<img src="earth.jpg" style="height: 50px; width: 50px;">
</div>
</body>
</html>
//模拟小球落下
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
function BrowserCheck() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
else this.b = b;
this.v = parseInt(navigator.appVersion);
this.NS = (this.b == "NS" && this.v>=4);
this.NS4 = (this.b == "NS" && this.v == 4);
this.NS5 = (this.b == "NS" && this.v == 5);
this.IE = (this.b == "IE" && this.v>=4);
this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
if (this.IE5 || this.NS5) this.VER5 = true;
if (this.IE4 || this.NS4) this.VER4 = true;
this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
this.min = (this.NS||this.IE);
}
is = new BrowserCheck();
// End -->
</script>
</HEAD>
<BODY>
<center>
<br>
<div id="staticBall" style="position:relative;visibility:visible">
<img src="ball.gif" height=30 width=30 alt="Static ball">
</div>
</center>
<div id="ball" style="visibility:hidden; position:absolute; left:100; top:10; height:34; width:34">
<img src="ball.gif" alt="Bouncing ball">
</div>
<script language="Javascript1.2">
<!-- Begin
iter = 0;
setId = 0;
down = true;
up = false;
bouncingBall = (is.VER5) ? document.getElementById("ball").style
: (is.NS) ? document.layers["ball"]
: document.all["ball"].style;
stillBall = (is.VER5) ? document.getElementById("staticBall").style
: (is.NS) ? document.layers["staticBall"] : document.all["staticBall"].style;
winH = (is.NS) ? window.innerHeight - 55 : document.body.offsetHeight - 55;
document.onmouseup = buttonUp;
if (is.NS4)
document.captureEvents(Event.MOUSEUP);
function buttonUp(e) {
if ( ((is.NS) ? e.which : event.button) != 1) return true;
if (setId != 0) clearInterval(setId);
bouncingBall.visibility="visible";
stillBall.visibility="hidden";
bouncingBall.left = (is.NS) ? e.pageX - 15 : event.offsetX - 15;
bouncingBall.top = (is.NS) ? e.pageY - 15 : event.offsetY - 15;
iter = 0;
setId = setInterval("generateGravity()", 20);
return true;
}
function generateGravity() {
if ((parseInt(bouncingBall.top)+iter < winH) && down) {
bouncingBall.top = parseInt(bouncingBall.top) + iter;
iter++;
return;
}
else {
if ((parseInt(bouncingBall.top)< winH) && down) {
bouncingBall.top = winH + 5;
return;
}
down = false;
up = true;
if (iter < 0 && parseInt(bouncingBall.top) > winH) {
clearInterval(setId);
bouncingBall.visibility = "hidden";
stillBall.visibility="visible";
setId = 0;
}
if (parseInt(bouncingBall.top) > 0 && up && iter >= 0) {
bouncingBall.top = parseInt(bouncingBall.top) - iter;
iter--;
if (iter%3 == 0) iter--;
return;
}
down = true;
up = false;
}
}
// End -->
</script>
<html>
<head>
<title>move</title>
<script>
var left = false,top=true;
var x=0,y=0;
var xx=0,yy=0;
function fun(){
x=parseInt(document.getElementById("div1").style.left);
y=parseInt(document.getElementById("div1").style.top);
xx=parseInt(document.getElementById("div2").style.left);
yy=parseInt(document.getElementById("div2").style.top);
if(left){
xx=xx+2;
}
if(top){
y=y+2;
}
var p=(xx-x)*(xx-x)+(yy-y)*(yy-y);
var hypot=Math.sqrt(p);
if(hypot<=50){
left=true;
top=false;
}
if(yy>1000){
ss();
}
document.getElementById("div1").style.left=x;
document.getElementById("div1").style.top=y;
document.getElementById("div2").style.left=xx;
document.getElementById("div2").style.top=yy;
temp=setTimeout(function() {fun();}, 30);
}
function ss(){
clearTimeout(temp);
}
</script>
</head>
<body>
<input type="button" value="start" onclick="fun()">
<input type="button" value="stop" onclick="ss()">
<div style = "height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;" id="div1">
<img src="Mars.jpg" style="height: 50px; width: 50px;">
</div>
<div style = "height: 50px; width: 50px; position: absolute; top: 700px; left: 86px;" id="div2">
<img src="earth.jpg" style="height: 50px; width: 50px;">
</div>
</body>
</html>
//模拟小球落下
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
function BrowserCheck() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
else this.b = b;
this.v = parseInt(navigator.appVersion);
this.NS = (this.b == "NS" && this.v>=4);
this.NS4 = (this.b == "NS" && this.v == 4);
this.NS5 = (this.b == "NS" && this.v == 5);
this.IE = (this.b == "IE" && this.v>=4);
this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
if (this.IE5 || this.NS5) this.VER5 = true;
if (this.IE4 || this.NS4) this.VER4 = true;
this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
this.min = (this.NS||this.IE);
}
is = new BrowserCheck();
// End -->
</script>
</HEAD>
<BODY>
<center>
<br>
<div id="staticBall" style="position:relative;visibility:visible">
<img src="ball.gif" height=30 width=30 alt="Static ball">
</div>
</center>
<div id="ball" style="visibility:hidden; position:absolute; left:100; top:10; height:34; width:34">
<img src="ball.gif" alt="Bouncing ball">
</div>
<script language="Javascript1.2">
<!-- Begin
iter = 0;
setId = 0;
down = true;
up = false;
bouncingBall = (is.VER5) ? document.getElementById("ball").style
: (is.NS) ? document.layers["ball"]
: document.all["ball"].style;
stillBall = (is.VER5) ? document.getElementById("staticBall").style
: (is.NS) ? document.layers["staticBall"] : document.all["staticBall"].style;
winH = (is.NS) ? window.innerHeight - 55 : document.body.offsetHeight - 55;
document.onmouseup = buttonUp;
if (is.NS4)
document.captureEvents(Event.MOUSEUP);
function buttonUp(e) {
if ( ((is.NS) ? e.which : event.button) != 1) return true;
if (setId != 0) clearInterval(setId);
bouncingBall.visibility="visible";
stillBall.visibility="hidden";
bouncingBall.left = (is.NS) ? e.pageX - 15 : event.offsetX - 15;
bouncingBall.top = (is.NS) ? e.pageY - 15 : event.offsetY - 15;
iter = 0;
setId = setInterval("generateGravity()", 20);
return true;
}
function generateGravity() {
if ((parseInt(bouncingBall.top)+iter < winH) && down) {
bouncingBall.top = parseInt(bouncingBall.top) + iter;
iter++;
return;
}
else {
if ((parseInt(bouncingBall.top)< winH) && down) {
bouncingBall.top = winH + 5;
return;
}
down = false;
up = true;
if (iter < 0 && parseInt(bouncingBall.top) > winH) {
clearInterval(setId);
bouncingBall.visibility = "hidden";
stillBall.visibility="visible";
setId = 0;
}
if (parseInt(bouncingBall.top) > 0 && up && iter >= 0) {
bouncingBall.top = parseInt(bouncingBall.top) - iter;
iter--;
if (iter%3 == 0) iter--;
return;
}
down = true;
up = false;
}
}
// End -->
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js小球碰撞反弹
- .NET GDI 模拟小球弹性碰撞(质点，动能守恒)
- JS原生实现多个小球碰撞反弹
- JS实现小球的弹性碰撞效果
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
- JavaScript模拟小球落下
- 使用cocos2d-js-3.0RC1中的物理引擎chipmunk模拟的“别碰钉子”源码分享（含碰撞检测）
- 使用cocos2d-js-3.0RC1中的物理引擎chipmunk模拟的“别碰钉子”源码分享（含碰撞检测）
- js实现小球碰撞（数学之美）
- js 小球碰壁反弹and小球碰撞
- C#模拟小球碰撞（图形界面）
- 原生JS实现多个小球碰撞反弹效果示例
- js模拟多线程
- 记一次 JS 模拟 CSS active 效果的过程
- JS-碰撞检测
- js 模拟面向对象的方式
- EasyX—模拟小球自由落体
- js+div模拟下拉列表框
- 破解 js 防 ifram 嵌入方法（绕开防嵌js 实现跨域模拟登入）
- 利用JavaScript模拟给四个小球上色