js小球碰撞模拟小球落下

最新推荐文章于 2024-06-23 22:51:38 发布

刘德志doubleKill

最新推荐文章于 2024-06-23 22:51:38 发布

阅读量1.4k

点赞数

分类专栏：老文章文章标签： div function javascript microsoft button fun

本文链接：https://blog.csdn.net/liu904139492/article/details/7450297

版权

老文章专栏收录该内容

53 篇文章 0 订阅

订阅专栏

//模拟小球碰撞

<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" οnclick="fun()">
<input type="button" value="stop" οnclick="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">

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