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
- JavaScript实现两个小球碰撞简单模型【未完】
- javaScript实现小球碰撞
- HTML5+Javascript 小球碰撞
- javascript 小球碰撞
- 两个小球碰撞速度计算方法
- 实现小球随机碰撞,最好分析
- 第七讲:HTML5中的canvas两个小球完全弹性碰撞
- 37-JavaScript-DOM-小游戏-小球碰撞后折返
- js实现简单的小球与边框碰撞反弹改变运动方向及颜色,并且继续运动的特效
- JS原生实现多个小球碰撞反弹
- 碰撞的小球
- JBox2D学习 - 小球碰撞
- HTML5小球物理碰撞
- java小球弹性碰撞
- flash小球碰撞
- Java版小球碰撞
- Java版小球碰撞
- 碰撞的小球 HTML5
- 枚举
- 使用rails生成excel(CSV)表格
- ECMAScript数据类型关系总结
- 解析js中的call、apply、bind
- 欢迎使用CSDN-markdown编辑器
- JavaScript实现两个小球碰撞简单模型【未完】
- HashMap,LinkedHashMap,TreeMap对比
- JavaScript 面向对象(封装、继承、多态)多种方式实现完全总结
- set命令
- HDU 2015 偶数求和
- 从setTimeout分析浏览器线程
- windows下匿名管道
- POJ 3061 · Subsequence【子序列】【尺取法】
- caller和callee的区别