买了winhost网站空间在哪里登陆,优化公司,泉州网站开发企业,湖北省建设安全管理协会网站最近在学习前端#xff0c;看到偶尔看到前端小游戏#xff0c;就想自己写一个小游戏#xff0c;奈何水平有限#xff0c;只能写打气球这种简单的#xff0c;所有的气球都是动态生成的#xff0c;气球的颜色也是随机的
html部分 div classcontainer …最近在学习前端看到偶尔看到前端小游戏就想自己写一个小游戏奈何水平有限只能写打气球这种简单的所有的气球都是动态生成的气球的颜色也是随机的
html部分 div classcontainer /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 num0; var r,g,b; function create(){ num ; //创建气球添加颜色 rMath.floor(Math.random()*256); gMath.floor(Math.random()*256); bMath.floor(Math.random()*256); var box$(div classbox).appendTo(.container); var ele$(div classballoon).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 timersetInterval(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 classclipped styleclip: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 vrand(120,90), anglerand(89,80), theta(angle*Math.PI)/180, g-9.8, t0, nx,ny; var navigate[-1,0,1]; var directionnavigate[Math.floor(Math.random()*navigate.length)]; var randDegrand(10,-5); var randScalerand(1.1,0.9); var randDeg2rand(30,5); var self$(this); $(this).css( {transform:rotateZ( randDeg2 deg) scale( randScale ) skew( randDeg )} ); var zsetInterval(function(){ var ux(Math.cos(theta)*v)*direction; var uy(Math.sin(theta)*v)-(-g)*t; nxux*t; nyuy*t 0.5*Math.pow(t,2)*g; self.css({bottom:ny px,left:nx px}); t 0.1; if(t15){ 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 vrand(120,90), anglerand(89,80), theta(angle*Math.PI)/180, g-9.8, t0, nx,ny; var navigate[-1,0,1]; var directionnavigate[Math.floor(Math.random()*navigate.length)]; var randDegrand(10,-5); var randScalerand(1.1,0.9); var randDeg2rand(30,5); var self$(this);
$(this).css( {transform:rotateZ( randDeg2 deg) scale( randScale ) skew( randDeg )} );// 添加一个定时器利用定位是碎片动起来当时间超过15s时停止定时器并删除碎片减少节点数量减轻页面加载压力 var zsetInterval(function(){ var ux(Math.cos(theta)*v)*direction; var uy(Math.sin(theta)*v)-(-g)*t; nxux*t; nyuy*t 0.5*Math.pow(t,2)*g; self.css({bottom:ny px,left:nx px}); t 0.1; if(t15){ clearInterval(z); self.remove(); } },10); }); });}); 更多专业前端知识请上
【猿2048】www.mk2048.com
