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


Posted in Javascript onAugust 20, 2015

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

最后附上下载   演示

Javascript 相关文章推荐
浅谈Javascript 执行顺序
Dec 18 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
js脚本分页代码分享(7种样式)
Aug 19 #Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 #Javascript
JS文字球状放大效果代码分享
Aug 19 #Javascript
IE6兼容透明背景图片及解决方案
Aug 19 #Javascript
JavaScript实现表格快速变色效果代码
Aug 19 #Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 #Javascript
JS时间特效最常用的三款
Aug 19 #Javascript
You might like
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
php 浮点数比较方法详解
2017/05/05 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python issubclass 和 isinstance函数
2019/07/25 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
售房委托书
2014/08/30 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书