JavaScript 基于运动开发，实现打砖块小游戏。练手项目必备

╰半夏微凉° 2023-07-17 06:40 11阅读 0赞

**1.分析游戏设置基本样式**

HTML结构：

CSS基本样式设置：

#div1{ width: 600px;height: 600px;border: 1px black solid;position: relative;margin: 20px auto;}
            #ball{ width: 20px;height: 20px;background-color: red;border-radius:50%;position: absolute;bottom: 30px;left: 290px;}
            #bat{ width: 100px;height: 30px;background-color: blue;position: absolute;bottom: 0px;left: 250px;}
            #brick div{ width: 98px;height: 18px;border: 1px black solid;float: left;}

**2.小球，地板的基本运动**  
1.  
//让小球可以水平方向运动，随机一个速度

speedX=parseInt(Math.random()*4)+3;

//让小球可以垂直方向运动，随机一个速度

speedY=-(parseInt(Math.random()*3+5));

//底部滑块的拖拽 拖拽三剑客的结构

3.**创建砖块,n个**

注意：我们在设置样式时将砖块的样式设置为水平浮动，所以在我们打击后消失一个砖块，会出现补齐的效果，为了改变这个效果。我们需要使用文档流的转换。

**文档流的转换**  
相对定位 转 绝对定位 （消失后的砖块，不会在浮动）

**4.碰撞的效果**

碰撞函数：

**碰撞检测**

1.小球与拍子

2.小球与砖块

*/
                //1.小球与拍子
                if(konck(oDiv2,oBat)){ 
                    speedY *=-1;
                }
                //小球与砖块碰撞
                for(var i = 0;i<aBricks.length;i++){ 
                    if(konck(oDiv2,aBricks[i])){ 
                        speedY *=-1;
                        //砖块被销毁掉
                        oBrick.removeChild(aBricks[i]);
                        break
                    }

完整代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div1{ width: 600px;height: 600px;border: 1px black solid;position: relative;margin: 20px auto;}
            #ball{ width: 20px;height: 20px;background-color: red;border-radius:50%;position: absolute;bottom: 30px;left: 290px;}
            #bat{ width: 100px;height: 30px;background-color: blue;position: absolute;bottom: 0px;left: 250px;}
            #brick div{ width: 98px;height: 18px;border: 1px black solid;float: left;}
        </style>
        <script>
            window.onload = function(){ 
                var begin = confirm('是否开始游戏');
                if(begin){ 
                    var oDiv1 = document.getElementById("div1");
                var oDiv2 = document.getElementById("ball");
                var oBat =document.getElementById('bat');
                var oBrick = document.getElementById("brick");
                var aBricks = oBrick.getElementsByTagName('div');
                dragX(oBat);
                createBrick(60);
                //让小球可以水平方向运动，随机一个速度
                speedX=parseInt(Math.random()*4)+3;
                //让小球可以垂直方向运动，随机一个速度
                speedY=-(parseInt(Math.random()*3+5));
                timer=setInterval(function(){ 
                    oDiv2.style.left = oDiv2.offsetLeft+speedX +"px";
                    oDiv2.style.top = oDiv2.offsetTop +speedY+'px';
                    if(oDiv2.offsetLeft >= 580 ||oDiv2.offsetLeft <=0){ 
                        speedX =speedX*-1;
                    }
                    if(oDiv2.offsetTop <=0){ 
                        speedY =speedY*-1;
                    }
                    if(oDiv2.offsetTop >= 580){ 
                        alert("GAME OVER");
                        clearInterval(timer);
                        window.location.reload();
                    }
                    /* 碰撞检测 1.小球与拍子 2.小球与砖块 */
                    //1.小球与拍子
                    if(konck(oDiv2,oBat)){ 
                        speedY *=-1;
                    }
                    //小球与砖块碰撞
                    for(var i = 0;i<aBricks.length;i++){ 
                        if(konck(oDiv2,aBricks[i])){ 
                            speedY *=-1;
                            //砖块被销毁掉
                            oBrick.removeChild(aBricks[i]);
                            break
                        }
                    }
                    },30)
                }
                
            }
    
            //底部滑块的拖拽
            function dragX(node){ 
                node.onmousedown = function(ev){ 
                    var e = ev || window.event;
                    var offsetX = e.clientX - node.offsetLeft;
    
                    document.onmousemove = function(ev){ 
                        var e = ev || window.event; 
                        var l = e.clientX - offsetX;
                        //限制出界
                        if(l<=0){ 
                            l=0;
                        }
                        if(l>=500){ 
                            l=500;
                        }
                        node.style.left  = l+'px';
                    }
    
                }
                document.onmouseup = function(){ 
                    document.onmousemove = null;
                }
            }
    
            //创建砖块,n个
            /* 文档流的转换 相对定位 转 绝对定位 （消失后的砖块，不会在浮动） */
            function createBrick(n){ 
                var oBrick = document.getElementById("brick");
                for(var i = 0;i<n;i++){ 
                    var node = document.createElement("div");
                    node.style.backgroundColor=randomColor();
                    oBrick.appendChild(node);
                }
                //相对定位，转绝对定位,1.给每一个砖块的坐标定位
                var aBricks =oBrick.getElementsByTagName('div');
                for(var i = 0; i<aBricks.length ;i++){ 
                    aBricks[i].style.left = aBricks[i].offsetLeft + 'px';
                    aBricks[i].style.top =aBricks[i].offsetTop +'px';
                }
                //2.将每一个砖块的浮动定位改成绝对定位
                for(var i = 0;i<aBricks.length;i++){ 
                    aBricks[i].style.position = 'absolute';
                }
            }
            function randomColor(){ 
                var str = "rgba("+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+1+")";
                return str ;
            }
    
            function konck(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>
    </head>
    <body>
        <div id="div1">
            <div id="ball"></div>
            <div id="bat"></div>
            <div id="brick">
            </div>
        </div>
    </body>
    </html>