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

前端技术 2023/09/03 JavaScript

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

最后附上下载   演示

本文地址:https://www.stayed.cn/item/7065

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。