├── 01-运动和三角函数 ├── 任意方向上的加速度.html ├── 单轴加速度.html ├── 单轴运动.html ├── 圆周运动.html ├── 小球的掉落.html ├── 平滑运动.html ├── 椭圆运动.html ├── 箭头旋转运动.html ├── 箭头跟随鼠标运动.html ├── 线性运动.html ├── 脉冲运动.html ├── 角速度.html ├── 速度的分解.html ├── 速度的合成.html └── 重力加速度.html ├── 02-边界和摩擦力 ├── 01-超出边界移除.html ├── 02-超出边界归位.html ├── 03-出现在另外的一侧边界.html ├── 04-反弹回边界.html ├── 05-摩擦力(正确方法).html └── 06-摩擦力(简单方法).html ├── 03-移动物体 ├── 带运动的拖拽.html ├── 投掷物体.html └── 拖拽对象.html ├── 04-缓动和弹动 ├── 两个物体弹动.html ├── 以鼠标为目标点.html ├── 和鼠标交互的缓动.html ├── 多物体弹动.html ├── 弹动的基本原理.html ├── 弹绳效果.html └── 缓动的基本原理.html ├── 05-碰撞检测 ├── 光线投影法.html ├── 圆形碰撞检测.html ├── 多物体碰撞.html ├── 矩形碰撞检测原理.html └── 简易的俄罗斯方块.html ├── 06-高级坐标旋转 ├── 基本坐标旋转.html ├── 斜面反弹.html └── 高级坐标旋转.html ├── 07-撞球物理 ├── 01-单轴碰撞.html ├── 02-二维碰撞.html └── 03-多物体碰撞.html ├── 08-粒子和万有引力 ├── 01-案例基础代码.html ├── 02-万有引力的基本应用.html ├── 03-弹弓效应.html ├── 04-加入碰撞反弹.html └── 05-粒子花园.html ├── 09-3d动画基础 ├── 01-模拟基本的三维环境.html ├── 02-三维环境下的简单动画.html └── 03-3d动画星海.html └── assets ├── components ├── Arrow.js ├── Ball.js ├── Box.js └── Line.js └── script └── utils.js /01-运动和三角函数/任意方向上的加速度.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 55 | 56 | -------------------------------------------------------------------------------- /01-运动和三角函数/单轴加速度.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 47 | 48 | -------------------------------------------------------------------------------- /01-运动和三角函数/单轴运动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 48 | 49 | -------------------------------------------------------------------------------- /01-运动和三角函数/圆周运动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 57 | 58 | -------------------------------------------------------------------------------- /01-运动和三角函数/小球的掉落.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 99 | 100 | -------------------------------------------------------------------------------- /01-运动和三角函数/平滑运动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 53 | 54 | -------------------------------------------------------------------------------- /01-运动和三角函数/椭圆运动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 61 | 62 | -------------------------------------------------------------------------------- /01-运动和三角函数/箭头旋转运动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 47 | 48 | -------------------------------------------------------------------------------- /01-运动和三角函数/箭头跟随鼠标运动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 59 | 60 | -------------------------------------------------------------------------------- /01-运动和三角函数/线性运动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 57 | 58 | -------------------------------------------------------------------------------- /01-运动和三角函数/脉冲运动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 55 | 56 | -------------------------------------------------------------------------------- /01-运动和三角函数/角速度.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 48 | 49 | -------------------------------------------------------------------------------- /01-运动和三角函数/速度的分解.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 52 | 53 | -------------------------------------------------------------------------------- /01-运动和三角函数/速度的合成.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 49 | 50 | -------------------------------------------------------------------------------- /01-运动和三角函数/重力加速度.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 54 | 55 | -------------------------------------------------------------------------------- /02-边界和摩擦力/01-超出边界移除.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 73 | 74 | -------------------------------------------------------------------------------- /02-边界和摩擦力/02-超出边界归位.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 68 | 69 | -------------------------------------------------------------------------------- /02-边界和摩擦力/03-出现在另外的一侧边界.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 88 | 89 | -------------------------------------------------------------------------------- /02-边界和摩擦力/04-反弹回边界.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 76 | 77 | -------------------------------------------------------------------------------- /02-边界和摩擦力/05-摩擦力(正确方法).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 55 | 56 | -------------------------------------------------------------------------------- /02-边界和摩擦力/06-摩擦力(简单方法).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 53 | 54 | -------------------------------------------------------------------------------- /03-移动物体/带运动的拖拽.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 100 | 101 | -------------------------------------------------------------------------------- /03-移动物体/投掷物体.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 112 | 113 | -------------------------------------------------------------------------------- /03-移动物体/拖拽对象.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 66 | 67 | -------------------------------------------------------------------------------- /04-缓动和弹动/两个物体弹动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 113 | 114 | -------------------------------------------------------------------------------- /04-缓动和弹动/以鼠标为目标点.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 57 | 58 | -------------------------------------------------------------------------------- /04-缓动和弹动/和鼠标交互的缓动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 74 | 75 | -------------------------------------------------------------------------------- /04-缓动和弹动/多物体弹动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 111 | 112 | -------------------------------------------------------------------------------- /04-缓动和弹动/弹动的基本原理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 53 | 54 | -------------------------------------------------------------------------------- /04-缓动和弹动/弹绳效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 69 | 70 | -------------------------------------------------------------------------------- /04-缓动和弹动/缓动的基本原理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 57 | 58 | -------------------------------------------------------------------------------- /05-碰撞检测/光线投影法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /05-碰撞检测/圆形碰撞检测.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 79 | 80 | -------------------------------------------------------------------------------- /05-碰撞检测/多物体碰撞.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 115 | 116 | -------------------------------------------------------------------------------- /05-碰撞检测/矩形碰撞检测原理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 86 | 87 | -------------------------------------------------------------------------------- /05-碰撞检测/简易的俄罗斯方块.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 82 | 83 | -------------------------------------------------------------------------------- /06-高级坐标旋转/基本坐标旋转.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 48 | 49 | -------------------------------------------------------------------------------- /06-高级坐标旋转/斜面反弹.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 101 | 102 | -------------------------------------------------------------------------------- /06-高级坐标旋转/高级坐标旋转.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 55 | 56 | -------------------------------------------------------------------------------- /07-撞球物理/01-单轴碰撞.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 84 | 85 | -------------------------------------------------------------------------------- /07-撞球物理/02-二维碰撞.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 114 | 115 | -------------------------------------------------------------------------------- /07-撞球物理/03-多物体碰撞.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 20 | 21 | 22 | 23 | 24 | 25 | 67 | 68 | -------------------------------------------------------------------------------- /08-粒子和万有引力/01-案例基础代码.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 54 | 55 | -------------------------------------------------------------------------------- /08-粒子和万有引力/02-万有引力的基本应用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 77 | 78 | -------------------------------------------------------------------------------- /08-粒子和万有引力/03-弹弓效应.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 80 | 81 | -------------------------------------------------------------------------------- /08-粒子和万有引力/04-加入碰撞反弹.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 82 | 83 | -------------------------------------------------------------------------------- /08-粒子和万有引力/05-粒子花园.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 121 | 122 | -------------------------------------------------------------------------------- /09-3d动画基础/01-模拟基本的三维环境.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | 65 | 66 | -------------------------------------------------------------------------------- /09-3d动画基础/02-三维环境下的简单动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 90 | 91 | -------------------------------------------------------------------------------- /09-3d动画基础/03-3d动画星海.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 107 | 108 | -------------------------------------------------------------------------------- /assets/components/Arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 绘制箭头类 3 | */ 4 | 5 | class Arrow { 6 | constructor(props){ 7 | this.x = 0; 8 | this.y = 0; 9 | this.w = 60; 10 | this.h = 30; 11 | this.rotation = 0; 12 | this.fillStyle = 'rgb(57, 119, 224)'; 13 | this.strokeStyle = 'rgba(0, 0, 0, 0)'; 14 | Object.assign(this, props); 15 | return this; 16 | } 17 | createPath(ctx){ 18 | let {w, h} = this; 19 | ctx.beginPath(); 20 | ctx.moveTo(-w/2, -h/2); 21 | ctx.lineTo(w/10, -h/2); 22 | ctx.lineTo(w/10, -h); 23 | ctx.lineTo(w/2, 0); 24 | ctx.lineTo(w/10, h); 25 | ctx.lineTo(w/10, h/2); 26 | ctx.lineTo(-w/2, h/2); 27 | ctx.closePath(); 28 | return this; 29 | } 30 | render(ctx){ 31 | let {fillStyle, strokeStyle, rotation, x, y} = this; 32 | ctx.save(); 33 | ctx.fillStyle = fillStyle; 34 | ctx.strokeStyle = strokeStyle; 35 | ctx.translate(x, y); 36 | ctx.rotate(rotation); 37 | this.createPath(ctx); 38 | ctx.fill(); 39 | ctx.stroke(); 40 | ctx.restore(); 41 | return this; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /assets/components/Ball.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 小球类 3 | */ 4 | 5 | class Ball { 6 | constructor(props){ 7 | this.x = 0; 8 | this.y = 0; 9 | this.x3d = 0; 10 | this.y3d = 0; 11 | this.z3d = 0; 12 | this.r = 20; 13 | this.vx = 0; 14 | this.vy = 0; 15 | this.vz = 0; 16 | this.scaleX = 1; 17 | this.scaleY = 1; 18 | this.strokeStyle = 'rgba(0, 0, 0, 0)'; 19 | this.fillStyle = 'rgb(57, 119, 224)'; 20 | this.alpha = 1; 21 | Object.assign(this, props); 22 | return this; 23 | } 24 | render(ctx){ 25 | let {x, y, r, scaleX, scaleY, fillStyle, strokeStyle, alpha} = this; 26 | ctx.save(); 27 | ctx.translate(x, y); 28 | ctx.scale(scaleX, scaleY); 29 | ctx.strokeStyle = strokeStyle; 30 | ctx.fillStyle = fillStyle; 31 | ctx.globalAlpha = alpha; 32 | ctx.beginPath(); 33 | ctx.arc(0, 0, r, 0, 2*Math.PI); 34 | ctx.fill(); 35 | ctx.stroke(); 36 | ctx.restore(); 37 | return this; 38 | } 39 | isPoint(pos){ 40 | let {x, y} = pos; 41 | return this.r >= Math.sqrt((x - this.x)**2 + (y - this.y)**2); 42 | } 43 | } -------------------------------------------------------------------------------- /assets/components/Box.js: -------------------------------------------------------------------------------- 1 | 2 | class Box { 3 | constructor(opt){ 4 | this.x = 0; 5 | this.y = 0; 6 | this.w = 100; 7 | this.h = 100; 8 | this.vx = 0; 9 | this.vy = 0; 10 | this.strokeStyle = 'rgba(0, 0, 0, 0)'; 11 | this.fillStyle = 'rgb(57, 119, 224)'; 12 | this.rotation = 0; 13 | this.lineWidth = 0; 14 | Object.assign(this, opt); 15 | return this; 16 | } 17 | render(ctx){ 18 | let {x, y, w, h, lineWidth, strokeStyle, fillStyle, rotation, scale} = this; 19 | ctx.save(); 20 | ctx.translate(x, y); 21 | ctx.rotate(rotation); 22 | ctx.lineWidth = lineWidth; 23 | ctx.strokeStyle = strokeStyle; 24 | ctx.fillStyle = fillStyle; 25 | ctx.beginPath(); 26 | ctx.lineTo(0, 0); 27 | ctx.lineTo(w, 0); 28 | ctx.lineTo(w, h); 29 | ctx.lineTo(0, h); 30 | ctx.closePath(); 31 | ctx.fill(); 32 | ctx.stroke(); 33 | ctx.restore(); 34 | return this; 35 | } 36 | isPoint(mouse){ 37 | let {x, y} = mouse; 38 | return (x >= this.x && x <= this.x + this.w && y >= this.y && y <= this.y + this.h); 39 | } 40 | } -------------------------------------------------------------------------------- /assets/components/Line.js: -------------------------------------------------------------------------------- 1 | 2 | class Line { 3 | constructor(props){ 4 | this.x = 0; 5 | this.y = 0; 6 | this.x1 = 0; 7 | this.y1 = 0; 8 | this.x2 = 0; 9 | this.y2 = 0; 10 | this.rotation = 0; 11 | this.strokeStyle = '#000'; 12 | this.lineWidth = 1; 13 | Object.assign(this, props); 14 | return this; 15 | } 16 | render(ctx){ 17 | let {x, y, x1, y1, x2, y2, rotation, lineWidth, strokeStyle} = this; 18 | ctx.save(); 19 | ctx.translate(x, y); 20 | ctx.rotate(rotation); 21 | ctx.lineWidth = lineWidth; 22 | ctx.strokeStyle = strokeStyle; 23 | ctx.beginPath(); 24 | ctx.moveTo(x1, y1); 25 | ctx.lineTo(x2, y2); 26 | ctx.stroke(); 27 | ctx.restore(); 28 | return this; 29 | } 30 | } -------------------------------------------------------------------------------- /assets/script/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * canvas一些基本的工具函数 3 | */ 4 | 5 | let C = {}; 6 | 7 | // 获取鼠标在元素上的坐标 8 | C.getOffset = function (ele){ 9 | let mouse = {x: 0, y: 0}; 10 | ele.addEventListener('mousemove', function (e){ 11 | let {x, y} = C.eventWrapper(e); 12 | mouse.x = x; 13 | mouse.y = y; 14 | }); 15 | return mouse; 16 | }; 17 | 18 | // 坐标系转换 19 | C.eventWrapper = function (ev){ 20 | let {pageX, pageY, target} = ev; 21 | let {left, top} = target.getBoundingClientRect(); 22 | return {x: pageX - left, y: pageY - top}; 23 | }; 24 | 25 | // 角度转弧度 26 | C.toRad = function (angle){ 27 | return angle * Math.PI / 180 28 | } 29 | 30 | // 弧度转角度 31 | C.toAngle = function (rad){ 32 | return rad * 180 / Math.PI 33 | } 34 | 35 | // 生成随机数 36 | C.rp = function (arr, int){ // C.rp([10, 20], true) 37 | const max = Math.max(...arr); 38 | const min = Math.min(...arr); 39 | const num = Math.random() * (max - min) + min; 40 | return int ? Math.round(num) : num; 41 | }; 42 | 43 | // 生成随机颜色 44 | C.createColor = function (){ 45 | return `rgb(${C.rp([55, 255], true)}, ${C.rp([55, 255], true)}, ${C.rp([55, 255], true)})`; 46 | }; 47 | 48 | // 矩形之间的碰撞检测 49 | C.rectDuang = function (rect1, rect2){ 50 | return (rect1.x + rect1.w >= rect2.x && rect1.x <= rect2.x + rect2.w && rect1.y + rect1.h >= rect2.y && rect1.y <= rect2.y + rect2.h); 51 | }; 52 | 53 | // 求俩点间的距离 54 | C.getDist = function (x1, y1, x2, y2){ 55 | return Math.sqrt((x2 - x1)**2 + (y2 - y1)**2); 56 | }; 57 | 58 | // 对小球进行边界反弹处理 59 | C.checkBallBounce = function (ball, W, H, bounce){ 60 | if(ball.x - ball.r <= 0){ 61 | ball.x = ball.r; 62 | ball.vx *= bounce; 63 | }else if(ball.x + ball.r >= W){ 64 | ball.x = W - ball.r; 65 | ball.vx *= bounce; 66 | } 67 | if(ball.y - ball.r <= 0){ 68 | ball.y = ball.r; 69 | ball.vy *= bounce; 70 | }else if(ball.y + ball.r >= H){ 71 | ball.y = H - ball.r; 72 | ball.vy *= bounce; 73 | } 74 | }; 75 | 76 | 77 | C.checkBallHit = function (b1, b2){ 78 | let dx = b2.x - b1.x; 79 | let dy = b2.y - b1.y; 80 | let dist = Math.sqrt(dx**2 + dy**2); 81 | if(dist < b1.r + b2.r){ 82 | let angle = Math.atan2(dy, dx); 83 | let sin = Math.sin(angle); 84 | let cos = Math.cos(angle); 85 | 86 | // 以b1为参照物，设定b1的中心点为旋转基点 87 | let x1 = 0; 88 | let y1 = 0; 89 | let x2 = dx * cos + dy * sin; 90 | let y2 = dy * cos - dx * sin; 91 | 92 | // 旋转b1和b2的速度 93 | let vx1 = b1.vx * cos + b1.vy * sin; 94 | let vy1 = b1.vy * cos - b1.vx * sin; 95 | let vx2 = b2.vx * cos + b2.vy * sin; 96 | let vy2 = b2.vy * cos - b2.vx * sin; 97 | 98 | // 求出b1和b2碰撞之后的速度 99 | let vx1Final = ((b1.m - b2.m) * vx1 + 2 * b2.m * vx2) / (b1.m + b2.m); 100 | let vx2Final = ((b2.m - b1.m) * vx2 + 2 * b1.m * vx1) / (b1.m + b2.m); 101 | 102 | // 处理两个小球碰撞之后，将它们进行归位 103 | let lep = (b1.r + b2.r) - Math.abs(x2 - x1); 104 | 105 | x1 = x1 + (vx1Final < 0 ? -lep/2 : lep/2); 106 | x2 = x2 + (vx2Final < 0 ? -lep/2 : lep/2); 107 | 108 | b2.x = b1.x + (x2 * cos - y2 * sin); 109 | b2.y = b1.y + (y2 * cos + x2 * sin); 110 | b1.x = b1.x + (x1 * cos - y1 * sin); 111 | b1.y = b1.y + (y1 * cos + x1 * sin); 112 | 113 | b1.vx = vx1Final * cos - vy1 * sin; 114 | b1.vy = vy1 * cos + vx1Final * sin; 115 | b2.vx = vx2Final * cos - vy2 * sin; 116 | b2.vy = vy2 * cos + vx2Final * sin; 117 | } 118 | }; 119 | 120 | --------------------------------------------------------------------------------