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 打气球小游戏 点击气球爆炸效果的更多相关文章
- 自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药
自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm ...
- js实现点气球小游戏
二话不说直接贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- js、jQuery实现2048小游戏
2048小游戏 一.游戏简介: 2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合 ...
- JQuery实现1024小游戏
最近用Jqery写了一个1024小游戏,由于是第一次写小游戏,所以就选了一个基础的没什么难度游戏.具体实现如下: 首先在开发时将整个游戏分成两层(自认为),底层是游戏的数据结构以及对数据的操作,上层是 ...
- 基于jQuery的2048小游戏设计(网页版)
上周模仿一个2048小游戏,总结一下自己在编写代码的时候遇到的一些坑. 游戏规则:省略,我想大部分人都玩过,不写了 源码地址:https://github.com/xinhua6/2048game.g ...
- JS实现植物大战僵尸小游戏,代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
- js 面向对象 打气球小游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现抽奖小游戏
在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面: 下面我将给大家介绍下如何通过javascript来实现这样的一个抽奖功能,主要从下面三个步骤入手(文中着重介绍第三部分有关功能的实现): 1. ...
随机推荐
- C#操作CAD-调用winform
个人认为用命令操作cad会比较便捷,但是鉴于好多人喜欢通过鼠标点击的方式操作cad,在此讲一下如何调用winform.前期准备请看上篇文章. 1.在新建好项目并引用接口dll的前提下,新建一个winf ...
- Linux学习笔记之Linux第一课-基本介绍
Linux简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操作系统,是一个基 ...
- 笨办法学Python(三十八)
习题 38: 阅读代码 现在去找一些 Python 代码阅读一下.你需要自己找代码,然后从中学习一些东西.你学到的东西已经足够让你看懂一些代码了,但你可能还无法理解这些代码的功能.这节课我要教给你的是 ...
- asp.net超过字数限制用省略号...表示
显示8个字,多于8个字, 用...表示 <asp:Repeater runat="server" ID="MsgLists"> ...
- JavaScript工作机制:V8 引擎内部机制及如何编写优化代码的5个诀窍
概述 JavaScript引擎是一个执行JavaScript代码的程序或解释器.JavaScript引擎可以被实现为标准解释器,或者实现为以某种形式将JavaScript编译为字节码的即时编译器. 下 ...
- C 中重载一词中的“重”字读ZHONG4还是CHONG2?
in my opinion: overload: 重zhong4载override overwrite:覆盖,改写,重写.//csdn上有人问过,没有overwrite这个词 http://bbs.c ...
- 通过describe命令学习Kubernetes的pod属性详解
我们可以首先使用kubectl get pods命令得到pod列表,比如我们想研究pod nginx-storage-pod的明细: 使用命令kubectl describe pod nginx-st ...
- 【[NOI2018]你的名字】
题目 可能是一个乱搞做法,同时也跪求有人能帮我分析一下复杂度 还是先来看比较简单的\(68pts\),也就是\(l=1,r=|S|\)的情况 我们可以直接把\(S\)串和所有的\(T\)串一起建一个广 ...
- 【[HAOI2008]木棍分割】
没写过几道的前缀和优化\(dp\) 第一问是小学生难度的二分 第二问就直接\(dp\)了 设\(dp[i][j]\)表示当前分割点在\(i\)之后,前面一共分割了\(j\)段的方案数 利用前缀和单调性 ...
- require,import区别?
遵循的模块化规范不一样 模块化规范:即为 JavaScript 提供一种模块编写.模块依赖和模块运行的方案.谁让最初的 JavaScript 是那么的裸奔呢——全局变量就是它的模块化规范. requi ...