原生js实现弹跳小球
更新时间：2021年09月12日 10:17:02 作者：余斯内克
这篇文章主要为大家详细介绍了原生js实现弹跳小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
突发奇想，写了个小球来回弹跳的案例，供大家参考，具体内容如下
主要就是利用了margin-left / top 值进行位移，当然，也可以使用定位去做。
本案例所用到的有：
- DOM元素获取
- DOM样式操作
- .offsetWidth 获取元素宽度
- .offsetHeight 获取元素高度
- setInterval() 定时器
上代码
整体使用原生js
<style> //style样式
* {
margin: 0;
padding: 0;
}
#box {
width: 500px;
height: 600px;
background-color: #eee;
box-shadow: 0 0 10px 0 #000;
margin: auto;
overflow: hidden;
position: relative;
margin-top: 50px;
}
#box div {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: absolute;
}
</style>
<body>
<div id="box">
<div id="cir"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script>
var box = document.getElementById("box");
var cir = document.getElementById("cir")
var cirs = box.querySelectorAll("div");
collMove(box, cir, 6);
collMove(box, cirs[1], 7);
collMove(box, cirs[2], 8);
collMove(box, cirs[3], 9);
collMove(box, cirs[4], 10);
collMove(box, cirs[5], 10);
collMove(box, cirs[6], 11);
/**
* 元素遇边界弹开
* 弹开的同时改变元素颜色
* @param {容器获取} box
* @param {容器内弹跳元素获取} cir
* @param {弹跳速度} speed
*/
function collMove(box, cir, speed) {//方法封装
var oDiv = box; //获取容器
var oCir = cir; //获取容器内元素
var xMax = oDiv.offsetWidth - oCir.offsetWidth; //容器最大X轴边界
var yMax = oDiv.offsetHeight - oCir.offsetHeight; //容器最大Y轴边界
var motionX = 0; //元素X轴坐标初始化
var motionY = 0; //元素y轴坐标初始化
(() => {
var speedX = speed; //x轴偏移量
var speedY = speed; //y轴偏移量
setInterval(() => {
motionX += speedX; //进行X轴偏移
motionY += speedY; //进行y轴偏移
if (motionX >= xMax) { //检测是否碰到X轴右边界
motionX = xMax; //碰到边界将X轴坐标设为x轴最大右边界
speedX = -speedX; //x轴偏移量反转
randColor(oCir); //改变颜色
} else if (motionX <= 0) { //检测是否碰到X左边界
motionX = 0; //碰到边界将X轴坐标设为 0 即左边界初始位置
speedX = -speedX; //再次反转X轴偏移量
randColor(oCir); //下方上下边界检测同理
}
if (motionY >= yMax) {
motionY = yMax;
speedY = -speedY
randColor(oCir);
} else if (motionY <= 0) {
motionY = 0;
speedY = -speedY;
randColor(oCir);
}
oCir.style.marginLeft = motionX + "px"; //设置元素X轴坐标
oCir.style.marginTop = motionY + "px"; //设置元素Y轴坐标
}, 10);
})();
function randColor(obj) { //封装一个随机色彩，改变颜色直接调用
var op = Math.random() * 7 + 3;
function color() {
return Math.floor(Math.random() * 256);
}
return obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})`;
}
}
</script>
整个方法中，最主要的就是理解元素位置与容器边界的检测与判断，这一部分搞懂，剩下的就很简单了。
有个小提示：容器不要设置成标准的正方形，不然会因为角度的原因，小球只能从左上角到右下角来回弹动。
整个方法都已封装，需要用时，只需要复制整个方法或者外链进去 然后直接使用方法名依照对应参数调用即可。一个元素一次调用. 闲麻烦可直接写一个for循环去循环调用。
抛个砖：
for(var i = 1 ; i<=10;i++){
collMove(box,cirs[i],i);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解微信小程序input标签正则初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
序列化是将对象状态转换为可保持或可传输的格式的过程。与序列化相对的是反序列化，它将流转换为对象。这两个过程结合起来，可以轻松地存储和传输数据2013-07-07
下面小编就为大家带来一篇浅谈javascript:两种注释,声明变量,定义函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
javascript 实现的多浏览器支持的贪吃蛇webgame
兼容FF IE的javascript版贪吃蛇游戏，非常厉害的高手。2008-01-01
这篇文章主要介绍了JS中bridge的原理与封装，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
这篇文章主要是对用鼠标滚轮改变图片大小的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
使用element-plus时重写样式不起作用的问题及解决方法
这篇文章给大家介绍使用element-plus时重写样式不起作用的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-09-09
本文主要介绍了Javascript实现登录记住用户名和密码功能的代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
下面小编就为大家分享一篇图片加载完成再执行事件的实例，具有很好的参考价值，一起跟随小编过来看看吧，希望对大家有所帮助2017-11-11
编程语言中，函数Func(Type a,……)直接或间接调用函数本身，则该函数称为递归函数。递归函数不能定义为内联函数。这篇文章主要介绍了JS中递归函数的相关资料,需要的朋友可以参考下2016-06-06
最新评论