目的:通过js实现小球碰撞并实现动量守恒

canvas我们就不多说了,有用着呢。

我们可以通过canvas画2D图形(圆、方块、三角形等等)3D图形(球体、正方体等待)。

当然这只是基础的皮毛而已,canvas的强大之处在于可以做游戏,导入模型,粒子效果,实现漫游又或者全景和VR。

这里我们介绍纯js写的2D小球碰撞。(主要是博主的Three.js不咋地)

好吧,老规矩,先上图!

额。。。很尴尬的是博主的截图功底不咋地,没有截下碰撞的瞬间。

话不多说,开始教程。

首先我们需要创建画布给它一个id方便后面监听处理。

<body>
<canvas id="myCanvas"></canvas>
</body>

然后是Js代码

//声明画布大小为屏幕的1/3
var width = window.innerWidth/3;
var height = window.innerHeight/3;
var canvas = document.getElementById("myCanvas");
canvas.width = width;
canvas.height = height;
//创建2d画笔
var ctx = canvas.getContext("2d");
//填充颜色设置为黑色(背景色)
ctx.fillStyle = "#000";
//将整个画布填充
ctx.fillRect(0,0,width,height);

这是Canvas最基本的操作,我们解释一下fillRect(x,y,width,height);这个函数。

x和y填充的起始坐标点,width和height是填充区域的宽和高。

由于我们创建的是带有物理性质的小球,所以我们用一个函数封装创建小球的代码。

以后创建小球直接调用它就行了。

function Ball(x,y,vx,vy,ax,ay,size,rou,color,ctx){
//参数传值
//x,y为坐标点 vx,vy为小球水平和垂直方向上的速度 ax,ay为加速度
//size 为大小 rou为密度 color颜色 ctx画笔
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.rou = rou;
this.size = size;
this.ax = ax;
this.ay = ay;
this.m = Math.PI*this.size*this.size*rou;//求出质量 this.draw = function(ctx){
ctx.fillStyle=color;
//console.log(this.x, this.y,this.size);
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI*2,false);//画圆
ctx.fill();
ctx.closePath();
}
this.draw(ctx);
}

接下来实例化出两个小球。

//碰撞检测 动量守恒
//x,y,vx,vy,ax,ay,size,rou,color,ctx
var balla = new Ball(20,0.5*height,5,-3,0,0,8,1,"#ff0",ctx);
var ballb = new Ball(width-20,0.5*height,-3,5,0,0,13,1,"#0ff",ctx);
var ballc = new Ball(width/2,0.5*height,7,4,0,0,13,1,"#0ff",ctx);

然后我们封装了一个函数来实现小球是实时更新。

