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


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重要知识更新
Jul 08 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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显示MySQL数据的三种方法
2008/06/05 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
28个JS验证函数收集
2010/03/02 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
js 函数的副作用分析
2011/08/23 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中的内置函数getattr()介绍及示例
2014/07/20 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
大学生蛋糕店创业计划书
2014/01/13 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL