html5碰撞小球模拟
这里根据动量守恒和能量守恒定理来计算小球的位置，从而模拟完全弹性碰撞下的小球运行轨迹。
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碰撞小球模拟的更多相关文章
- html5 滚动小球
<html> <head> <meta charset="utf-8"/> </head> <body onkeydown=& ...
- VUE错误记录 - 小球模拟购物车
<body> <div id="app"> <input type="button" value="Add to Car ...
- (NO.00004)iOS实现打砖块游戏(八):游戏中小球与砖块的碰撞
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 现在回到GameScene.m中,我们所有的碰撞处理就放在该类中 ...
- js实现多个小球碰撞
实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...
- [Canvas]碰撞球 增加小球间碰撞检测
请点此下载代码并用Chrome或是Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8"&g ...
- 基于Seajs的可控台球碰撞游戏
前言 不记得哪个黑色星期五,贪吃鱼基本完工的时候,产品突然增加需求,要求金币扔出去后不消失,互相可碰撞,其最终结果还要由服务器控制(没错,至今做的所有游戏都有幕后黑手,=W=). 对于碰撞以前只写过一 ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- 8款HTML5动画特效推荐源码
1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...
- 10款强大的jQuery/HTML5应用新鲜出炉
1.CSS3/jQuery自定义弹出窗口 多种弹出动画 这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了.弹出窗口中可以自定义html,十分灵活.另外最重要的 ...
随机推荐
- Ubuntu10.10的网络配置
有一阵子着实对Ubuntu的网络配置很迷惑,耐下心来仔细上网找了找,有点小心得,总结一下. 先说下大概的配置过程,再去细究一些情况. 一.配置大概分三类:通过配置文件配置.通过命令配置.通过图形化的网 ...
- 靶形数独 （codevs 1174）题解
[问题描述] 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z 博士请教,Z 博士拿出了他最近发明的“ ...
- STM32F4_USART配置及细节描述
Ⅰ.概述 关于USART串口通信,可以说是MCU的标配.不管是在实际项目应用中,还是在开发过程中,它都起着很重要的作用. 在项目应用中我们常常使用UART串口进行通信,根据通信的距离及稳定性,还选择添 ...
- .Net码农学Android---快速了解数据存储
数据存储 Andoid中的数据存储和我们平时见到的不一样,或者说移动设备的存储和平时不一样.Andoid中的存储方式有五种, 单把存储拎出来,是因为我们后续的开发会经常用到,重要性不言而喻,多样的存储 ...
- chkconfig 命令详解
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法: chkconfig [--a ...
- [原创]PostgreSQL Plus Advanced Server监控工具PEM（四）
四.PEM管理工具 1.编辑配置 选择进行管理的目标服务器,点击菜单Tools->Server Configuration->postgresql.conf管理服务器配置,可以看到我们经常 ...
- Android--获取App应用程序的大小
Android对这种方法进行了封装,我们没有权限去调用这个方法,所以我们只能通过AIDL,然后利用Java的反射机制去调用系统级的方法. 下面上代码:(注释比较详细) /** * 作用:-----获取 ...
- 先登陆面试再者Tabs标签导航，多次网络请求共享cookie，本地存储cookie
1,index.ng.html: <head> <title>ionic todo example</title> </head> <body n ...
- QT 按钮类继承处理带定时器
01.class KeyButton : public QPushButton 02.{ 03. Q_OBJECT 04.public: 05. explicit KeyButto ...
- [LAMP]【转载】——PHP7.0的安装
***原文链接:http://my.oschina.net/sallency/blog/541287 php编译过程报错解决可参考:http://www.cnblogs.com/z-ping/arch ...