七夕情人节丘比特射箭小游戏
载入jQuery
<scriptsrc="./jquery-1.11.0.min.js"type="text/javascript"></script>
HTML
<divclass="rank"> <divclass="bangdan">勇士榜</div> <ul> <li>鲁大师成功射中!</li> <li>鲁大师成功射中!</li> <li>鲁大师成功射中!</li> <li>鲁大师成功射中!</li> <li>鲁大师成功射中!</li> <li>鲁大师成功射中!</li> <li>鲁大师成功射中!</li> <li>鲁大师成功射中!</li> <li>鲁大师成功射中!</li> </ul> </div> <divclass="stage"> <divclass="title"><h3>七夕♥爱神带你迎好礼</h3> </div> <divclass="qiubite"></div> <imgsrc="./love.png"id="love"> <divclass="prize"> <divclass="jiangpin"> <h2class="gongxi">哇,神箭手哎,恭喜你!</h2> <imgsrc="./qinlv.png"> <imgsrc=""id="flower"><br> <spanid="flowername"></span> </div> <ahref="javascript:init();"class="btnrestart">再来一次</a> </div> <divclass="arrow"></div> <ahref="javascript:void(0)"class="btndjs">10秒</a> <ahref="javascript:shoot();"class="btnstart"> 放箭<spanid="shootnum">x10</span></a> </div> <divclass="tools"> <divclass="lipin"><imgsrc="./flower/1.gif"> <spanclass="name">258爱我吧</span> <spanid="flower_1">x0朵</span> </div> <divclass="lipin"><imgsrc="./flower/2.gif"> <spanclass="name">520我爱你</span> <spanid="flower_2">x0朵</span> </div> <divclass="lipin"><imgsrc="./flower/3.gif"> <spanclass="name">1314一生一世</span> <spanid="flower_3">x0朵</span> </div> <divclass="lipin"><imgsrc="./flower/4.gif"> <spanclass="name">2514爱我一世</span> <spanid="flower_4">x0朵</span> </div> <divclass="lipin"><imgsrc="./flower/5.gif"> <spanclass="name">3344生生世世</span> <spanid="flower_5">x0朵</span> </div>
CSS
<styletype="text/css"> body{font-family:"微软雅黑"} .qiubite{background:url(./qiubite.png)no-repeat; width:150px; height:150px; position:absolute; left:10px; top:120px; } #love{ position:absolute; top:120px; right:10px; width:120px; height:120px; } .stage{ background:url(./bg.jpg)no-repeat; width:800px;height:500px;position:relative;margin:0auto;border:1pxsolid#ccc;} .start{ } .btn{ position:absolute;left:350px; background:url(./bow.png)no-repeat; background-color:#f0ad4e; border-color:#eea236; height:34px; top:400px; display:block; border-radius:4px; text-decoration:none; line-height:40px; color:#fff; width:100px; text-indent:2em; } .restart{display:none;} .start:hover{ background-color:#eea236; } .arrow{background:url(./arrow.png)no-repeat;width:100px;height:50px; position:absolute;top:120px;left:160px; display:none; } .prize{ text-align:center; display:none; position:absolute; left:0px; top:0px; width:800px; height:500px; background:rgba(0,0,0,0.6); z-index:2; } .jiangpin{ width:580px; height:180px; color:#fff; font-size:12px; margin:100pxauto; } .restart{display:none;}; #love{display:block;} .title{text-align:center;color:#fff;font-size:30px;} .tools{margin:0auto; width:800px; height:160px; top:500px; left:250px; } .tools.lipin{float:left;width:160px;text-align:center;position:relative;} .tools.lipinspan{display:block;} .tools.lipin.name{position:absolute; top:120px; width:160px; background:rgba(255,255,255,0.81); text-align:center; font-size:12px;} .djs{display:none;background:#666;} .rank{ width:300px; float:left; border:3pxsolid#973a29; } .rankul{list-style:none;padding:0;} .rankulli{background:url(./bow.png)no-repeat;text-indent:3em; font-size:15px; line-height:30px; border-bottom:1pxdashed#ccc} .rank.bangdan{background:#973a29;color:#e1c148;font-size:18px;font-weight:700;text-align:center;} </style>
javascript
vardonghua; $(function(){ love(); donghua=setInterval(love,2000); }) functionshoot(){ //射击数量减少 varnum=$("#shootnum").html().match(/\d+/g); if(num<=0){ alert("你只有0只箭了"); returnfalse; } varshootnum=parseInt(num)-1; $("#shootnum").html("x"+shootnum); $(".arrow").show(); $(".start").hide(); varspeed=getShootSpeed(); vararrowtop=$(".qiubite").offset().top+20; arrowtop=parseInt(arrowtop); $(".arrow").css({"top":arrowtop}); $(".arrow").animate({"left":"600"},speed,function(){ if(arrowtop>90&&arrowtop<270){ flower(); }else{ alert("射飞了!"); clearInterval(donghua); $("#love").stop(); $(".qiubite").stop(); init(); } }) } //物体动画效果 functionlove(){ $("#love").animate({width:"100",height:"100"},1000,function(){ $("#love").animate({width:"120",height:"120"},1000,function(){ }) }) $(".qiubite").animate({top:"20"},1000,function(){ $(".qiubite").animate({top:"300"},1000,function(){ }) }) } //初始化 varzhunbei; functioninit(){ $(".arrow").css({left:160}); $(".arrow").hide(); $("#fower").hide(); $(".restart").hide(); $(".djs").show(); zhunbei=setInterval(djs,200); $(".prize").hide(); love(); donghua=setInterval(love,2000); } //箭的速度 functiongetShootSpeed(){ returnMath.floor(Math.random()*1500)+500; } //鲜花显示中奖 functionflower(){ varflowerid=Math.floor(Math.random()*4)+1; $("#flower").attr("src","./flower/"+flowerid+".gif"); clearInterval(donghua); $("#love").stop(); $(".qiubite").stop(); setTimeout(function(){ $("#love").attr("src","./love.png"); $("#love").hide(); $(".arrow").hide(); },1000); //增加暴击效果 $("#love").attr("src","./sj.png"); $("#love").fadeOut(); setTimeout(function(){ $(".restart").show(); $(".prize").show(); $(".gongxi").html(getGongxi(flowerid)); $("#flowername").html("恭喜你获得了《"+getFlowerName(flowerid)+"》"); varnum=$("#flower_"+flowerid).html(); vartotal=parseInt(num.match(/\d+/g))+1; $("#flower_"+flowerid).html("x"+total+"朵"); },800) } //倒计时显示开始 varlasttime=10; functiondjs(){ varnow=lasttime--; $(".djs").html(now+"秒"); if(lasttime<0){ lasttime=10; $(".djs").hide(); $(".start").show(); $(".djs").html("10秒"); clearInterval(zhunbei); } } functiongetFlowerName(id){ varfname=newArray(); fname[1]="爱我吧"; fname[2]="我爱你"; fname[3]="一生一世"; fname[4]="爱我一世"; fname[5]="生生世世"; returnfname[id]; } functiongetGongxi(id){ varfname=newArray(); fname[1]="哎呦,看好你!"; fname[2]="太棒了"; fname[3]="哇,堪比职业选手"; fname[4]="亲,你是我的偶像呦!"; fname[5]="哇!你是神箭手哎!"; returnfname[id]; }
最后附上下载 演示