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


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 面向对象编程基础:封装
Aug 21 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
深入密码加salt原理的分析
2013/06/06 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
如何离线执行php任务
2017/02/21 PHP
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python探索之自定义实现线程池
2017/10/27 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python多进程间通信代码实例
2019/09/30 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
运动会入场解说词
2014/02/07 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
补充协议书
2015/01/28 职场文书
2015毕业寄语大全
2015/02/26 职场文书
史上最牛的辞职信
2015/02/28 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
关于的python五子棋的算法
2022/05/02 Python