这里根据动量守恒和能量守恒定理来计算小球的位置，从而模拟完全弹性碰撞下的小球运行轨迹。

html代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>

     <title>碰撞小球</title>

   </head>

     <body>

         <canvas id='box' width="300" height="300" style="border:2px; background:black;">

      </canvas>

   </body>

 </html>

js代码：

 //get a random color to render the ball

 function getRandomColor(){

   return (function(m,s,c){

     return (c ? arguments.callee(m,s,c-1) : '#') +

       s[m.floor(m.random() * 16)]

   })(Math,'0123456789abcdef',5)

 }

 //get a random number between min and max

 function getRandomNumber(min, max) {

     return min + Math.ceil(Math.random() * (max - min));

 }

 var balls = [];

 var ballCount = 4;

 var boxLen = 300;

 function createBall() {

     var r = getRandomNumber(10,20);

     var ball = {

         m:r,

         r:r,

         x:getRandomNumber(0,boxLen-2*r),

         y:getRandomNumber(0,boxLen-2*r),

         vx:getRandomNumber(1,3),

         vy:getRandomNumber(1,3),

         color:getRandomColor()

     };

     return ball;

 }

 //test collision

 function checkCollision(b1, b2) {

     var dx = b1.x - b2.x;

     var dy = b1.y - b2.y;

     var dist = Math.ceil(Math.sqrt(dx * dx + dy * dy));

     return dist < b1.r + b2.r;

 }

 //initialize the balls

 for(var i = 0; i < ballCount; i++) {

     var collision = false;

     while(true) {

         var b = createBall();

         for(var j = 0; j < i; j++) {

             collision = checkCollision(b,balls[j]);

             if(collision) break;

         }

         if(!collision) {

             balls[i] = b;

             break;

         }

     }

 }

 function calcV(m1, m2, v1, v2) {

     return ((m1 - m2) * v1 + 2 * m2 * v2) / (m1 + m2);

 }

 function draw() {

     //handle collisions

     for(var i = 0; i < balls.length; i++) {

         for(var j = i + 1; j < balls.length; j++) {

             if(checkCollision(balls[i],balls[j])) {

                 var b1 = balls[i], b2 = balls[j];

                 var v1 = { x : b1.vx, y : b1.vy };

                 var v2 = { x : b2.vx, y : b2.vy };

                 b1.vx = calcV(b1.m, b2.m, v1.x, v2.x);

                 b1.vy = calcV(b1.m, b2.m, v1.y, v2.y);

                 b2.vx = calcV(b2.m, b1.m, v2.x, v1.x);

                 b2.vy = calcV(b2.m, b1.m, v2.y, v1.y);

             }

         }

     }

     //move the balls

     for(var i in balls) {

         var b = balls[i];

         b.x += b.vx;

         b.y += b.vy;

         var closeSide = false;

         var maxPos = boxLen - 2 * b.r;

         if(b.x < 0) {

             b.x = 0;

             closeSide = true;

         } else if(b.x > maxPos) {

             b.x = maxPos;

             closeSide = true;

         }

         if(closeSide)

             b.vx = -1 * b.vx;

         closeSide = false;

         if(b.y < 0) {

             b.y = 0;

             closeSide = true;

         } else if(b.y > maxPos) {

             b.y = maxPos;

             closeSide = true;

         }

         if(closeSide)

             b.vy = -1 * b.vy;

     }

     //draw the balls

     var canvas = document.getElementById('box');

     var ctx = canvas.getContext('2d');

     ctx.fillStyle = "#000";

     ctx.fillRect(0,0,canvas.width, canvas.height);

     for(var i in balls) {

         var b = balls[i];

         ctx.beginPath();

         ctx.arc(b.x+b.r, b.y+b.r, b.r, 0, 2 * Math.PI,true);

         ctx.closePath();

         ctx.fillStyle = b.color;

         ctx.fill();

     }

     setTimeout(draw,10);

 }

 draw();

