原生js實(shí)現(xiàn)彈跳小球
更新時間：2021年09月12日 10:17:02 作者：余斯內(nèi)克
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)彈跳小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
突發(fā)奇想，寫了個小球來回彈跳的案例，供大家參考，具體內(nèi)容如下
主要就是利用了margin-left / top 值進(jìn)行位移，當(dāng)然，也可以使用定位去做。
本案例所用到的有：
- 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 {容器內(nèi)彈跳元素獲取} cir
* @param {彈跳速度} speed
*/
function collMove(box, cir, speed) {//方法封裝
var oDiv = box; //獲取容器
var oCir = cir; //獲取容器內(nèi)元素
var xMax = oDiv.offsetWidth - oCir.offsetWidth; //容器最大X軸邊界
var yMax = oDiv.offsetHeight - oCir.offsetHeight; //容器最大Y軸邊界
var motionX = 0; //元素X軸坐標(biāo)初始化
var motionY = 0; //元素y軸坐標(biāo)初始化
(() => {
var speedX = speed; //x軸偏移量
var speedY = speed; //y軸偏移量
setInterval(() => {
motionX += speedX; //進(jìn)行X軸偏移
motionY += speedY; //進(jìn)行y軸偏移
if (motionX >= xMax) { //檢測是否碰到X軸右邊界
motionX = xMax; //碰到邊界將X軸坐標(biāo)設(shè)為x軸最大右邊界
speedX = -speedX; //x軸偏移量反轉(zhuǎn)
randColor(oCir); //改變顏色
} else if (motionX <= 0) { //檢測是否碰到X左邊界
motionX = 0; //碰到邊界將X軸坐標(biāo)設(shè)為 0 即左邊界初始位置
speedX = -speedX; //再次反轉(zhuǎn)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"; //設(shè)置元素X軸坐標(biāo)
oCir.style.marginTop = motionY + "px"; //設(shè)置元素Y軸坐標(biāo)
}, 10);
})();
function randColor(obj) { //封裝一個隨機(jī)色彩，改變顏色直接調(diào)用
var op = Math.random() * 7 + 3;
function color() {
return Math.floor(Math.random() * 256);
}
return obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})`;
}
}
</script>
整個方法中，最主要的就是理解元素位置與容器邊界的檢測與判斷，這一部分搞懂，剩下的就很簡單了。
有個小提示：容器不要設(shè)置成標(biāo)準(zhǔn)的正方形，不然會因?yàn)榻嵌鹊脑?，小球只能從左上角到右下角來回彈動?br />
整個方法都已封裝，需要用時，只需要復(fù)制整個方法或者外鏈進(jìn)去 然后直接使用方法名依照對應(yīng)參數(shù)調(diào)用即可。一個元素一次調(diào)用. 閑麻煩可直接寫一個for循環(huán)去循環(huán)調(diào)用。
拋個磚：
for(var i = 1 ; i<=10;i++){
collMove(box,cirs[i],i);
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動小球
- JavaScript結(jié)合Canvas繪畫畫運(yùn)動小球
- JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動小球
- 原生js實(shí)現(xiàn)移動小球（碰撞檢測）
- js實(shí)現(xiàn)小球在頁面規(guī)定的區(qū)域運(yùn)動
- 用js實(shí)現(xiàn)小球的自由移動代碼
- js實(shí)現(xiàn)跟隨鼠標(biāo)移動的小球
- JavaScript實(shí)現(xiàn)小球沿正弦曲線運(yùn)動
- p5.js入門教程之小球動畫示例代碼
- 原生js實(shí)現(xiàn)彈動小球效果
相關(guān)文章
詳解微信小程序input標(biāo)簽正則初體驗(yàn)
這篇文章主要介紹了詳解微信小程序input標(biāo)簽正則初體驗(yàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
序列化是將對象狀態(tài)轉(zhuǎn)換為可保持或可傳輸?shù)母袷降倪^程。與序列化相對的是反序列化，它將流轉(zhuǎn)換為對象。這兩個過程結(jié)合起來，可以輕松地存儲和傳輸數(shù)據(jù)2013-07-07
淺談javascript:兩種注釋,聲明變量,定義函數(shù)
下面小編就為大家?guī)硪黄獪\談javascript:兩種注釋,聲明變量,定義函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
javascript 實(shí)現(xiàn)的多瀏覽器支持的貪吃蛇webgame
兼容FF IE的javascript版貪吃蛇游戲，非常厲害的高手。2008-01-01
這篇文章主要介紹了JS中bridge的原理與封裝，文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要是對用鼠標(biāo)滾輪改變圖片大小的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
使用element-plus時重寫樣式不起作用的問題及解決方法
這篇文章給大家介紹使用element-plus時重寫樣式不起作用的問題及解決方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-09-09
Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能
本文主要介紹了Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能的代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
下面小編就為大家分享一篇圖片加載完成再執(zhí)行事件的實(shí)例，具有很好的參考價值，一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
編程語言中，函數(shù)Func(Type a,……)直接或間接調(diào)用函數(shù)本身，則該函數(shù)稱為遞歸函數(shù)。遞歸函數(shù)不能定義為內(nèi)聯(lián)函數(shù)。這篇文章主要介紹了JS中遞歸函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-06-06