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

 ???});

});

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

原文地址：https://www.cnblogs.com/aniu-caili/p/9435871.html