html5使用canvas实现小球碰撞反弹实例

最新推荐文章于 2022-10-18 09:40:55 发布
最新推荐文章于 2022-10-18 09:40:55 发布
阅读量6k 收藏 15
点赞数 6
分类专栏： html5 文章标签： html5 canvas 小球碰撞 碰撞反弹 反弹算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsl0530hsl/article/details/78910453
版权

使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bouncing balls</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bouncing balls</h1>
    <canvas></canvas>

    <script src="main.js"></script>
</body>
</html>

style.css

html, body {
   
    margin: 0;
    padding: 0;
}

html {
   
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

body {
   
    overflow: hidden;
    height: inherit;
}

h1 {
   
    font-size: 2rem;
    letter-spacing: -1px;
    position: absolute;
    margin: 0;
    top: -4px;
    right: 5px;
    color: transparent;
    text-shadow: 0 0 4px white;
}

main.js

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var WIDTH = document.documentElement.clientWidth;
var HEIGHT = document.documentElement.clientHeight;

canvas.width = WIDTH;
canvas.height = HEIGHT;

var config =
最低0.47元/天 解锁文章
雾里看花叹朦胧
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
canvas初学之——小球碰撞动画
Yvonne_Lu7的博客
07-27 1360
小球碰撞动画 对于这个动画，涉及到的很多东西与之前的倒计时效果有很多相似之处，倒计时效果文章如下： https://blog.csdn.net/Yvonne_Lu7/article/details/81231255 而其中的新东西，第一是在canvas画布上添加其他的html元素，第二...
原生js实现小球在屏幕上自由移动，当遇到屏幕边缘时反弹
Ai-Fairy的博客
08-11 977
学完dom的距离属性就可以做的案例，滚动小球！小球可以在屏幕上自由移动，当遇到屏幕边缘时反弹。
html5 canvas实现小球随机运动到达边界反弹
Zero_zero1的博客
08-05 471
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport" />
html小球碰撞源代码,JS实现小球的弹性碰撞效果
weixin_28965739的博客
06-07 743
一、HTML代码(body部分)上面body部分这样就算是完成了，下面我们给body中的div做一些小样式。二、CSS小球样式部分/*将body默认的margin和padding部分去掉*/*{margin: 0px;padding: 0px;}/*采用定位的方式，让小球运动起来*/#main{margin: 0px auto;position: relative;}/*小球的样式*/#main ...
【web】小球碰壁反弹动画
博客
10-18 351
位置随机，大小随机，碰壁反弹 1. 横向碰壁反弹 2. 碰壁反弹 3. 多个元素碰壁反弹 随机颜色，速度，大小，位置 4. 各种随机碰壁反弹
第七讲：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
HTML5 Canvas彩色小球碰撞运动特效特效代码
03-20
在这个“HTML5 Canvas彩色小球碰撞运动特效”中，我们看到的是利用Canvas API实现的一个视觉效果，其中包含多个彩色小球在画布上进行碰撞运动。 首先，Canvas API提供了基本的绘图命令，如`fillRect`用于填充矩形，...
js html5 canvas制作多个小球碰撞的动画效果
11-07
这就是一个简单的基于JavaScript和HTML5 Canvas的小球碰撞动画实现。你可以根据自己的需求调整小球数量、速度、颜色等参数，或者添加更复杂的物理模拟，如摩擦力、重力等，以增加动画的真实感和趣味性。这个项目是一...
html5基于canvas实现彩色爆炸的小球动画特效源码.zip
11-04
这个“html5基于canvas实现彩色爆炸的小球动画特效源码.zip”文件提供了一个实例，展示了如何利用HTML5的Canvas API来创建一个彩色小球爆炸的动画效果。 Canvas API是HTML5中一个强大的绘图工具，它允许开发者在...
Canvas彩色弹性碰撞小球动画.zip
11-16
综上所述，"Canvas彩色弹性碰撞小球动画.zip"是一个结合了HTML5 Canvas、JavaScript/jQuery和CSS技术的实例，它展示了如何通过编程实现动态、交互的网页动画效果。这个项目不仅锻炼了开发者对前端技术的运用能力，也...
小球碰撞反弹经典算法
04-24
J2ME中小球碰撞检测之后自动反弹，算法设计非常精巧
html5 乒乓球(碰撞检测)实例二
09-28
在这个实例中，游戏的核心是碰撞检测，确保小球在屏幕内自由移动，并且能够与砖块碰撞反弹。以下是对这个实例的详细解析： 1. **Canvas元素**：HTML5的Canvas提供了一个在网页上绘制图形的画布，通过JavaScript的...
【HTML5游戏】碰撞球游戏
burningdzb的博客
06-13 831
1.对h5自己的理解 ​ html用于将内容表现出来，css用于格式,javascript用于动态表示加各种特性 2.代码 ​ html代码，先用一个div弄一个计分板，style里画了两个方块，一个球，一个背景的格式，然后放在一个新的div里面. ​ 声明是HTML5，规定是utf-8编码，header页眉，footer页脚，JavaScript代码放在所有代码结束之前，防止javascript...
小球碰壁反弹加分_Javascript：Canvas的小球碰壁反弹
weixin_39545329的博客
12-20 257
(萌新)，我今天在网上看了看如何在Canvas画布上做出小球碰壁反弹的效果，然后自己试做一下，感觉良好，不知道还有什么需要改良。首先我的思路是：1.在body创建一个canvas标签，设置宽：500px，高：500px，id：“canvas”2.在script标签获取canvas标签,获取上下文，然后开始画个圆圈(小球)。3.小球运动需要有上下两个方向，定义 x和y ；也需要两个速度, 定义 sp...
canvas画布实现创建20个小球,小球在画布内碰壁反弹
lanseguhui的博客
08-22 1112
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; #cv{
js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动的特效
热门推荐
YaWen的博客
02-27 1万+
js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动特效 思路：首先先实现一个小球的运动和撞边框反弹效果，并且改变其颜色 主要实现方法：1.小球定位，运动靠改变它的position上下左右值；2.获取浏览器的宽高，由此设置小球运动的最大范围，大于等于这个范围的时候就改变运动方向；3.颜色的改变采用rgb方法，rgb的三个数值均用Math.random随机生成；
（一）原生JS实现判断碰撞的方法！
李帅醒的博客
11-20 8800
这次为大家实例讲述了JS实现判断碰撞的方法。碰撞的应用场景非常多比如，放烟花、小球碰壁反弹、像素鸟等，所以我们先要弄清除如何进行碰撞判断，才能进行以后的操作。 HTML页面代码： CSS页面代码： *{ padding: 0px; margin: 0px; } #d1{ width: 100px; height: 100px; backgr
反弹的小球（python）
weiwei1994的专栏
01-10 5173
一个适合Python初学者体验的简单小游戏程序
canvas基础绘制-一个小球的坠落、反弹
weixin_30681121的博客
09-15 177
效果如图： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canva...
用html实现小球与边框碰撞反弹
最新发布
05-31
可以使用HTML5的Canvas和JavaScript实现小球与边框碰撞反弹的效果。以下是一个简单的实现： 首先，在HTML中创建一个Canvas元素和一个JavaScript脚本： ```html <!DOCTYPE html> <html> <head> <title>Bouncing Ball</title> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script src="script.js"></script> </body> </html> ``` 然后，在JavaScript中编写代码，实现小球的绘制、移动和碰撞反弹： ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 小球的初始位置和速度 var x = canvas.width / 2; var y = canvas.height / 2; var dx = 2; var dy = -2; var ballRadius = 10; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function draw() { // 每次移动前清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制小球 drawBall(); // 如果小球碰到边缘，反弹 if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } // 更新小球的位置 x += dx; y += dy; } setInterval(draw, 10); ``` 这段代码中，首先获取Canvas元素和绘图上下文对象。然后定义小球的初始位置和速度，并编写绘制小球和移动小球的函数。在draw函数中，每次先清除画布，然后绘制小球并判断是否碰到边缘，如果碰到边缘则反弹并更新小球的位置。最后使用setInterval函数让draw函数每隔一段时间执行一次，从而实现小球的动画效果。 这样，就可以实现小球与边框的碰撞反弹效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值