html5碰撞小球模拟的更多相关文章

  1. html5 滚动小球

    <html> <head> <meta charset="utf-8"/> </head> <body onkeydown=& ...

  2. VUE错误记录 - 小球模拟购物车

    <body> <div id="app"> <input type="button" value="Add to Car ...

  3. (NO.00004)iOS实现打砖块游戏(八):游戏中小球与砖块的碰撞

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 现在回到GameScene.m中,我们所有的碰撞处理就放在该类中 ...

  4. js实现多个小球碰撞

    实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...

  5. [Canvas]碰撞球 增加小球间碰撞检测

    请点此下载代码并用Chrome或是Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8"&g ...

  6. 基于Seajs的可控台球碰撞游戏

    前言 不记得哪个黑色星期五,贪吃鱼基本完工的时候,产品突然增加需求,要求金币扔出去后不消失,互相可碰撞,其最终结果还要由服务器控制(没错,至今做的所有游戏都有幕后黑手,=W=). 对于碰撞以前只写过一 ...

  7. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  8. 8款HTML5动画特效推荐源码

    1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...

  9. 10款强大的jQuery/HTML5应用新鲜出炉

    1.CSS3/jQuery自定义弹出窗口 多种弹出动画 这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了.弹出窗口中可以自定义html,十分灵活.另外最重要的 ...

随机推荐

  1. 2013-10-25笔记，css: mini-width, 标准居中，样式中*号使用，背景图像位置定位

    mini-width:设置元素的最小宽度.該屬性值會對元素的寬度設置一個最小限制.因此,元素可以比制定值寬,但不能比制定值窄.不允許指定負值. 完美的居中佈局: body{text-align: ce ...

  2. android中常用菜单（menu）的基本知识

    (一)选项菜单 1.简单的创建菜单: @Override public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMe ...

  3. IE PNG格式的图片不现实的的解决方法

    可能是安装某些软件导致注册表缺失png的一些设置 ,网上找了好些办法都是修改注册表的. 终于找到傻瓜式的解决方法:将下面的代码复制到txt中 另存为reg后缀格式,双击运行即可,然后重新打开IE 完事 ...

  4. 访问svc 文件，编译器错误消息: CS0016，未能写入输出文件

    编译错误              说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码.             编译器错误消息: CS0016: 未 ...

  5. WPF 多项选择下拉菜单

    背景 项目中有一个多项选择筛选的功能, 由于筛选条件太多, 用户又习惯在平板上进行操作, 所以要求我们把checkbox 放到一个combobox里面, 然后checkbox的选项要在combobox ...

  6. EMVTag系列15《选择应用响应数据》

    1. 接触交易选择应用响应数据 标签 长度 数据域 9102 A5 变长 FCI专用模板 强制 50 1–16 应用标签 纯电子现金:PBOC DEBIT 借记卡:PBOC DEBIT 贷记卡:PBO ...

  7. eclipse+cdt+minGW （C/C++ 编译）

    1. 安装Eclipse CDT 方法1: 已安装Eclipse的话,可以通过菜单Help->Install New Software,安装CDT插件. 点击ADD后 Name:CDT    L ...

  8. MVC模式中路由如何生成URL

    路由有必要的参数吗 在MVC设计模式中,一个比较重要的步骤是浏览器发送的请求如何生成相应的URL,交给服务器去实例化相应的控制器类然后调用相应的控制器类的对应方法,返回视图给用户.这个流程细说起来比较 ...

  9. 设置搜狗输入法在任何时候按左右两侧的shift激活

    如上图,搜狗输入法for linux最近与广大用户见面了,现在的版本是1.0.0.0014,本人系统是ubuntu 14.04非麒麟版本 使用过程中有个习惯就是在任何窗口内只要按任意一侧的shift就 ...

  10. U盘安装 Windows XP 原版 ISO 的几点心得

    虽然我一直致力于推动最新操作系统的部署,劝说周围朋友尽快淘汰 Windows XP,但还是难免有一些老电脑.老朋友的电脑,坚持要使用 XP 系统. 这里有几点使用U盘安装 Windows XP 原版 ...