国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

七夕情人節丘比特射箭小游戲

2019-11-20 11:47:23
字體:
來源:轉載
供稿:網友

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

最后附上下載   演示

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 福建省| 达孜县| 盘山县| 民乐县| 新竹县| 白水县| 婺源县| 蓬莱市| 阿图什市| 雅安市| 古丈县| 如东县| 阳山县| 民乐县| 台东县| 都江堰市| 牡丹江市| 东平县| 揭西县| 博白县| 霍山县| 长子县| 洛浦县| 济宁市| 万荣县| 九龙县| 屏山县| 丹东市| 天全县| 高雄市| 扬州市| 秭归县| 丹棱县| 惠安县| 黄浦区| 邯郸县| 夹江县| 江川县| 进贤县| 筠连县| 宝清县|