七夕情人节丘比特射箭小游戏
载入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];
}
最后附上下载 演示