七夕情人节丘比特射箭小游戏
载入jQuery
<script src="./jquery-1.11.0.min.js" type="text/javascript"></script>
HTML
<div class="rank"> <div class="bangdan">勇士榜</div> <ul> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> </ul> </div> <div class="stage"> <div class="title"><h3>七夕♥爱神带你迎好礼</h3> </div> <div class="qiubite"></div> <img src="./love.png" id="love"> <div class="prize"> <div class="jiangpin"> <h2 class="gongxi">哇,神箭手哎,恭喜你!</h2> <img src="./qinlv.png"> <img src="" id="flower"><br> <span id="flowername"></span> </div> <a href="javascript:init();" class="btn restart">再来一次</a> </div> <div class="arrow"></div> <a href="javascript:void(0)" class="btn djs">10秒</a> <a href="javascript:shoot();" class="btn start" > 放箭 <span id="shootnum">x10</span></a> </div> <div class="tools"> <div class="lipin"><img src="./flower/1.gif"> <span class="name">258爱我吧</span> <span id="flower_1">x0朵</span> </div> <div class="lipin"><img src="./flower/2.gif"> <span class="name">520我爱你</span> <span id="flower_2">x0朵</span> </div> <div class="lipin"><img src="./flower/3.gif"> <span class="name">1314一生一世</span> <span id="flower_3">x0朵</span> </div> <div class="lipin"><img src="./flower/4.gif"> <span class="name">2514爱我一世</span> <span id="flower_4">x0朵</span> </div> <div class="lipin"><img src="./flower/5.gif"> <span class="name">3344生生世世</span> <span id="flower_5">x0朵</span> </div>
CSS
<style type="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:0 auto;border:1px solid #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:100px auto; } .restart{display:none;}; #love{display:block;} .title{text-align:center;color:#fff;font-size:30px;} .tools{margin:0 auto; width:800px; height:160px; top:500px; left:250px; } .tools .lipin{float:left;width:160px;text-align: center;position:relative;} .tools .lipin span{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:3px solid #973a29; } .rank ul{list-style:none;padding:0;} .rank ul li{background:url(./bow.png) no-repeat; text-indent: 3em; font-size: 15px; line-height: 30px; border-bottom: 1px dashed #ccc} .rank .bangdan{background:#973a29;color:#e1c148;font-size:18px;font-weight:700;text-align:center;} </style>
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","./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]; }
最后附上下载 演示
赞 (0)