溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用js制作彈跳小球游戲

發(fā)布時(shí)間：2021-09-13 18:00:57 來(lái)源：億速云 閱讀：164 作者：chen 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容介紹了“怎么用js制作彈跳小球游戲”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

突發(fā)奇想，寫(xiě)了個(gè)小球來(lái)回彈跳的案例，供大家參考，具體內(nèi)容如下

主要就是利用了margin-left / top 值進(jìn)行位移，當(dāng)然，也可以使用定位去做。

本案例所用到的有：

  • DOM元素獲取

  • DOM樣式操作

  • .offsetWidth 獲取元素寬度

  • .offsetHeight 獲取元素高度

  • setInterval() 定時(shí)器

上代碼

整體使用原生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);
/**
 * 元素遇邊界彈開(kāi)
 * 彈開(kāi)的同時(shí)改變?cè)仡伾?
 * @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) { //檢測(cè)是否碰到X軸右邊界
                motionX = xMax; //碰到邊界將X軸坐標(biāo)設(shè)為x軸最大右邊界
                speedX = -speedX; //x軸偏移量反轉(zhuǎn)
                randColor(oCir); //改變顏色
            } else if (motionX <= 0) { //檢測(cè)是否碰到X左邊界
                motionX = 0; //碰到邊界將X軸坐標(biāo)設(shè)為 0 即左邊界初始位置
                speedX = -speedX; //再次反轉(zhuǎn)X軸偏移量
                randColor(oCir); //下方上下邊界檢測(cè)同理
            }
            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) { //封裝一個(gè)隨機(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>

整個(gè)方法中，最主要的就是理解元素位置與容器邊界的檢測(cè)與判斷，這一部分搞懂，剩下的就很簡(jiǎn)單了。
有個(gè)小提示：容器不要設(shè)置成標(biāo)準(zhǔn)的正方形，不然會(huì)因?yàn)榻嵌鹊脑?，小球只能從左上角到右下角?lái)回彈動(dòng)。
整個(gè)方法都已封裝，需要用時(shí)，只需要復(fù)制整個(gè)方法或者外鏈進(jìn)去 然后直接使用方法名依照對(duì)應(yīng)參數(shù)調(diào)用即可。一個(gè)元素一次調(diào)用. 閑麻煩可直接寫(xiě)一個(gè)for循環(huán)去循環(huán)調(diào)用。

拋個(gè)磚：

for(var i = 1 ; i<=10;i++){
 collMove(box,cirs[i],i);
}

“怎么用js制作彈跳小球游戲”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手