本文例項為大家分享了實現彈彈球小遊戲的具體程式碼，供大家參考，具體內容如下

效果展示：

樣式：

#box {
       width: 600px;
       height: 650px;
       border: 5px solid rgb(245,164,96);
       position: relative;
       left: 500px;
       top: 50px;
       background: -webkit-gradient(linear,0 0,0 bottom,from(#ffffff),to(rgba(0,255,0.5)));
            }
 
             /*小球的設定*/
            #ball {
                width: 20px;
                height: 20px;
                border-radius: 10px;
                background-color: white;
                position: absolute;
                top: 560px;
                box-shadow: 0px 0px 3px 3px aqua;
            }
            
            /*開始遊戲按鈕設定*/
            #btn {
                width: 150px;
                height: 90px;
                position: fixed;
                left: 730px;
                top: 400px;
                border-radius: 10px;
                box-shadow: #BBBBBB;
                font-size: 24px;
                cursor: pointer;
            }
              /*滑塊的設定*/
            #slider {
                width: 120px;
                height: 20px;
                background-color: lightpink;
                position: absolute;
                top: 585px;
                border-radius: 10px;
                box-shadow: 0px 0px 2px 2px white;
                cursor: pointer;
            }
             /*每個方塊的邊框*/
            #brick div {
                width: 98px;
                height: 20px;
                float: left;
                border: 1px solid black;
            }
             /*遊戲規則邊框*/
            #tip {
                width: 280px;
                position: fixed;
                top: 200px;
                left: 100px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 20px;
            }
           /*難度得分邊框*/
            #grade {
                width: 180px;
                position: fixed;
                top: 100px;
                left: 1150px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 20px;
            }
        
             /*h3字型設定*/
            #grade h3 {
                font-weight: 500;
            }
            #phb{
                width: 180px;
   
 
             position: fixed;
                top: 50px;
                left: 1150px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 10px;
                
            }

程式碼：

js完整程式碼：

