js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动的特效
2024-04-24 01:05:50
js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动的特效
（代码可以直接复制使用，只需要把body中的div的id换成对应的就行，css中可以设置小球的大小和初始位置，修改小球大小之后需要在js里把现在的80改成小球的大小值）
最终实现效果图：
思路：首先先实现一个小球的运动和撞边框反弹效果，并且改变其颜色，效果如下图：
主要实现方法：
1.小球定位，运动靠改变它的position上下左右值；
2.获取浏览器的宽高，由此设置小球运动的最大范围，大于等于这个范围的时候就改变运动方向；
3.颜色的改变采用rgb方法，rgb的三个数值均用Math.random随机生成；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>运动的小球</title><style><!--单个小球的样式-->.ball{width:80px;height:80px;background: red;border-radius: 50%;position:absolute;top:0;left:0;}</style>
</head>
<body><div class="ball"></div> <!--单个小球的div--><script>var oBall = document.querySelector('.ball'),leftNum = 5; //设置小球每次向左运动的像素值topNum = 5; //设置小球每次向下运动的像素值leftMax = document.documentElement.clientWidth-oBall.clientWidth; //浏览器窗口宽度减去小球的宽度等于小球能运动到的最大左边位置，下一行代码同理。topMax = document.documentElement.clientHeight-oBall.clientHeight;window.onresize = function(){ //当浏览器窗口发生变化时，实时获取浏览器窗口的宽高leftMax = document.documentElement.clientWidth-oBall.clientWidth;topMax = document.documentElement.clientHeight-oBall.clientHeight;}setInterval(function(){ //为小球的运动新建一个计时器var Left = oBall.offsetLeft+leftNum, //小球每次运动完之后，距离浏览器左边边框的距离：上一次距离边框的距离加上这次运动的距离，下一行代码同理Top = oBall.offsetTop+topNum;//判断当小球向左移动的位置大于之前限定的最大距离或者小于0时，也就是超出浏览器窗口的左右边框时，//使他运动的方向取反leftNum = -leftNum，下面Top的判断同理。if(Left>=leftMax){ Left = leftMax;leftNum = -leftNum;ballBg(oBall); //传参数到下面的获取随机颜色的function}else if(Left<=0){Left = 0;leftNum = -leftNum;ballBg(oBall);};if(Top>=topMax){Top = topMax;topNum = -topNum;ballBg(oBall);}else if(Top<=0){Top = 0;topNum = -topNum;ballBg(oBall);};oBall.style.left = Left+'px'; oBall.style.top = Top+'px';},30); //小球每次执行运动的时间function ballBg(obj){ //随机获取小球颜色var r = Math.floor(Math.random()*256);g = Math.floor(Math.random()*256);b = Math.floor(Math.random()*256);obj.style.backgroundColor = 'rgb('+r+','+g+','+b+')';}</script>
</body>
</html>一个小球的运动实现之后，当实现多个小球的时候，有两个问题需要考虑：
1.小球数量不能写死，万一数量很多，所以最好不要用div写，而是用appendChild的方法追加，这样，原来<div class="ball"></div>单个；小球的div需要改成<div id="ball"></div> 一个大的div，然后往这个大的div中追加<div class="ball"></div>
2.小球的运动起点虽然相同，但是运动速度不能相同，不然所有的小球都会重叠在一起运动；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>运动的小球</title><style>.ball{width:80px;height:80px;background: red;border-radius: 50%;position:absolute;top:0;left:0;}</style>
</head>
<body><div id="ball"></div><script>var oBall = document.querySelector('#ball'),leftNum = 0,topNum = 0,aBall = null,length = 0;reSize(); window.onresize = reSize;function reSize(){leftMax = document.documentElement.clientWidth-80;topMax = document.documentElement.clientHeight-80;}creatBall(oBall,10); //传参，往oBall里面追加10个小球aBall = oBall.children; //获取oBall里面的所有小球length = aBall.length;function creatBall(obj,num){ //创建小球的functionfor(var i=0;i<num;i++){var cBall = document.createElement('div');cBall.className = 'ball';ballBg(cBall);cBall.leftNum=cBall.topNum=(i+1)*1; //这里去i+1而不取i的原因是，一个小球的i为0，如果不取i+1，那么第一个小球会永远在左上角不动并且不停地变颜色obj.appendChild(cBall);};};setInterval(function(){ //这里注意需要将之前所有对oBall设置的都换成aBall[i]for (var i=0;i<length;i++ ){var Left = aBall[i].offsetLeft+aBall[i].leftNum,Top = aBall[i].offsetTop+aBall[i].topNum;if(Left>=leftMax){Left = leftMax;aBall[i].leftNum = -aBall[i].leftNum;ballBg(aBall[i]);}else if(Left<=0){Left = 0;aBall[i].leftNum = -aBall[i].leftNum;ballBg(aBall[i]);};if(Top>=topMax){Top = topMax;aBall[i].topNum = -aBall[i].topNum;ballBg(aBall[i]);}else if(Top<=0){Top = 0;aBall[i].topNum = -aBall[i].topNum;ballBg(aBall[i]);};aBall[i].style.left = Left+'px';aBall[i].style.top = Top+'px';} },30);function ballBg(obj){var r = Math.floor(Math.random()*256);g = Math.floor(Math.random()*256);b = Math.floor(Math.random()*256);obj.style.backgroundColor = 'rgb('+r+','+g+','+b+')';}</script>
</body>
</html>以上，好多小球的碰撞效果就完成了，代码有问题或者还有可以优化的地方，请指教，如果您觉得这篇文章对您有帮助，麻烦点个赞吧~~
js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动的特效相关推荐
- js小球与边框碰撞反弹_四叉树在碰撞检测中的应用
缘起 <你被追尾了>中预告了加速碰撞检测的算法--四叉树(for 2D),所以本文就来学习一下. 分析 首先是为什么要使用四叉树进行优化,其实<你被追尾了>中已经说了,这里简单 ...
- 简单html js 特效,Js实现简单的小球运动特效
废话不多说了,直接给大家贴js代码了,具体代码如下所示: //定义局部变量 var directX=;//定义x轴方向 var directY=;//定义y轴方向 var ballX=;//定义x轴坐 ...
- Canvas+Js制作动量守恒的小球碰撞
目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...
- js实现多个小球碰撞
实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...
- canvas小球连线碰撞效果 html+css+js
先看效果(完整代码在底部): canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎 实现(看注释,可一步一步跟着实现): 0:定义标签: <h1>北极光之 ...
- 游戏开发：js实现简单的板球游戏
js实现简单的板球游戏 大家好,本次我们来使用js来实现一个简单的板球游戏.截图如下: 首先,设计页面代码,页面代码很简单,因为整个几乎是使用js编写的,页面几乎没有代码,如下: <!DOCTY ...
- python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
- 小球自由落体及碰撞反弹
目录 简述 构成 小球 按钮 运动轨迹 总结 简述 通过setInterval()定时刷新小球位置来完成小球运动状态,模拟自由落体加速度及碰撞反弹效果 构成 整体的物体很少,只有一个小球及一个开始按钮 ...
- css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
最新文章
- C#复制数组的两种方式，以及效率比较
- Nginx could not build the server
- 【控制】《多无人机协同控制技术》周伟老师-第1章-无人机协同控制技术概述
- c语言产生cl.exe错误,vc++6.0执行cl.exe时出错
- sqlite java需要按照,SQLite:java/jdbsqlite和python/sqlite3的区别
- 《Access 2007开发指南(修订版)》一一1.11 额外的提示和技巧
- 前端状态机系列：SCXML与XState对应关系
- 【一天一个C++小知识】004.C++中内部链接和外部链接
- Typora免费版，不是破解版，是没有升级的老版本，用的还是比较舒服的
- linux下texlive的卸载,Linux 下 texlive 2018 的安装
- 串口通信基础知识（UART）
- CDD分析（rpsblast分析）研究
- linux关闭云锁服务器,安全软件之linux系统下云锁简单的安装方法
- 微信图文素材中图片url替换
- 计算机新手必备知识,新手怎么查看电脑配置，购机必备知识！
- key mysql_调整MySQL中的key_reads
- 3D Experience — 产品协同研发平台
- 【AI视野·今日CV 计算机视觉论文速览 第174期】Tue, 7 Jan 2020
- 财务系统建设者须知——财务知识碎片（一） 什么是会计科目、什么是会计账户？
- Hibernate常见问题 No row with the given identifier exists问题的原因及解决