文档章节

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

o
 osc_4nmshwhm
发布于 2018/08/07 11:17
字数 997
阅读 12
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

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

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

});

});
 
 
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.5K
6
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
6K
18
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
在多个浏览器上运行脚本--Queen

假设你想和朋友们玩这么个游戏:你写下某个数字,然后让朋友们猜你写的是什么数字。你的朋友们将不断的给你一些猜测的数字,直到猜中为止。 现在想象你的朋友都是使用的浏览器,这个游戏就相...

匿名
2013/01/24
4.5K
1

没有更多内容

加载失败,请刷新页面

加载更多

这是对我最大的认可和鼓励

这是程序员cxuan的第18篇原创分享 可能一些小伙伴们不太清楚是怎么回事,是这样的。 我最近肝了三本 PDF,分别是 《Java核心技术总结》、《HTTP核心总结》、《程序员必知的硬核知识》、目录如...

osc_nc5ghpm9
11分钟前
0
0
折叠屏丨华为专家深度解读折叠屏连续性和拖拽适配介绍

折叠屏手机的出现,满足了用户对大屏幕的追求,但卓越的用户体验更离不开应用的适配与功能创新。距离Mate X面世已经一年的时间,应用适配情况如何?在适配过程中有哪些经验可以参考?有没有常...

软件绿色联盟
今天
0
0
一个 static 还能难得住我?

这是程序员cxuan的第15期原创分享 static 是我们日常生活中经常用到的关键字,也是 Java 中非常重要的一个关键字,static 可以修饰变量、方法、做静态代码块、静态导包等,下面我们就来具体聊...

osc_p23q7y3z
13分钟前
11
0
高中生写LOL外挂1年狂赚500万,落网前刚买下120万保时捷...

点击“开发者技术前线”,选择“星标🔝” 在看|星标|留言, 真爱 来源:交汇点| 编辑:可可 2020年3月,泰州姜堰警方接到一起特殊的报警:一名游戏玩家向民警反映,自己在玩英雄联盟对战时输...

开发者技术前线
今天
0
0
一次简单的服务器 cpu 占用率高的快速排查实战

前两天,朋友遇到一个线上 cpu 占用率很高的问题,我们俩一起快速定位并解决了这个问题。在征求朋友同意后,特发此文分享整个过程。本文以对话的形式展开,加上我的内心独白。文中对话与实际...

osc_emo7t12i
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部