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


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参数的小问题
Mar 02 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
javascript数组去掉重复
2011/05/12 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python 安装impala包步骤
2020/03/28 Python
最新pycharm安装教程
2020/11/18 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
用Python写一个for循环的例子
2016/07/19 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
后勤工作职责
2013/12/22 职场文书
企业消防安全制度
2014/02/02 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
本科应届生自荐信
2014/06/29 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
关于安全的广播稿
2014/10/23 职场文书
教师求职自荐信
2015/03/26 职场文书