载入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];}

最后附上下载 演示