七夕情人节丘比特射箭小游戏

日期：2020-06-10 栏目：程序人生浏览：次

HTML

<div> <div>勇士榜</div> <ul> <li>鲁大师成功射中！</li> <li>鲁大师成功射中！</li> <li>鲁大师成功射中！</li> <li>鲁大师成功射中！</li> <li>鲁大师成功射中！</li> <li>鲁大师成功射中！</li> <li>鲁大师成功射中！</li> <li>鲁大师成功射中！</li> <li>鲁大师成功射中！</li> </ul> </div> <div> <div><h3>七夕♥爱神带你迎好礼</h3> </div> <div></div> <img src="https://www.jb51.net/article/love.png"> <div> <div> <h2>哇,神箭手哎,恭喜你！</h2> <img src="https://www.jb51.net/article/qinlv.png"> <img src=""><br> <span></span> </div> <a href="javascript:init();">再来一次</a> </div> <div></div> <a href="javascript:void(0)">10秒</a> <a href="javascript:shoot();" > 放箭 <span>x10</span></a> </div> <div> <div><img src="https://www.jb51.net/article/flower/1.gif"> <span>258爱我吧</span> <span>x0朵</span> </div> <div><img src="https://www.jb51.net/article/flower/2.gif"> <span>520我爱你</span> <span>x0朵</span> </div> <div><img src="https://www.jb51.net/article/flower/3.gif"> <span>1314一生一世</span> <span>x0朵</span> </div> <div><img src="https://www.jb51.net/article/flower/4.gif"> <span>2514爱我一世</span> <span>x0朵</span> </div> <div><img src="https://www.jb51.net/article/flower/5.gif"> <span>3344生生世世</span> <span>x0朵</span> </div>

CSS

javascript

var donghua; $(function(){ love(); donghua=setInterval(love,2000); }) function shoot(){ //射击数量减少 var num=$("#shootnum").html().match(/\d+/g); if(num<=0){ alert("你只有0只箭了"); return false; } var shootnum=parseInt(num)-1; $("#shootnum").html("x"+shootnum); $(".arrow").show(); $(".start").hide(); var speed=getShootSpeed(); var arrowtop=$(".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(); } }) } //物体动画效果 function love(){ $("#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(){ }) }) } //初始化 var zhunbei; function init(){ $(".arrow").css({left:160}); $(".arrow").hide(); $("#fower").hide(); $(".restart").hide(); $(".djs").show(); zhunbei=setInterval(djs,200); $(".prize").hide(); love(); donghua=setInterval(love,2000); } //箭的速度 function getShootSpeed(){ return Math.floor(Math.random()*1500)+500; } //鲜花显示中奖 function flower(){ var flowerid=Math.floor(Math.random()*4)+1; $("#flower").attr("src","./flower/"+flowerid+".gif"); clearInterval(donghua); $("#love").stop(); $(".qiubite").stop(); setTimeout(function(){ $("#love").attr("src","https://www.jb51.net/article/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) +"》"); var num=$("#flower_"+flowerid).html(); var total=parseInt(num.match(/\d+/g))+1; $("#flower_"+flowerid).html("x"+total+"朵"); },800) } //倒计时显示开始 var lasttime=10; function djs(){ var now=lasttime--; $(".djs").html(now+"秒"); if(lasttime<0){ lasttime=10; $(".djs").hide(); $(".start").show(); $(".djs").html("10秒"); clearInterval(zhunbei); } } function getFlowerName(id){ var fname=new Array(); fname[1]="爱我吧"; fname[2]="我爱你"; fname[3]="一生一世"; fname[4]="爱我一世"; fname[5]="生生世世"; return fname[id]; } function getGongxi(id){ var fname=new Array(); fname[1]="哎呦，看好你！"; fname[2]="太棒了"; fname[3]="哇，堪比职业选手"; fname[4]="亲，你是我的偶像呦！"; fname[5]="哇！你是神箭手哎!"; return fname[id]; }

转载注明出处：https://www.heiqu.com/wggxsf.html

七夕情人节丘比特射箭小游戏

相关推荐