uniapp中用canvas实现小球碰撞的小动画
uniapp 我就不想喷了,踩了很多坑,把代码贡献出来让大家少踩些坑。
实现的功能:
- 生成n个球在canvas中运动,相互碰撞后会反弹,反弹后的速度计算我研究过了,可以参考代码直接用
- 防止球出边框
- 防止小球之间碰撞过度,或者说“穿模”。采用的方法是碰撞后让两个小球都多走一帧。其实这样并不能完全防止“穿模”,但可以防止小球粘在一起不停的穿模
- uniapp中的requestAnimationFrame的使用,包括开始与停止动画
- 利用四叉树优化了碰撞检测,网上有些示例是直接让区域内所有的小球之间进行一次碰撞检测
代码是vue3写的。uniapp官方说做动画推荐用什么renderjs,不知道直接这样写还会有什么坑,目前在h5中测试没问题。
四叉树类的代码见我上一篇文章
ball类的代码:
export class Ball {
// 提供圆心坐标和半径
constructor(x, y, r, speedX, speedY, color, index) {
this.centerX = x
this.centerY = y
this.r = r this.x = x - r
this.y = y - r
this.width = 2 * r
this.height = 2 * r this.color = color this.speedX = speedX
this.speedY = speedY this.index = index // 索引
}
// 将球填充到canvas context
fillTo(ctx) {
ctx.beginPath()
ctx.arc(this.centerX, this.centerY, this.r, 0, 2 * Math.PI)
ctx.setFillStyle(this.color)
ctx.closePath()
ctx.fill()
} // 判断是否与另一个球相交
intersectAt(ball2) {
let dx = this.centerX - ball2.centerX
let dy = this.centerY - ball2.centerY
let distance = Math.sqrt(dx * dx + dy * dy)
return this.r + ball2.r >= distance
} // 移动 width height 是canvas的宽高
move(width, height) { this.centerX += this.speedX
if (this.centerX - this.r <= 0) {
this.centerX = this.r
this.speedX = -this.speedX
}
if (this.r + this.centerX >= width) {
this.centerX = width - this.r
this.speedX = -this.speedX
} this.centerY += this.speedY if (this.centerY - this.r <= 0) {
this.centerY = this.r
this.speedY = -this.speedY
} if (this.centerY + this.r >= height) {
this.centerY = height - this.r
this.speedY = -this.speedY
} this.x = this.centerX - this.r
this.y = this.centerY - this.r
} }
page的代码:
<template>
<view>
<view>
<button @click="animateStart">开始</button>
<button @click="animateStop">停止</button>
</view>
<canvas type="2d" :style="{'width':canvasSize+'px','height':canvasSize+'px','border':'1px solid black'}"
canvas-id="game" id="game"></canvas>
</view>
</template> <script setup>
import {
ref,
onMounted
} from 'vue' import {
onReady
} from '@dcloudio/uni-app' import {
Ball
} from '@/utils/Ball.js' import {
QuadTree
} from '@/utils/QuadTree.js' console.log(uni.getSystemInfoSync().screenWidth)
console.log(uni.getSystemInfoSync().windowWidth) const canvasSize = ref((uni.getSystemInfoSync().windowWidth < uni.getSystemInfoSync().windowHeight ? uni
.getSystemInfoSync()
.windowWidth : uni.getSystemInfoSync().windowHeight) - 100) const size = canvasSize.value / 32
const ballList = [] for (let i = 0; i < 30; i++) {
let x = Math.random() * canvasSize.value,
y = Math.random() * canvasSize.value,
r = Math.random() * size / 1.5 + 10,
color = randomHexColor()
const ball = new Ball(x, y, r, Math.random() * 7 + 3, Math.random() * 5 + 5, color, i)
ballList.push(ball)
} let ctx = null onReady(() => {
ctx = uni.createCanvasContext('game')
console.log(ballList)
}) let rAF const animateStart = () => {
render(ctx)
rAF = requestAnimationFrame(() => {
animateStart()
})
} const animateStop = () =>{
cancelAnimationFrame(rAF)
} const render = (ctx) => { const quadTree = new QuadTree(0, 0, canvasSize.value, canvasSize.value, 0) for (let i = 0; i < ballList.length; i++) {
quadTree.insert(ballList[i])
} for (let q of quadTree.possibles()) {
// console.log('*', Date.now())
ctx.setFillStyle("rgba(255, 170, 80, 0.2)")
ctx.setStrokeStyle('yellow')
ctx.fillRect(q.x, q.y, q.width, q.height)
ctx.strokeRect(q.x, q.y, q.width, q.height) for (let i = 0; i < q.sprites.length - 1; i++) {
for (let j = i + 1; j < q.sprites.length; j++) {
let a = q.sprites[i]
let b = q.sprites[j]
if (a.intersectAt(b)) { // 假设半径就是重量
let v1, v2, m1 = a.r,
m2 = b.r
// 先算水平速度
v1 = a.speedX
v2 = b.speedX a.speedX = (v1 * (m1 - m2) + 2 * m2 * v2) / (m1 + m2)
b.speedX = (v2 * (m2 - m1) + 2 * m1 * v1) / (m1 + m2)
// 再算垂直速度
v1 = a.speedY
v2 = b.speedY a.speedY = (v1 * (m1 - m2) + 2 * m2 * v2) / (m1 + m2)
b.speedY = (v2 * (m2 - m1) + 2 * m1 * v1) / (m1 + m2) //发生碰撞的小球,防止穿模,多走一步
a.move(canvasSize.value, canvasSize.value)
b.move(canvasSize.value, canvasSize.value) }
}
}
}
ballList.forEach((ball) => {
ball.move(canvasSize.value, canvasSize.value)
ball.fillTo(ctx)
}) ctx.draw() } function randomHexColor() {
//生成ffffff以内16进制数
var hex = Math.floor(Math.random() * 16777216).toString(16);
//while循环判断hex位数,少于6位前面加0凑够6位
while (hex.length < 6) {
hex = '0' + hex;
}
//返回‘#'开头16进制颜色
return '#' + hex;
}
</script> <style> </style>
uniapp中用canvas实现小球碰撞的小动画的更多相关文章
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- Canvas+Js制作动量守恒的小球碰撞
目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...
- canvas 模拟小球上抛运动的物理效果
最近一直想用学的canvas做一个漂亮的小应用,但是,发现事情并不是想的那么简单.比如,游戏的逼真效果,需要自己来coding…… 所以,自己又先做了一个小demo,算是体验一下亲手打造物理引擎的感觉 ...
- 【h5游戏开发】egret引擎p2物理引擎 - 小球碰撞地面搞笑的物理现象
重力的方向和地面的问题 p2中默认的方向是从上到下,如果重力默认是正数的话,物体放到世界中是会从上面往下面飘的 p2中plane地面默认的方向是y轴的方向,而在p2中y轴的方向默认是从上往下 首先来看 ...
- canvas动态小球重叠效果
前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...
- js实现多个小球碰撞
实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...
- js实现小球碰撞游戏
效果图: 效果图消失只是截的gif图的问题 源码: <!DOCTYPE html> <html lang="en"> <head> <m ...
- Canvas 动态小球重叠效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Canvas 图片绕边旋转的小动画
/** * 图片绕边旋转的小动画 */ function initDemo10() { var canvas = document.getElementById("demo10") ...
随机推荐
- 283. Move Zeroes - LeetCode
Question 283. Move Zeroes Solution 题目大意:将0移到最后 思路: 1. 数组复制 2. 不用数组复制 Java实现: 数组复制 public void moveZe ...
- 单例模式与pickle模块
目录 设计模式之单例模式 pickle模块 设计模式之单例模式 设计模式是前辈们发明的经过反复验证用于解决固定问题的固定套路,在IT行业中设计模式总共有23种,可以分为三大类:创建型.结构型.行为型. ...
- 安装Squid到CentOS(YUM)
运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:无 硬件要求:无 安装过程 1.关闭防火墙和SeLinux [root@localhost ~] ...
- jQuery基础入门+购物车案例详解
jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...
- [KDTree]数列
NKOJ传送门 describtion 给你一个序列,每个序列有编号(它本身的位置),标识符,数值. 有4种操作 op=0:l,r,x,y将编号在[l,r]的数值x+y op=1:l,r,x,y将标识 ...
- 搭建自己的个人web项目指南 ---(一)服务器购买与基础配置 | windows连接到自己的云服务器
(一)服务器购买与基础配置 | windows连接到自己的云服务器 一.服务器选购指南 厂商选择 目前市面上提供服务器租用的厂商很多,比较知名的还是阿里云和腾讯云,两家的稳定性都非常不错,小伙伴们可以 ...
- JAVA - 线程同步和线程调度的相关方法
JAVA - 线程同步和线程调度的相关方法 wait():使一个线程处于等待(阻塞)状态,并且释放所持有的对象的锁:wait是Object类的方法,对此对象调用wait方法导致本线程放弃对象锁,进入等 ...
- electron vue
vue create project vue add vue-cli-plugin-electron-builder node_modules\@vue\cli-service\lib\config\ ...
- ExtJS 布局-Fit布局(Fit Layout)
更新记录: 2022年5月31日 第一稿. 1.说明 Fit布局只会显示一个子组件,子项组件的尺寸会拉伸到容器的尺寸.当容器进行调整大小(resized),子组件会自动调整去拉伸到付容器的大小. 注意 ...
- 基于slate构建文档编辑器
基于slate构建文档编辑器 slate.js是一个完全可定制的框架,用于构建富文本编辑器,在这里我们使用slate.js构建专注于文档编辑的富文本编辑器. 描述 Github | Editor DE ...