原生js实现弹跳小球
作者：余斯内克
这篇文章主要为大家详细介绍了原生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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。