jQuery实现弹弹球小游戏

本文实例为大家分享了jQuery实现弹弹球小游戏的具体代码，供大家参考，具体内容如下

效果展示：

CSS样式：

#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, 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代码：

js完整代码：

以上代码不是很完美，有需要的还可以进一步的改进

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。