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

前端之家收集整理的这篇文章主要介绍了七夕情人节丘比特射箭小游戏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

载入jQuery

HTML

  • 鲁大师 成功射中!
  • 鲁大师 成功射中!
  • 鲁大师 成功射中!
  • 鲁大师 成功射中!
  • 鲁大师 成功射中!
  • 鲁大师 成功射中!
  • 鲁大师 成功射中!
  • 鲁大师 成功射中!
  • 鲁大师 成功射中!

<div class="stage">
<div class="title">

七夕♥爱神带你迎好礼

<img src="./love.png" id="love">
<div class="prize">

<div class="jiangpin">
<h2 class="gongxi">哇,神箭手哎,恭喜你!
<img src="./qinlv.png">
<img src="" id="flower">

<span id="flowername">

<div class="arrow">

<a href="javascript:void(0)" class="btn djs">10秒

放箭 <span id="shootnum">x10

<div class="tools">
<div class="lipin"><img src="./flower/1.gif">
<span class="name">258爱我吧
<span id="flower_1">x0朵

<span id="flower_2">x0朵

<span id="flower_3">x0朵

<span id="flower_4">x0朵

CSS

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.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,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;}

javascript

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"},function(){

})
})

$(".qiubite").animate({top:"20"},function(){
$(".qiubite").animate({top:"300"},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];
}

最后附上

原文链接:https://www.f2er.com/js/52825.html
javascript七夕小游戏情人节

猜你在找的JavaScript相关文章