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

});

});
 
 

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

时间: 2024-10-12 02:41:01

jQuery 打气球小游戏 点击气球爆炸效果的相关文章

自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药

自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm)这个游戏制作的.仅为学习Unity之用.图片大部分是自己画的,少数是从网上搜来的.您可以到我的github页面(https://github.com/bitzhuwei/TankHero-2D)上得到工程源码. 本篇主要记录声音.场景切换.武器弹药等. 关于碰撞 先插一句.上一篇记录了Unity3

js实现点气球小游戏

二话不说直接贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点气球</title> </head> <body> <!-- 实现功能: js生成div 在页面上向上移动 已不同的速度 点击气球 气球爆炸消失 1.js生成div标签 并初始化 1 一次生成10个 2

jQuery仿IOS小游戏设计---单身狗的逃避之旅

看看<程序员>杂志,最近都被html5游戏和微信平台刷了屏,未来是怎样的趋势不敢说,不过日前就我所在的创业团队,想推广自己的公众号,其中有一项内容就是做出浙大特色的小游戏,宣传部的帮我玩了好多游戏,有个ios上面的小游戏smove,游戏心意不错,设计简单, 游戏性好,便改编成了这个单身狗躲避秀恩爱的游戏.点此试玩游戏使用了jquery jquery_mobile库和jquery rotate插件 <script src="http://ajax.aspnetcdn.com/aj

js、jQuery实现2048小游戏

一.游戏简介:  2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合并,组成更大的数字,每次移动或合并后会增加一个数字. 当16宫格中没有空格子,且四个方向都无法操作时,游戏结束. 三. 游戏目的: 目的是合并出2048这个数字,获得更高的分数. 四. 游戏截图:  五.先来玩一下: 开始游戏 查看源码 六.游戏实现原理: 使用js.jQuery实现了PC版及手机版,实现原理是一样

JQuery实现2048小游戏

最近用Jqery写了一个2048小游戏,由于是第一次写小游戏,所以就选了一个基础的没什么难度游戏.具体实现如下: 首先在开发时将整个游戏分成两层(自认为),底层是游戏的数据结构以及对数据的操作,上层是显示出来的用户界面.底层选择使用一个4x4的二维数组,整个游戏的数据操作都围绕着这个二维数组进行. [一]游戏基础界面 1 <div id="game"> 2 <div id="header"> 3 <h1>1024</h1&g

jquery制作打地鼠小游戏

效果图: 素材: bg.jpg hole.pngmole.png <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scal

js消除小游戏(极简版)`

js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div"></div> </div>     (2)简单的基础样式 * { margin: 0; padding: 0; } div.box { width: 1000px; height: 700px; border: 1px solid #008B8B; box-sizing:

css3+jquery+js做的翻翻乐小游戏

主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: 1 <div class="container"> 2 <div class="side"> 3 4 <div class="front"> 5 <!-- 正面 --> 6 </div> 7 8 <div class="back&qu

jQuery拼图小游戏

jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td").click(function () { //获取点击的图片的id id = parseInt($(this).prop("id")); //向下 if (id + 3 < 10 && $("td[id=" + (id + 3) + &