canvas 小球碰撞

试着用面向对象的方式用canvas去实现一些东西，

主要代码

function Bubble() {}; //构造函数Bubble.prototype = {init: function () { //基本配置this.x = random(0, w); //小球x轴初始位置this.y = random(0, h); //小球y轴初始位置this.r = random(20, 100); //小球的半径范围this.color = 'rgba(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ',' + random(0.1, 1) +')';this.vx = random(-1, 1);this.vy = random(-1, 1);this.isMove = false},draw: function () { //绘制小球canCon.beginPath(); //把笔抬起来,beginPath() 方法开始一条路径，或重置当前的路径。canCon.fillStyle = this.color;canCon.arc(this.x, this.y, this.r, 0, Math.PI * 2); //圆心的位置,xy,半径,画圆canCon.fill();},move: function () {if(this.isMove) {this.isMove = falsereturn;}this.x += this.vx;this.y += this.vy;// 检测小球与小球碰撞var isCollision = collision(this);if (!isCollision) {}//检测小球与边框碰撞if (this.x - this.r < 0 || this.x + this.r > w) {this.vx = -this.vx}if (this.y - this.r < 0 || this.y + this.r > h) {this.vy = -this.vy}this.draw();}}function collision (c_ball) {var find = falsevar isCollision = falsefor (var ball of aBubble) {if(ball != c_ball) {var dxv = c_ball.x + c_ball.vx - (ball.x + ball.vx);var dyv = c_ball.y + c_ball.vy - (ball.y + ball.vy);var distance = Math.sqrt(dxv * dxv + dyv * dyv);if (distance <= (c_ball.r + ball.r)) {var dvx = c_ball.vx - ball.vx;var dvy = c_ball.vy - ball.vy;var dx = c_ball.x - ball.x;var dy = c_ball.y - ball.y;var xx_yy = dx * dx + dy * dy;var v_dvx = (dvx * dx * dx + dvy * dx * dy) / xx_yy;var v_dvy = (dvy * dy * dy + dvx * dx * dy) / xx_yy;c_ball.vx = checkSpeed(c_ball.vx - v_dvx);c_ball.vy = checkSpeed(c_ball.vy - v_dvy);ball.vx = checkSpeed(ball.vx + v_dvx);ball.vy = checkSpeed(ball.vy + v_dvy);if (find) {//避免当前循环重复移动ball.isMove = true//避免闪烁ball.draw();}isCollision = true}} else {find = true}}return isCollision;}

源码在这里

https://download.csdn.net/download/shishuwei111/11244810

canvas 小球碰撞相关推荐

Canvas+Js制作动量守恒的小球碰撞
目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...
绘制canvas彩色泡泡小球碰撞
globalCompositeOperation带来的不一样的烟花一.知识点 1.动画: setInterval( function(){ d ...
canvas小球连线碰撞效果 html+css+js
先看效果(完整代码在底部): canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎实现(看注释,可一步一步跟着实现): 0:定义标签: <h1>北极光之 ...
pygame动画演示小球碰撞
使用pygame实现动量定理的小球碰撞演示动画动量定理我们在高中的时候就已经接触过了,是十分重要的物理定理.其中的完全弹性碰撞(机械能守恒)是十分典型的例子,机械能守恒和动量定理两个公式就可以推出小 ...
一个与小球碰撞有关的有趣问题
-一个与小球碰撞有关的问题 -本人学号:16340300 -本人学院:数据科学与计算机学院目录看看这个问题如何解决解法看看这个问题如图,在光滑水平面上,有一个球A向墙运动,速度垂直于墙面, ...
Java反弹球两球相撞_java实现小球碰撞反弹
java实现小球碰撞反弹 java实现小球碰撞反弹首先我们要在一个窗口里面显示这个功能,因此引入JFrame类然后创建一个窗口代码如下: JFrame win=new JFrame();//新建窗口 ...
JS实现小球碰撞边界反弹-点击消失（详细解析实现思路）
本篇文章给大家带来的是原生JS实现小球碰到边界就反弹,点击小球时小球被会销毁,并重新创建一个小球,让小球的数量一直保持在初始的数量,按照思路按步骤进行讲解,只需要源码的小伙伴可以定位到文本末尾直接复制 ...
js 小球碰壁反弹and小球碰撞
好像好几天没有更博了呢,最近有点变懒了,这样不好,不好~~我们要做热爱学习的好孩子,嘻嘻,今天下午补上... 我们在学习js的时候,一个很经典的案例就是小球的碰壁反弹效果啦~简单的小球碰壁效果可以慢慢 ...
js小球碰撞js特效
下载地址小球碰撞特效.引用test.js文件.我目前做的是10个小球同时出现,你也可以根据你的需要进行修改.如果你想要小球随机出现的话,你只需要把58行的代码解注,然后57行的注释就行了.这个写法还 ...
Simscape基础教程之实例（一）——使用Simscape三维物理仿真自由落体小球碰撞平面
一. 简介本实例使用MATLAB/Simulink里面的simscape,实现自由落体小球碰撞平面的三维物理仿真,可用于新手入门simscape的参考示例. 二. 准备工作需要安装的工具箱 (1) ...

canvas 小球碰撞

canvas 小球碰撞相关推荐

最新文章

热门文章