JavaScript实现两个小球碰撞简单模型【未完】

来源:互联网 发布:网络拓扑生成器 编辑:程序博客网 时间:2024/06/06 09:42

很简单的给第一个初速度和加速度,小球做减速运动(当加速度为0时是匀速直线运动),碰撞到第二个小球,第二个小球继续做减速运动的模型,比较粗糙,希望能帮助到刚刚学习Js的小孩。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>小球碰撞</title>    </head>    <body>        <div id="blackBall" style="position:absolute;left:20px;top:50px;width:20px;height:20px;border-radius:50%;display:inline;background:black;"></div>        <div id="yellowBall" style="position:absolute;left:500px;top:50px;width:20px;height:20px;border-radius:50%;display:inline;background:yellow;"></div>        水平初速度<input id="xSpeed" type="text" name="xSpeed"/>        加速度<input id="a" type="text" name="a"/>        <button onclick="start()">开始<tton>        <button onclick="stop()">停止<tton>    </body>    <script type="application/javascript">            var xPos,xpos1;//            var timer,timer1;            var xSpeed;//黑球移动速度            var interval=50;//间隔时间            var countNum,countNum1;//计数            var totalTime,totalTime1;//总时间            var a;//加速度            var temp,temp1;            function move(){                var blackBall = document.getElementById("blackBall");                countNum++;                totalTime=countNum*interval;                temp=xPos+(xSpeed*totalTime/50)-0.5*a*totalTime*totalTime/2500;                blackBall.style.left=temp+"px";                if (xSpeed-a*totalTime/50>0&&temp<475)                {timer=window.setTimeout("move()",interval);}                else{                        if(xSpeed-a*totalTime/50>0){                            start1();                        }                }            }            function move1(){                var yellowBall = document.getElementById("yellowBall");                countNum1++;                totalTime1=countNum1*interval;                temp1=xPos1+(xSpeed*totalTime1/50)-0.5*a*totalTime1*totalTime1/2500;                yellowBall.style.left=temp1+"px";                if(xSpeed-a*totalTime1/50>0&&temp1<900)                {timer1=window.setTimeout("move1()",interval);}            }            function start(){                xPos=blackBall.style.left.substring(0,blackBall.style.left.length-2);//取得黑球当前的left值                xPos=Number(xPos);//转为数字                countNum=0;                xSpeed=document.getElementById("xSpeed").value;                xSpeed=Number(xSpeed);                a=document.getElementById("a").value;                a=Number(a);                move();            }            function start1(){                xPos1=yellowBall.style.left.substring(0,yellowBall.style.left.length-2);//取得黄球当前的left值                xPos1=Number(xPos1);//转为数字                countNum1=0;                xSpeed=document.getElementById("xSpeed").value;                xSpeed=Number(xSpeed);                a=document.getElementById("a").value;                a=Number(a);                move1();            }            function stop(){                window.clearTimeout(timer);            }        </script><html>
1 0