七夕情人節(jié)丘比特射箭小游戲
更新時間：2015年08月20日 09:05:51 投稿：hebedich
本文給大家分享的是使用javascript實(shí)現(xiàn)的七夕情人節(jié)丘比特射箭小游戲的代碼，并附上源碼下載，誰說程序猿就不懂得浪漫呢，小伙伴們感覺拿去獻(xiàn)寶吧（當(dāng)然了，首先你得有女票才行^_^）
載入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(){
//射擊數(shù)量減少
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]="哇，堪比職業(yè)選手";
fname[4]="親，你是我的偶像呦！";
fname[5]="哇！你是神箭手哎!";
return fname[id];
}
相關(guān)文章
基于jquery實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天針對這個JQuery里面的toggle聊幾句，文章中涉及到了一些問題望牛牛們能幫忙解惑一下。2009-11-11
這篇文章主要介紹了jquery獲取選中的文本和值的方法,需要的朋友可以參考下2014-07-07
jquery實(shí)現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果,涉及jQuery動態(tài)操作頁面元素的顯示及隱藏技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
頁面倒計時小編在很多網(wǎng)站都有這樣的需求，今天小編給大家分享一段jq代碼實(shí)現(xiàn)頁面倒計時并刷新效果，代碼簡單易懂，非常不錯，需要的的朋友參考下2017-03-03
本文給大家分享了一個jQuery操作session的插件jQuerysession，并做了簡單介紹，及基本語法，非常不錯的一個插件，推薦給小伙伴們。2015-01-01
在使用$(#id).attr(color) 獲取顏色的時候，ie和ff是不同的，下面有個示例，大家可以參考下2014-03-03
本篇文章是對jquery中的div顯示和隱藏特效demo進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
jQuery中bind,live,delegate與one方法的用法及區(qū)別解析
本篇文章主要是對jQuery中bind,live,delegate與one方法的用法及區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
Jquey拖拽控件Draggable使用方法(asp.net環(huán)境)
使用時首先依次引用Jquery，Jquery-Ui ，Draggable三個Js。然后在js中編寫相應(yīng)的代碼，相關(guān)代碼說明請看程序中的注釋。2010-09-09