溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么用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);
}“怎么用js制作彈跳小球游戲”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