function animation(){

        //小球的速度等于速度加上加速度
balla.vx+= balla.ax;
balla.vy+=balla.ay;
//小球的位移等于小球现在的坐标加上速度
balla.x+= balla.vx;
balla.y+=balla.vy; ballb.vx+= ballb.ax;
ballb.vy+=ballb.ay;
ballb.x+= ballb.vx;
ballb.y+=ballb.vy;
//基于距离的碰撞检测
var pointdis=(balla.x-ballb.x)*(balla.x-ballb.x)+(balla.y-ballb.y)*(balla.y-ballb.y);//坐标距离
var pointsize=(balla.size+ballb.size)*(balla.size+ballb.size);//半径距离
if( pointdis <= pointsize)
{
console.log("haha");
//这里是能量守恒公式
var ballavx =((balla.m-ballb.m)*balla.vx+2*ballb.m*ballb.vx)/(balla.m+ballb.m);
var ballavy =((balla.m-ballb.m)*balla.vy+2*ballb.m*ballb.vy)/(balla.m+ballb.m);
var ballbvx=((ballb.m-balla.m)*ballb.vx+2*balla.m*balla.vx)/(balla.m+ballb.m);
var ballbvy=((ballb.m-balla.m)*ballb.vy+2*balla.m*balla.vy)/(balla.m+ballb.m);
balla.vx = ballavx;
balla.vy = ballavy; ballb.vx = ballbvx;
ballb.vy = ballbvy;
//小Bug改进
if(Math.abs(balla.vx-ballb.vx)<0.01&&Math.abs(balla.vy-ballb.vy)<0.01)
{
console.log(balla.vx);
balla.vx=-balla.vx;
balla.vy=-balla.vy;
return;
}
} //判断是否碰撞到画布的边缘
if(balla.x+balla.size>=width||balla.x-balla.size<=0)
{
balla.vx*=-0.98;
}
if(balla.y+balla.size>=height||balla.y-balla.size<=0)
{
balla.vy*=-0.98;
} if(ballb.x+ballb.size>=width||ballb.x-ballb.size<=0)
{
ballb.vx*=-0.98;
}
if(ballb.y+ballb.size>=height||ballb.y-ballb.size<=0)
{
ballb.vy*=-0.98;
} //清空画布,画出小球
ctx.fillStyle = "#000";
ctx.fillRect(0,0,width,height);
balla.draw(ctx);
ballb.draw(ctx);
//console.log(ballb.vy); }

最后我们让他30毫秒更新一次。

    setInterval(animation,30);

OK,又大功告成了。自己动手试试吧!

懒人福利!!!

完整代码。

<html>
<head>
<style>
body{margin:0;}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
<script>
//声明画布大小为屏幕的1/3
var width = window.innerWidth/3;
var height = window.innerHeight/3;
var canvas = document.getElementById("myCanvas");
canvas.width = width;
canvas.height = height;
//创建2d画笔
var ctx = canvas.getContext("2d");
//填充颜色设置为黑色(背景色)
ctx.fillStyle = "#000";
//将整个画布填充
ctx.fillRect(0,0,width,height); //碰撞检测 动量守恒
//x,y,vx,vy,ax,ay,size,rou,color,ctx
var balla = new Ball(20,0.5*height,5,-3,0,0,8,1,"#ff0",ctx);
var ballb = new Ball(width-20,0.5*height,-3,5,0,0,13,1,"#0ff",ctx);
var ballc = new Ball(width/2,0.5*height,7,4,0,0,13,1,"#0ff",ctx); setInterval(animation,30);
function animation(){ //小球的速度等于速度加上加速度
balla.vx+= balla.ax;
balla.vy+=balla.ay;
//小球的位移等于小球现在的坐标加上速度
balla.x+= balla.vx;
balla.y+=balla.vy; ballb.vx+= ballb.ax;
ballb.vy+=ballb.ay;
ballb.x+= ballb.vx;
ballb.y+=ballb.vy;
//基于距离的碰撞检测
var pointdis=(balla.x-ballb.x)*(balla.x-ballb.x)+(balla.y-ballb.y)*(balla.y-ballb.y);//坐标距离
var pointsize=(balla.size+ballb.size)*(balla.size+ballb.size);//半径距离
if( pointdis <= pointsize)
{
console.log("haha");
//这里是能量守恒公式
var ballavx =((balla.m-ballb.m)*balla.vx+2*ballb.m*ballb.vx)/(balla.m+ballb.m);
var ballavy =((balla.m-ballb.m)*balla.vy+2*ballb.m*ballb.vy)/(balla.m+ballb.m);
var ballbvx=((ballb.m-balla.m)*ballb.vx+2*balla.m*balla.vx)/(balla.m+ballb.m);
var ballbvy=((ballb.m-balla.m)*ballb.vy+2*balla.m*balla.vy)/(balla.m+ballb.m);
balla.vx = ballavx;
balla.vy = ballavy; ballb.vx = ballbvx;
ballb.vy = ballbvy;
//小Bug改进
if(Math.abs(balla.vx-ballb.vx)<0.01&&Math.abs(balla.vy-ballb.vy)<0.01)
{
console.log(balla.vx);
balla.vx=-balla.vx;
balla.vy=-balla.vy;
return;
}
} //判断是否碰撞到画布的边缘
if(balla.x+balla.size>=width||balla.x-balla.size<=0)
{
balla.vx*=-0.98;
}
if(balla.y+balla.size>=height||balla.y-balla.size<=0)
{
balla.vy*=-0.98;
} if(ballb.x+ballb.size>=width||ballb.x-ballb.size<=0)
{
ballb.vx*=-0.98;
}
if(ballb.y+ballb.size>=height||ballb.y-ballb.size<=0)
{
ballb.vy*=-0.98;
} //清空画布,画出小球
ctx.fillStyle = "#000";
ctx.fillRect(0,0,width,height);
balla.draw(ctx);
ballb.draw(ctx);
//console.log(ballb.vy); }
function Ball(x,y,vx,vy,ax,ay,size,rou,color,ctx){
//参数传值
//x,y为坐标点 vx,vy为小球水平和垂直方向上的速度 ax,ay为加速度
//size 为大小 rou为密度 color颜色 ctx画笔
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.rou = rou;
this.size = size;
this.ax = ax;
this.ay = ay;
this.m = Math.PI*this.size*this.size*rou;//求出质量 this.draw = function(ctx){
ctx.fillStyle=color;
//console.log(this.x, this.y,this.size);
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI*2,false);//画圆
ctx.fill();
ctx.closePath();
}
this.draw(ctx);
}
</script>
</html>

