jQuery实现弹弹球小游戏 jQuery实现弹弹球小游戏

本文实例为大家分享了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代码：