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

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

最后附上下载   演示

(0)

相关推荐

  • JS小游戏之极速快跑源码详解

    本文实例讲述了JS小游戏的极速快跑源码,分享给大家供大家参考.具体如下: 游戏运行后如下图所示: Javascript部分代码如下: /** 极速快跑 * Author: fdipzone * Date: 2012-07-15 * Ver: 1.0 */ var gameimg = ['images/start.png', 'images/start_over.png', 'images/go.png', 'images/go_over.png', 'images/running.gif', '

  • JS小游戏之宇宙战机源码详解

    本文实例讲述了JS小游戏的宇宙战机源码,分享给大家供大家参考.具体介绍如下: 一.游戏介绍: 这是一款飞行射击游戏,纵向,共六关. 二.游戏需求: 1.战机可发射子弹,子弹可通过获取道具升级. 2.战机可放bomb,可获取道具增加数量. 3.战机可蓄力攻击. 4.道具有三种,分别是升级子弹,增加bomb数量,增加战机数量. 5.每关音乐不同. 6.战机被击落后再进入战场,有保护状态. 7.敌机AI设计. 游戏运行如下图所示: 完整实例代码点击此处本站下载. 三.Javascript源码部分: /

  • js猜数字小游戏的简单实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • JS写的数字拼图小游戏代码[学习参考]

    复制代码 代码如下: <html> <head> <title>拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : middle ;

  • Nodejs实现多人同时在线移动鼠标的小游戏分享

    最近因为项目需要,所以研究了一下nodejs的websocket实现,socket.io,这是nodejs后台应用websocket广泛使用的框架. 准备工作 1.安装socket.io,使用命令npm install socket.io 2.windows系统的话,需要vc编译环境,因为安装socket.io的时候,会编译vc代码 游戏基本原理 1.服务器监听客户端的连接 2.客户端连接成功时候,绑定页面移动鼠标事件,事件里处理发送当前坐标给服务器 3.服务器保存一个全局的坐标对象,并以客户端

  • 纯javascript模仿微信打飞机小游戏

    七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

  • JS小游戏之象棋暗棋源码详解

    本文实例讲述了JS小游戏的象棋暗棋源码,分享给大家供大家参考.具体如下: 游戏运行后如下图所示: Javascript 部分: /** chinese chess * Author: fdipzone * Date: 2012-06-24 * Ver: 1.0 */ var gameimg = ['images/a1.gif','images/a2.gif','images/a3.gif','images/a4.gif','images/a5.gif','images/a6.gif','imag

  • js实现俄罗斯方块小游戏分享

    复制代码 代码如下: <!doctype html><html><head><style type="text/css">body { background:#000; font:25px/25px 宋体;}#box { float:left;width:252px;border:#999 20px ridge;color:#9f9;text-shadow:2px 3px 1px #0f0; }#info { float:left;col

  • JS小游戏之仙剑翻牌源码详解

    本文实例讲述了JS小游戏的仙剑翻牌源码,是一款非常优秀的游戏源码.分享给大家供大家参考.具体如下: 一.游戏介绍: 这是一个翻牌配对游戏,共十关. 1.游戏随机从42张牌中抽取9张进行游戏,每组为2张相同的牌,共18张牌. 2.连续翻到两张相同的为胜利,当9组全部翻到则过关.如不是翻到连续两张相同的,则需要重新翻. 3.游戏共有10关,在规定时间内通过为挑战成功. 4.如果某关在规定时间内没有通过,则会从当前关继续游戏. 5.游戏中的卡牌图片与音乐均为大宇公司所有. 6.需要支持html5的浏览

  • 用js做一个小游戏平台 (一)

    记得上班写代码时,我们技术总监总说是要先"设计",那就先"设计"吧. ps:我是新手大家多多见谅. .网页游戏区域.就是说需要知道游戏在网页上的区域,如下: 在网页中插入一个div,设定宽高和id, <div id="GameFrame" style="width:400;height:400"></div> 然后再js中得到该对象, var _GameFrame = document.getEleme

  • js实现大转盘抽奖游戏实例

    本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

随机推荐