最近在學習前端，看到偶爾看到前端小遊戲，就想自己寫一個小遊戲，奈何水平有限，只能寫打氣球這種簡單的，所有的氣球都是動態生成的，氣球的顏色也是隨機的

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);
        });

    });

});

jQuery 打氣球小遊戲 點擊氣球爆炸效果