<script type="text/">
            var box = document.getElementById("box");
            var ball = document.getElementById("ball");
            var btn = document.getElementById("btn");
            var slider = document.getElementById("slider");
            var obrick = document.getElementById("brick");
            var brickArr = obrick.getElementsByTagName("div");
            var grade = document.getElementById("grade");
 
            var rank = grade.children[1]
            var score = grade.children[3]
            var sco = 0; //分數
            var timer; //小球執行
 
            var isRunning = false;
            var speedX = rand(3,12);
            var speedY = -rand(3,12);
            var num = speedX - speedY;
            //隨機選擇難度
            var num = Math.ceil((Math.random() * 9));
            console.log("num為:" + num);
            switch (num) {
                case 1:
                case 2:
                case 3:
                    rank.innerHTML = "簡單";
                    break;
                case 4:
                case 5:
                case 6:
                    rank.innerHTML = "中等";
                    slider.style.width = 80 + "px";
                    break;
                case 7:
                case 8:
                case 9:
                    rank.innerHTML = "困難";
                    slider.style.width = 60 + "px";
                    break;
            }
 
            //隨機生成小球與滑塊的初始位置
            var beginGo = rand(100,500);
            ball.style.left = beginGo + 40 + "px";
            slider.style.left = beginGo + "px";
 
            //開始按鈕點選事件
            btn.onclick = function() {
                btn.style.display = "none"; //隱藏按鈕
                isRunning = true;
                clearInterval(timer);
                timer = setInterval(function() {
 
                    //獲取小球初始位置
                    var ballLeft = ball.offsetLeft;
                    var ballTop = ball.offsetTop;
 
 
                    //獲取小球運動之後位置
                    var nextleft = ballLeft + speedX;
                    var nexttop = ballTop + speedY;
 
                    //水平邊界判斷，當小球的left值小於容器左邊界或者大於容器右邊界時，將水平方向速度取反
                    if (nextleft <= 0 || nextleft >= box.offsetWidth - ball.offsetWidth - 10) {
                        speedX = -speedX;
                    }
                    //垂直邊界判斷，當小球的top值小於容器上邊界時，將垂直方向速度取反
                    if (nexttop <= 0) {
                        speedY = -speedY;
                    }
                    //當小球觸碰到下邊界時，提示“遊戲失敗”,重新重新整理頁面
                    if (nexttop > box.offsetHeight - ball.offsetHeight) {
                        location.reload();
                        alert("Game Over!");
                    }
 
                    //將運動後的位置重新賦值給小球 
                    ball.style.left = nextleft + "px";
                    ball.style.top = nexttop + "px";
 
                    //小球與滑塊的碰撞
                    if (knock(ball,slider)) {
                        speedY = -speedY;
                    }
 
                    //小球與方塊的碰撞
                    for (var j = 0; j < brickArr.length; j++) {
                        if (knock(brickArr[j],ball)) {
                            speedY = -speedY
                            obrick.removeChild(brickArr[j]);
                            sco++;
                            score.innerHTML = sco;
                            break;
                        }
                    }
 
                    //當容器中方塊數量為0時，宣佈“遊戲勝利”，重新整理頁面
                    if (brickArr.length <= 0) {
                        location.reload();
                        alert("You win!");
                    }
                },20)
            }
 
            //滑鼠控制滑塊
            slider.onmousedown = function(e) {
                var e = e || window.event;
                //獲取滑塊初始位置
                var offsetX = e.clientX - slider.offsetLeft;
                if (isRunning) {
                    document.onmousemove = function(e) {
                        var e = e || window.event;
                        var YgnNvRr
 
l = e.clientX - offsethttp://www.cppcns.comX;
                        if (l <= 0) {
                            l = 0;
                        }
                        if (l >= box.offsetWidth - slider.offsetWidth - 10) {
                            l = box.offsetWidth - slider.offsetWidth - 10;
                        }
                        slider.style.left = l + "px";
                    }
                }
            }
            document.onmouseup = function() {
                document.onmousemove = null; //滑鼠移動時
            }
 
            //按鍵控制滑塊
            document.onkeydown = function(e) {
                var e = e || window.event;
                var code = e.keyCode || e.which;
                var offsetX = slider.offsetLeft;
                if (isRunning) {
                    switch (code) {
                        case 37: //左
                            if (offsetX <= 0) {
                                slider.style.left = 0
                                break;
                            }
                            slider.style.left = offsetX * 4 / 5 + "px";
                            break;
                        case 39: //右
                            if (offsetX >= box.offsetWidth - slider.offsetWidth - 10) {
                                slider.style.left = box.offsetWidth - slider.offsetWidth;
                                break;
                            }
                            slider.style.left = (box.offsetWidth - slider.offwww.cppcns.com
 
setWidth - offsetX) / 5 + offsetX + "px";
                            break;
                    }
                }
 
            }
            //一共有66塊方塊
            createBrick(66);
 
            //容器內建立方塊
            function createBrick(n) {
                var oBrick = document.getElementById("brick");
                //在大盒子brick中插入n個div方塊，並給予隨機顏色
                for (var i = 0; i < n; i++) {
                    var node = document.createElement("div");
                    node.style.backgroundColor = color();
                    oBrick.appendChild(node);
                }
                //獲取所有的方塊
                var brickArr = obrick.getElementsByTagName("div")
 
                //根據每個方塊當前所在位置，將left與top值賦給方塊
                for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.left = brickArr[i].offsetLeft + "px";
                    brickArr[i].style.top = brickArr[i].offsetTop + "px";
                }
                //將所有方塊設定成絕對定位，注意這一步與上一步順序不能調換
                for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.position = "absolute";
                }
            }
            //隨機生成顏色
            function color() {
                var result = "#";
                for (var i = 0; i < 6; i++) {
                    result += rand(0,15).toString(16)
 
                }
                return result;
            }
            //隨機數生成
            function rand(n,m) {
                return n + parseInt(Math.random() * (m - n + 1));
            }
 
            //碰撞檢測函式
            function knock(node1,node2) {
                var l1 = node1.offsetLeft;
                var r1 = node1.offsetLeft + node1.offsetWidth;
                var t1 = node1.offsetTop;
                var b1 = node1.offsetTop + node1.offsetHeight;
                var l2 = node2.offsetLeft;
                var r2 = node2.offsetLeft + node2.offsetWidth;
                var t2 = node2.offsetTop;
                var b2 = node2.offsetTop + node2.offsetHeight;
                if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
                    return false;
                } else {
                    return true;
                }
            }
</script>

以上程式碼不是很完美，有需要的還可以進一步的改進

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。