canvas碰撞检测和面向对象的小球

已于 2022-08-28 12:44:37 修改
阅读量345 收藏 1
点赞数
分类专栏： Canvas 文章标签： canvas
于 2021-06-22 11:00:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/katherin_wanzi/article/details/118101777
版权

1.碰撞检测

代码片段:

<style>
    canvas {
   
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   
    <script>
        var canvas = document.querySelector("#cont");
        //获取画布上下文
        var ctx = canvas.getContext('2d');
        var w = 500,h = 500,x = 100,y = 100,r = 20;
        //水平速度
        var xSpeed = 2;
        //垂直速度
        var ySpeed = 3;
        setInterval(function() {
   
            //清除画布
            ctx.clearRect(0, 0, w, h);
            //在小球碰到边缘时，速度变为反方向
            if (x-r <= 0 || x+r >= w) {
   
                xSpeed = -xSpeed;
            }
            x +&
最低0.47元/天 解锁文章
_enzo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas初学之——小球碰撞动画
Yvonne_Lu7的博客
07-27 1355
小球碰撞动画 对于这个动画，涉及到的很多东西与之前的倒计时效果有很多相似之处，倒计时效果文章如下： https://blog.csdn.net/Yvonne_Lu7/article/details/81231255 而其中的新东西，第一是在canvas画布上添加其他的html元素，第二...
第七讲：HTML5中的canvas两个小球完全弹性碰撞
爱音乐，爱编程。
06-08 5425
小球之间的碰撞(完全弹性碰撞) var canvas = document.getElementById('mc'); var cxt = canvas.getContext('2d'); //设置画布背景颜色 cxt.fillStyle = "#030303"; cxt.fillRect(0, 0, canvas.width, canvas.heig
canvas动画一流动的很多球
TISRNW的博客
11-19 227
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- //画布 --> <canvas id="c" width="500" heig...
canvas绘制碰撞球动画
systempause的博客
03-09 513
碰撞球动画 画一个简单的球 通过选择器获取画布。 var canvas = document.getElementById('canvas');或var canvas = document.querySelector('#canvas') 获取屏幕宽高，设置画布宽高为屏幕宽高，背景色。当浏览器宽高变化时重新给canvas元素设置宽高。 出现问题：1. 页面出现滚动条。 2. 宽高只...
Canvas实现球体碰撞交互效果(一)
weixin_43552879的博客
10-31 552
提到Canvas相信做前端开发的同学都不陌生，它是一个用于绘制图形的容器，我们会在一些特殊场景时需要用到Canvas，比如我们要在页面上显示一个流程图，这个流程图需要根据后端返回的数据动态显示时，就可以使用Canvas进行绘制，它可以实时的根据数据进行计算，再比如，我们要做一个动画效果，特别是需要有交互的动画效果时，我们就可以使用Canvas去实现。
HTML5 Canvas彩色小球碰撞运动特效特效代码
03-20
碰撞检测可能包括中心点间的距离检查，以及小球半径之和是否超过它们当前的相对距离。 在面向对象编程（OOP）的模式下，我们可以创建一个`Ball`类，该类具有`x`、`y`坐标，`radius`半径，`speedX`和`speedY`速度...
HTML5 Canvas彩色小球碰撞运动特效.zip
07-04
面向对象编程（OOP）在这里起到了关键作用，每个小球可以看作是一个对象，具有位置、颜色、速度等属性，以及移动和碰撞检测的方法。小球对象通常包含以下属性： 1. `x` 和 `y`：表示小球的中心点坐标。 2. `radius`...
HTML5+Canvas彩色小球碰撞动画运动特效
06-12
总的来说，"HTML5+Canvas彩色小球碰撞动画运动特效"是一个结合了HTML5 Canvas技术和面向对象编程的实例，展示了如何利用JavaScript和Canvas API创建动态、互动的Web图形。通过学习和理解这个项目，开发者可以深化对...
java小球45°来回弹
11-05
在Java编程语言中，"java小球45°来回弹"是一个常见的计算机图形学和游戏编程练习，它涉及到物体运动的模拟、碰撞检测以及角度计算等知识点。下面将详细讲解这些概念及其应用。 首先，我们需要创建一个表示小球的类...
小球碰撞反弹经典算法
04-24
J2ME中小球碰撞检测之后自动反弹，算法设计非常精巧
Android 小球碰撞检测技术
12-18
Android 小球碰撞检测技术
js html5 canvas制作多个小球碰撞的动画效果
11-07
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
js小球撞击游戏
12-17
通过学习和实践"js小球撞击游戏"，开发者不仅能掌握JavaScript的基本语法和面向对象编程，还能深入理解游戏逻辑和交互设计，提升自己的前端开发能力。同时，这个项目也是对HTML5 Canvas和Web动画的良好实践，有助于...
关于小球碰撞判断的一些问题··在线等
xibiaolan5234的博客
01-18 957
下了一个关于小球碰撞的程序···里面有些代码看得不太明白···求教 void CBall::Step(CRect rect) { int dx,dy; int length=step*m_speed; //球移动速度的计算 dx=(int)(length*sin(m_angle*PI/180)); //球每次移动的位移量 dy=(int)(length*cos(m_angle*
OpenGL实际案例Breakout（六）：碰撞检测
u010607947的博客
08-08 1993
英文原文 当尝试检测碰撞是否在两个对象之间发生的时候，我们通常不使用对象自己的数据除非这个对象很复杂；这反过来让碰撞检测变得复杂。出于这个原因，我们通常练习的时候更多的使用简单的形状（常常有很好的数学上的定义）覆盖在原始对象上方来碰撞检测。然后我们基于这些简单的形状来让我们的代码更简单并且省下很多性能。这样的一些例子是圆形，球星，三角形和方形；这些用起来比有上百个三角形的网格简单。 当他
Canvas绘制小球运动，检测碰撞变色
相濡以沫的博客
11-22 1358
1.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bouncing balls</title> <link rel="stylesheet" href="style.css"> </head><body> <h1>bouncing balls</h1> <canvas></canvas><scr
canvas碰撞检测2
Vivian_shuang的博客
08-09 459
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document.getElem
canvas中的碰撞检测笔记
weixin_34413103的博客
11-11 141
2019独角兽企业重金招聘Python工程师标准>>> ...
canvas实现动态小球碰撞
最新发布
06-07
实现动态小球碰撞需要用到Canvas的2D绘图API，具体步骤如下： 1. 创建Canvas元素和2D绘图上下文 ```html <canvas id="canvas"></canvas> ``` ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ``` 2. 定义小球对象 ```javascript class Ball { constructor(x, y, r, vx, vy, color) { this.x = x; // 圆心x坐标 this.y = y; // 圆心y坐标 this.r = r; // 半径 this.vx = vx; // 水平速度 this.vy = vy; // 垂直速度 this.color = color; // 颜色 } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } } ``` 3. 创建多个小球对象，并绘制到Canvas上 ```javascript const balls = []; // 存储小球对象的数组 const colors = ['#ff0000', '#00ff00', '#0000ff']; // 小球颜色 for (let i = 0; i < 3; i++) { const ball = new Ball( Math.random() * canvas.width, // 随机x坐标 Math.random() * canvas.height, // 随机y坐标 20, // 半径 Math.random() * 4 - 2, // 随机水平速度 Math.random() * 4 - 2, // 随机垂直速度 colors[i] // 随机颜色 ); balls.push(ball); } function drawBalls() { balls.forEach(ball => ball.draw()); } drawBalls(); ``` 4. 实现小球碰撞 ```javascript function updateBalls() { balls.forEach(ball => { ball.x += ball.vx; ball.y += ball.vy; // 碰到边界反弹 if (ball.x < ball.r || ball.x > canvas.width - ball.r) { ball.vx = -ball.vx; } if (ball.y < ball.r || ball.y > canvas.height - ball.r) { ball.vy = -ball.vy; } // 碰撞检测 balls.forEach(otherBall => { if (ball !== otherBall) { const dx = ball.x - otherBall.x; const dy = ball.y - otherBall.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < ball.r + otherBall.r) { // 碰撞 const angle = Math.atan2(dy, dx); const sin = Math.sin(angle); const cos = Math.cos(angle); // 旋转坐标系 const x1 = 0; const y1 = 0; const x2 = dx * cos + dy * sin; const y2 = dy * cos - dx * sin; // 旋转速度向量 const vx1 = ball.vx * cos + ball.vy * sin; const vy1 = ball.vy * cos - ball.vx * sin; const vx2 = otherBall.vx * cos + otherBall.vy * sin; const vy2 = otherBall.vy * cos - otherBall.vx * sin; // 碰撞后的速度向量 const vx1Final = ((ball.r - otherBall.r) * vx1 + 2 * otherBall.r * vx2) / (ball.r + otherBall.r); const vx2Final = ((otherBall.r - ball.r) * vx2 + 2 * ball.r * vx1) / (ball.r + otherBall.r); const vy1Final = vy1; const vy2Final = vy2; // 旋转回原坐标系 const x1Final = x1 * cos - y1 * sin; const y1Final = y1 * cos + x1 * sin; const x2Final = x2 * cos - y2 * sin; const y2Final = y2 * cos + x2 * sin; // 更新位置和速度向量 ball.x = ball.x + (x1Final - x1); ball.y = ball.y + (y1Final - y1); ball.vx = vx1Final * cos - vy1Final * sin; ball.vy = vy1Final * cos + vx1Final * sin; otherBall.x = ball.x + (x2Final - x1); otherBall.y = ball.y + (y2Final - y1); otherBall.vx = vx2Final * cos - vy2Final * sin; otherBall.vy = vy2Final * cos + vx2Final * sin; } } }); }); } ``` 5. 清空Canvas并更新小球位置 ```javascript function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function loop() { clearCanvas(); updateBalls(); drawBalls(); requestAnimationFrame(loop); } loop(); ``` 完整代码如下： ```html <canvas id="canvas"></canvas> ``` ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); class Ball { constructor(x, y, r, vx, vy, color) { this.x = x; // 圆心x坐标 this.y = y; // 圆心y坐标 this.r = r; // 半径 this.vx = vx; // 水平速度 this.vy = vy; // 垂直速度 this.color = color; // 颜色 } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } } const balls = []; // 存储小球对象的数组 const colors = ['#ff0000', '#00ff00', '#0000ff']; // 小球颜色 for (let i = 0; i < 3; i++) { const ball = new Ball( Math.random() * canvas.width, // 随机x坐标 Math.random() * canvas.height, // 随机y坐标 20, // 半径 Math.random() * 4 - 2, // 随机水平速度 Math.random() * 4 - 2, // 随机垂直速度 colors[i] // 随机颜色 ); balls.push(ball); } function drawBalls() { balls.forEach(ball => ball.draw()); } function updateBalls() { balls.forEach(ball => { ball.x += ball.vx; ball.y += ball.vy; // 碰到边界反弹 if (ball.x < ball.r || ball.x > canvas.width - ball.r) { ball.vx = -ball.vx; } if (ball.y < ball.r || ball.y > canvas.height - ball.r) { ball.vy = -ball.vy; } // 碰撞检测 balls.forEach(otherBall => { if (ball !== otherBall) { const dx = ball.x - otherBall.x; const dy = ball.y - otherBall.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < ball.r + otherBall.r) { // 碰撞 const angle = Math.atan2(dy, dx); const sin = Math.sin(angle); const cos = Math.cos(angle); // 旋转坐标系 const x1 = 0; const y1 = 0; const x2 = dx * cos + dy * sin; const y2 = dy * cos - dx * sin; // 旋转速度向量 const vx1 = ball.vx * cos + ball.vy * sin; const vy1 = ball.vy * cos - ball.vx * sin; const vx2 = otherBall.vx * cos + otherBall.vy * sin; const vy2 = otherBall.vy * cos - otherBall.vx * sin; // 碰撞后的速度向量 const vx1Final = ((ball.r - otherBall.r) * vx1 + 2 * otherBall.r * vx2) / (ball.r + otherBall.r); const vx2Final = ((otherBall.r - ball.r) * vx2 + 2 * ball.r * vx1) / (ball.r + otherBall.r); const vy1Final = vy1; const vy2Final = vy2; // 旋转回原坐标系 const x1Final = x1 * cos - y1 * sin; const y1Final = y1 * cos + x1 * sin; const x2Final = x2 * cos - y2 * sin; const y2Final = y2 * cos + x2 * sin; // 更新位置和速度向量 ball.x = ball.x + (x1Final - x1); ball.y = ball.y + (y1Final - y1); ball.vx = vx1Final * cos - vy1Final * sin; ball.vy = vy1Final * cos + vx1Final * sin; otherBall.x = ball.x + (x2Final - x1); otherBall.y = ball.y + (y2Final - y1); otherBall.vx = vx2Final * cos - vy2Final * sin; otherBall.vy = vy2Final * cos + vx2Final * sin; } } }); }); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function loop() { clearCanvas(); updateBalls(); drawBalls(); requestAnimationFrame(loop); } loop(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值