jQuery 打气球小游戏点击气球爆炸效果

最近在学习前端，看到偶尔看到前端小游戏，就想自己写一个小游戏，奈何水平有限，只能写打气球这种简单的，所有的气球都是动态生成的，气球的颜色也是随机的

html部分

 <div class="container">
 </div>
// 只创建了一个div大盒子用于游戏背景，所有的气球都是动态生成的
css部分
// .box位于.container的下一级，动态生成，用于存储气球

.box{
    position:absolute;
 width: 80px;
 height: 80px;
 bottom:-10px;
}
// 气球的样式
.box div{
 position:absolute;
 width:80px;
 height:80px;
 border-radius:44px 44px 44px 20px;
 transform:rotate(-45deg) scale(1);
}
// 气球尾部的样式，.balloon是自动生成的气球，.clipped是为了产生爆炸效果，点击气球时生成的
.balloon:after,.clipped:after{
 content:"";
 height: 0;
 width: 0;
 display:block;
 border-top:5px solid transparent;
 border-right:5px solid transparent;
 border-bottom:5px solid transparent;
 transform:rotate(-45deg);
 position:relative;
 top:72px;
 left:-7px;
}
// 气球形态是通过css中border来制作的，气球的尾部是在伪元素after中利用border边框完成的，气球的颜色是在在js中利用css属性给气球添加box-shadow属性实现的

js部分

//点击气球产生爆炸效果，并下降
$(function(){
    var num=0;
 var r,g,b;
 function create(){
 num ;
　　　　//创建气球，添加颜色
 r=Math.floor(Math.random()*256);
 g=Math.floor(Math.random()*256);
 b=Math.floor(Math.random()*256);
 var box=$("<div class='box'>").appendTo(".container");
 var ele=$("<div class='balloon'>").appendTo(box).
 css({"boxShadow":"-10px 10px 25px" " rgb(" r "," g "," b ") " "inset",
 "border":"1px solid" " rgb(" r "," g "," b ")"}).addClass("balloon" num);
 box.css({"left":Math.random()*($("body").width()-40)});
　　　　　　//给伪元素添加样式的方法有多种，这里用了给元素添加一个style样式，style标签中是伪元素样式
 ele.append("<style>.balloon" num ":after{border-left:15px solid " "rgb(" r "," g "," b ")}</style>");
 }
 setInterval(function(){
 create();
 },2000);
 //移动
 function move(){
 var timer=setInterval(function(){
 $(".box").css({"bottom":" =3"});
 },50);
 }
 move();
 //产生任意值
 function rand(max,min){
 return Math.floor(Math.random()*(max-min) min)
 }
 //点击气球爆炸
 //创造碎片
　　//动态创建的元素添加事件利用$("")是选取不到的，必须凌on来绑定
 //$(".container .box").on("click",".box",function(){ 这样是不行的
 $(".container").on("click",".box",function(){
 var $b = $(".balloon");
 var count = 4;
 var width = $b.width() / count;
 var height = $b.width() / count;
 var y = 0;
 var color = $(this).find(".balloon").css("boxShadow").split(" ");
 //创建16个气球碎片
 for (var z = 0; z <= count * width; z = width) {
　　　　　　　　// 创建了在一个盒子里创建了16个与盒子中已有的气球一样样式的气球，并利用clip:rect(上，右，下，左)样式对16个气球进行裁剪，构成气球碎片
 $(this).append("<div class='clipped' style='clip:rect(" y "px," (z width) 'px,' (y height) "px," z "px" ")'>");
 if (z === (count * width) - width) {
 y = height;
 z = -width;
 }
 if (y === (count * height)) {
 z = 99999;
 } } $(this).find(".balloon").remove(); //给碎片添加样式 $(this).find(".clipped").each(function (i,val) { $(this).css({"boxShadow": color.join(" ")}); $(this).append("<style>.clipped:after{border-left:15px solid " color[0] color[1] color[2] "}</style>"); var v=rand(120,90), angle=rand(89,80), theta=(angle*Math.PI)/180, g=-9.8, t=0, nx,ny; var navigate=[-1,0,1]; var direction=navigate[Math.floor(Math.random()*navigate.length)]; var randDeg=rand(10,-5); var randScale=rand(1.1,0.9); var randDeg2=rand(30,5); var self=$(this); $(this).css( {"transform":"rotateZ(" randDeg2 "deg) " "scale(" randScale ") " "skew(" randDeg ")"} ); var z=setInterval(function(){ var ux=(Math.cos(theta)*v)*direction; var uy=(Math.sin(theta)*v)-(-g)*t; nx=ux*t; ny=uy*t 0.5*Math.pow(t,2)*g; self.css({"bottom":ny "px","left":nx "px"}); t =0.1; if(t>=15){ clearInterval(z); self.remove(); } },10); }); });});

}
$(this).find(".balloon").remove();
//给碎片添加样式
利用each遍历给每个气球添加不同样式，偏转角度，放大缩小，水平速度，垂直速度等
$(this).find(".clipped").each(function (i,val) {
 $(this).css({"boxShadow": color.join(" ")});
 $(this).append("<style>.clipped:after{border-left:15px solid " color[0] color[1] color[2] "}</style>");
 var v=rand(120,90), angle=rand(89,80), theta=(angle*Math.PI)/180, g=-9.8, t=0, nx,ny;
 var navigate=[-1,0,1];
 var direction=navigate[Math.floor(Math.random()*navigate.length)];
 var randDeg=rand(10,-5);
 var randScale=rand(1.1,0.9);
 var randDeg2=rand(30,5);
 var self=$(this);

$(this).css(
                        {"transform":"rotateZ(" randDeg2 "deg) " "scale(" randScale ") " "skew(" randDeg ")"}
 );
// 添加一个定时器，利用定位是碎片动起来，当时间超过15s时停止定时器，并删除碎片，减少节点数量，减轻页面加载压力
 var z=setInterval(function(){
 var ux=(Math.cos(theta)*v)*direction;
 var uy=(Math.sin(theta)*v)-(-g)*t;
 nx=ux*t;
 ny=uy*t 0.5*Math.pow(t,2)*g;
 self.css({"bottom":ny "px","left":nx "px"});
 t =0.1;
 if(t>=15){
 clearInterval(z);
 self.remove();
 }
 },10);
 });

 });

});