欢迎交流学习!!!

不定时随缘更新。

Canvas+Js制作动量守恒的小球碰撞的更多相关文章

  1. js实现多个小球碰撞

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

  2. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  3. 利用canvas制作乱跑的小球

    canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...

  4. 小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏

    五子棋小游戏学习—— 有一个问题是,棋盘线的颜色,在canvas中,明明设置了灰色,但在我的预览中还是黑色的,很重的颜色. 以下是复刻的源码: <!DOCTYPE html> <ht ...

  5. js实现小球碰撞游戏

    效果图:  效果图消失只是截的gif图的问题 源码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. 使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏

    首先,这是一个HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  8. Expression Design与Blend制作滚动的小球动画教程

    原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...

  9. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

随机推荐

  1. MapReduce实例-倒排索引

    环境: Hadoop1.x,CentOS6.5,三台虚拟机搭建的模拟分布式环境 数据:任意数量.格式的文本文件(我用的四个.java代码文件) 方案目标: 根据提供的文本文件,提取出每个单词在哪个文件 ...

  2. 深入理解TCP(二)

    上一篇http://www.cnblogs.com/whc-uestc/p/4715334.html中已经讲到TCP跟踪一个拥塞窗口来(cwnd)提供拥塞控制服务,通过调节cwnd值以控制发送速率.那 ...

  3. Adroid学习系列-入门(1)

    1.  安装 安装Eclipse,安装Adroid插件.安装Adroid SDK. 2.  项目目录说明 2.1.       建立Adroid项目 与一般的Java项目一样 )src文件夹是项目的所 ...

  4. ecshop 首页调用指定类产品

    方法一.已测试成功 1.在/includes/lib_goods.php最底部增加以下代码 function index_get_cat_id_goods_best_list($cat_id = '' ...

  5. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

  6. Java 开源Wiki:XWiki

    XWiki是一个由Java编写的基于LGPL协议发布的开源wiki和应用平台.之前只接触过MediaWiki,但是MediaWiki是用PHP写的,一直想找找看有没有熟悉的JAVA语言的Wiki系统. ...

  7. idea配置git,查看git代码&amp;拉取git项目至本地

    1.点击file,右键选择setting 选择本地git安装路径 Ps:从git上导入一个全新的maven项目 点击clone按钮后,会弹出如下截图弹窗,点击 NO 项目已经拉取到本地,然后点击ope ...

  8. win2008 C盘清理

    需要在Windows Server 2008上安装“桌面体验”才能使用磁盘清理工具,安装“桌面体验的”的具体步骤如下:   1. 打开“服务器管理器”——在“功能摘要”下,单击“添加功能”.   2. ...

  9. POJ2376 Cleaning Shifts

    题意 POJ2376 Cleaning Shifts 0x50「动态规划」例题 http://bailian.openjudge.cn/practice/2376 总时间限制: 1000ms 内存限制 ...

  10. 384. Shuffle an Array(java,数组全排列,然后随机取)

    题目: Shuffle a set of numbers without duplicates. 分析: 对一组不包含重复元素的数组进行随机重排,reset方法返回最原始的数组,shuffle方法随机 ...