最近在学习前端,看到偶尔看到前端小游戏,就想自己写一个小游戏,奈何水平有限,只能写打气球这种简单的,所有的气球都是动态生成的,气球的颜色也是随机的
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); }); }); });
原文地址:https://www.cnblogs.com/aniu-caili/p/9435871.html
时间: 2024-10-12 02:41:01