canvas检测边界和弹动的实例
如图所示的效果,小球相互碰撞会相互弹开,这时要干的事就只有两件事了,一:用二次循环遍历小球是否互相碰撞,二:碰撞之后会弹向什么地方和弹出多少距离,第一件事我想学过二维数组循环的都没问题,第二件事也只是用上期次弹动讲到的三角函数来判断角度,因为是力是相互的,所以反弹的一方应该是负值,而且因为撞击力会抵消,所以应该在乘以系数之后再乘以0.5这样就是相互弹撞,为了让效果明显,可以让反弹系数变成0.5,这样在弹在墙上就会变缓慢,效果就会变得更好
讲了这么多还是老规矩,代码贴上
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
var Cleft = Ctop = 0;
var Cright = canvas.width;
var Cbottom = canvas.height;
var balles = [];
var spring = 0.03;
var bounce = -0.8;
var friction = 1;
function Ball(x, y, radius, vx, vy, color) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.radius = radius;
this.color = color;
}
var ballA = new Ball(canvas.width / 2, canvas.height / 2, 40)
function animation() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
cxt.beginPath();
cxt.fillStyle = "#fff";
balles.forEach(function(ball, i) {
ball.x += ball.vx;
ball.y += ball.vy;
if(ball.x + ball.radius > Cright || ball.x - ball.radius < Cleft) {
if(ball.x + ball.radius > Cright)
ball.x = Cright - ball.radius;
else
ball.x = Cleft + ball.radius;
ball.vx *= bounce;
}
if(ball.y + ball.radius > Cbottom || ball.y - ball.radius < Ctop) {
if(ball.y + ball.radius > Cbottom)
ball.y = Cbottom - ball.radius;
else
ball.y = Ctop + ball.radius;
ball.vy *= bounce;
}
for(var j=0;j<balles.length;j++){
checkCollision(ball,balles[j]);
}
cxt.beginPath();
cxt.fillStyle = ball.color;
cxt.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, true);
cxt.fill();
cxt.closePath();
})
requestAnimationFrame(animation);
}
function checkCollision(ballA,ballB){
var dx = ballA.x - ballB.x;
var dy = ballA.y - ballB.y;
var dist = Math.sqrt(dx * dx + dy * dy);
var mindist = ballB.radius + ballA.radius;
if(dist < mindist) {
var angle = Math.atan2(dy, dx);
var targetX = ballB.x + Math.cos(angle)*mindist;
var targetY = ballB.y + Math.sin(angle)*mindist;
var vx= (targetX - ballA.x) * spring*0.5;
var vy= (targetY - ballA.y) * spring*0.5;
ballA.vx += vx;
ballA.vy += vy;
ballB.vx += -(vx);
ballB.vy += -(vy);
}
ballA.vx *= friction;
ballA.vy *= friction;
}
window.onload = function() {
for(var i = 0; i < 20; i++) {
var x = tool.random(30, canvas.width - 30);
var y = tool.random(30, canvas.height - 30);
var vx = tool.random(3, 6);
var vy = tool.random(3, 5);
var radius = tool.random(10, 20);
var color = "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16)
balles.push(new Ball(x, y, radius, vx, vy, color));
}
animation();
}
canvas检测边界和弹动的实例的更多相关文章
- canvas弹动
弹动,和缓动类似,不过是在终点前反复运动几次达到反弹的效果,具体的算法就是用目标点(target)和物体(mouse)的距离乘以系数累加至坐标上,这样就会有简单的弹动效果,但是一般的弹动效果都是慢慢变 ...
- canvas弹动效果
弹动效果,用物体与目标的距离乘上系数再累加至速度上,让物体呈加速度运动,再让速度乘与摩擦力系数,让物体最终停止运动 代码如下所示 var canvas = document.getElementByI ...
- Canvas学习笔记——弹动
如果有一根橡皮筋拴住一个小球,将小球拉开一定距离后释放,小球将会弹动.距离越远,橡皮筋对小球施加的外力越大,小球的加速度就越大.也就是说,小球的加速度与距离是成正比例关系的.这和缓动很相似,缓动是速度 ...
- cocos2d-x 3.0 游戏关卡滑动 弹动 不会出现黑边效果
#pragma once #include "cocos2d.h" #include "ShopScene.h" using namespace cocos2d ...
- SkiaSharp 之 WPF 自绘 弹动小球(案例版)
没想到粉丝对界面效果这么喜欢,接下来就尽量多来点特效,当然,特效也算是动画的一部分了.WPF里面已经包含了很多动画特效的功能支持了,但是,还是得自己实现,我这边就来个自绘实现的. 弹动小球 弹动小球是 ...
- SkiaSharp 之 WPF 自绘 五环弹动球(案例版)
此案例基于拖曳和弹动球两个技术功能实现,如有不懂的可以参考之前的相关文章,属于递进式教程. 五环弹动球 好吧,名字是我起的,其实,你可以任意个球进行联动弹动,效果还是很不错的,有很多前端都是基于这个特 ...
- swift皮筋弹动发射飞机
今天在那个ios教程网上看到了一个不错的ios游戏源码,这是一个款采用swift实现的皮筋弹动发射飞机游戏源码,游戏源码比较详细,大家可以研究学习一下吧. <ignore_js_op> & ...
- 一款jQuery实现重力弹动模拟效果特效,弹弹弹,弹走IE6
一款jQuery实现重力弹动模拟效果特效 鼠标经过两块黑色div中间的红色线时,下方的黑快会突然掉落, 并在掉落地上那一刻出现了弹跳的jquery特效效果,非常不错,还兼容所有的浏览器, 适用浏览器: ...
- 移动端touch事件实现页面弹动--小插件
动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...
随机推荐
- Git同步原始仓库到Fork仓库中
前言 本文介绍的是Git同步原始仓库到Fork仓库示例教程,废话不多说,下面直接到实操部分. 这里以aspnetcore-doc-cn的github仓库为例,同步dev分支. 步骤 1.初始化本地仓库 ...
- 带你玩转Visual Studio
带你玩转Visual Studio 带你新建一个工程 工程目录下各文件的含义 解决方案与工程 在这之前先了解一个概念:解决方案与工程. 解决方案(Solution):一个大型项目的整体的工作环境: 工 ...
- springboot 学习资源推荐
springboot 是什么?对于构建生产就绪的Spring应用程序有一个看法. Spring Boot优先于配置的惯例,旨在让您尽快启动和运行.(这是springboot的官方介绍) 我们为什么要学 ...
- SpringAOP与Redis搭建缓存
近期项目查询数据库太慢,持久层也没有开启二级缓存,现希望采用Redis作为缓存.为了不改写原来代码,在此采用AOP+Redis实现. 目前由于项目需要,只需要做查询部分: 数据查询时每次都需要从数据库 ...
- Linux网络查看命令
1.ifconfig 查看当前生效的网卡. 2.ifdown ifup 网卡禁用与启动. 3.netstat -tuln 查看当前tcp/udp通讯端口连接情况. 4.netstat -an 查看当前 ...
- Android Weekly Notes Issue #225
Android Weekly Issue #225 October 2nd, 2016 Android Weekly Issue #225 本期内容包括: Android 7.0的Quick Sett ...
- android 帧动画
首先在res/drawable/name1.xml/定义一组图片集合: <?xml version="1.0" encoding="utf-8"?> ...
- Android XML中引用自定义内部类view的四个why
今天碰到了在XML中应用以内部类形式定义的自定义view,结果遇到了一些坑.虽然通过看了一些前辈写的文章解决了这个问题,但是我看到的几篇都没有完整说清楚why,于是决定做这个总结. 使用自定义内部类v ...
- SQL server学习
慕课网sql server学习 数据库第一印象:desktop--web server--database server** 几大数据库:sql server.oracle database.DB2. ...
- MySQL 数据库通过日志恢复
http://blog.csdn.net/hanxin1987216/article/details/5976856 要想从二进制日志恢复数据,你需要知道当前二进制日志文件的路径和文件名.一般可以从选 ...