我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
你的谢不肉掘友,在去年的端午pick了一个百度划龙舟🐲🛶的小游戏,很nice的味道,🤔要不咱手写一个?
不说了➡️开整👨🔧
先是去 图片素材网 找了一些免费使用无侵权的端午节图标
就选你了🤌——🐲龙舟小子(哈哈哈哈哈)
然后选择在vs code里面新建一个端午节代码文件夹,里面创建一个二级文件夹 duanwu/img文件
然后将下载到本地img图标文件放置于duanwu/img文件夹内
如下图所示:有人物划船🚣♀️ 和 龙舟 🐲🛶 以及水花 🌊 、游戏完成✅内容图标(需要ps口吐并且文件命名为bg.png)
赛道🎢的图标,用Photoshop软件将背景扣掉,形成透明的文件,还有一个叉❌的图标(命名为bg2.png)
棍子的图标🪄(命名为cur.ico)
当然还有度娘的敲鼓🥁图标(放置于文件夹的根目录下,)
最后需要一个flash动画的swf文件,用于动作捕捉,和物体的移动(命名为drum.swf放置于img文件夹中,用于调整所有的img文件的移动)
“swf(shock wave flash)是Macromedia（现已被ADOBE公司收购）公司的动画设计软件Flash的专用格式，被广泛应用于网页设计、动画制作等领域，swf文件通常也被称为Flash文件。”
完成之后,咱们开始写html端的index.html(放在文件夹根目录下,命名为duanwu-logo.jpg)
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>端午节龙舟小游戏</title>
<style>
html{overflow-y:auto}
body{font:12px arial;text-align:center;background:#fff}
td{text-align:left}
img{border:0}
a{color:#00c}
a:active{color:#f60}
#u{color:#999;padding:4px 10px 5px 0;text-align:right}
#u a{margin:0 5px}
#u .reg{margin:0}
#m{width:680px;margin:0 auto;}
</style>
<script type="text/javascript">function h(obj){obj.style.behavior='url(#default#homepage)';var a = obj.setHomePage('http://www.codefans.net');}</script></head>
<body>
<div id="u"></div>
<div id="m"><p id="lg"><img src="duanwu-logo.jpg" width="270" height="129" usemap="#mp"><map name="mp">
<area shape="rect" coords="-3,-27,312,131" href="http://www.codefans.net/" target="_blank" title="端午节龙舟小游戏" onMouseDown="return ns_c({'fm':'behs','tab':'bdlogo'})">
</map></p>
</div>
</body>
</html>
<script charset="gbk" src="duanwu.js"></script>
<!--ba86aa868389874a-->
即:
在这段html代码里面主要是定义了前端的标题,布局,body,img格式,color色号,宽度,长度以及标签样式等等
然后是写他的js文件,同样是放置于文件夹的根目录下
var Duanwu={isIE:navigator.userAgent.indexOf("MSIE")!=-1&&!window.opera,domain:"duanwu",url:"duanwu",started:false,ele:{holder:"dw_holder",drum:"dw_logo",drumface:"dw_drumface",closebtn:"dw_close",info:"dw_info"},text:{alt:"��������������ѡ������",pick:"����ѡ���������",begin:"���Ŀ�ʼ�������õ�Խ�컮��Խ��Ŷ"},data:{selected:0,inited:false,start:false,winT:null,rndSpeedT1:null,rndSpeedT2:null,boating:[{}],firework:[]},G:function(A){return document.getElementById(A)},addEvent:function(C,B,A){if(window.attachEvent){C.attachEvent("on"+B,A)}else{if(window.addEventListener){C.addEventListener(B,A,false)}}},addStyle:function(B){if(this.isIE){var C=document.createStyleSheet();C.cssText=B}else{var A=document.createElement("style");A.type="text/css";A.appendChild(document.createTextNode(B));document.getElementsByTagName("HEAD")[0].appendChild(A)}},createClass:function(){return function(){this.initialize.apply(this,arguments)}},initStyle:function(){var B=this;var A=[];A.push("html{_background:#fff url(about:blank) fixed}");A.push("body{margin:0}");A.push(".dw_down{background:url("+B.domain+"/img/bg.png) no-repeat 1px -467px}");A.push("#dw_holder{width:100%;height:240px;text-align:left;position:fixed;left:0;bottom:0;_position:absolute;_top:expression(eval(document.documentElement.clientHeight + document.documentElement.scrollTop - 240) + 'px');z-index:9999}");A.push("#dw_info{font:bold 16px arial;position:absolute;left:20px;top:-80px;z-index:1}");A.push("#dw_close{width:31px;height:31px;display:block;position:absolute;z-index:1000;bottom:235px;right:10px;background:url("+B.domain+"/img/bg2.png) no-repeat 0 -270px;outline:none}");A.push("#dw_close:hover{background-position:0 -229px}");A.push("#dw_flash{width:20px;height:20px;position:absolute;z-index:0;bottom:20px;right:20px}");A.push("#dw_route_1{height:80px;position:relative;z-index:1}");A.push("#dw_route_2{height:80px;background:#00f8fe;position:relative;z-index:2}");A.push("#dw_route_3{height:80px;background:#17D7F4;position:relative;z-index:2}");A.push("#dw_group_1,#dw_group_2,#dw_group_3{width:214px;height:75px;position:absolute;left:0;top:-40px}");A.push("#dw_boat_1,#dw_boat_2,#dw_boat_3{width:214px;height:70px;background:url("+B.domain+"/img/bg.png) no-repeat;position:absolute;left:0;top:0;z-index:1}");A.push("#dw_boat_1{background-position:0 -245px}");A.push("#dw_boat_2{background-position:0 -320px}");A.push("#dw_boat_3{background-position:0 -395px}");A.push("#dw_wave_1,#dw_wave_2,#dw_wave_3{width:100%;height:30px;position:absolute;top:50px;z-index:0}");A.push("#dw_wave_1{background:#00f8fe}");A.push("#dw_wave_2{background:#17D7F4}");A.push("#dw_wave_3{background:#0087F0}");A.push("#dw_boatmen_1_1,#dw_boatmen_1_2,#dw_boatmen_1_3,#dw_boatmen_1_4,#dw_boatmen_2_1,#dw_boatmen_2_2,#dw_boatmen_2_3,#dw_boatmen_2_4,#dw_boatmen_3_1,#dw_boatmen_3_2,#dw_boatmen_3_3,#dw_boatmen_3_4{width:110px;height:76px;background:url("+B.domain+"/img/bg.png) no-repeat;position:absolute;}");A.push("#dw_boatmen_2_1,#dw_boatmen_2_2,#dw_boatmen_2_3,#dw_boatmen_2_4{background-position:0 -76px}");A.push("#dw_boatmen_3_1,#dw_boatmen_3_2,#dw_boatmen_3_3,#dw_boatmen_3_4{background-position:0 -152px}");A.push("#dw_boatmen_1_1,#dw_boatmen_2_1,#dw_boatmen_3_1{left:-5px;top:10px;z-index:5}");A.push("#dw_boatmen_1_2,#dw_boatmen_2_2,#dw_boatmen_3_2{left:30px;top:10px;z-index:4}");A.push("#dw_boatmen_1_3,#dw_boatmen_2_3,#dw_boatmen_3_3{left:65px;top:10px;z-index:3}");A.push("#dw_boatmen_1_4,#dw_boatmen_2_4,#dw_boatmen_3_4{left:100px;top:10px;z-index:2}");A.push(".dw_water_a,.dw_water_b{background:url("+B.domain+"/img/bg.png) no-repeat;position:absolute;z-index:1;display:none}");A.push(".dw_water_a{width:57px;height:43px;left:-28px;top:28px;background-position:-232px -240px}");A.push(".dw_water_b{width:57px;height:43px;left:165px;top:33px;background-position:-292px -240px}");A.push(".dw_wave_a,.dw_wave_b,.dw_wave_c{width:100%;height:50px;background:url("+B.domain+"/img/bg2.png) repeat-x;position:absolute;}");A.push(".dw_wave_a{height:40px;top:10px;z-index:1}");A.push(".dw_wave_b{top:18px;z-index:13}");A.push(".dw_wave_c{top:25px;z-index:14}");A.push("#dw_txt{width:397px;height:60px;display:inline-block;margin:-10px auto;position:relative;z-index:0}");A.push(".dw_txt_win{background:url("+B.domain+"/img/bg.png) no-repeat 0 -597px}");A.push(".dw_txt_fail{background:url("+B.domain+"/img/bg.png) no-repeat 0 -535px}");A.push("#dw_mask_holder{width:720px;margin:0 auto;position:relative;z-index:9998}");A.push("#dw_mask{width:720px;position:absolute;left:0;top:0;z-index:1;background:#fff;opacity:0.5;*filter:alpha(opacity=50);}");B.addStyle(A.join(""))},initHtml:function(){var B=[];for(var A=1;A<=3;A++){B.push('<div id="dw_route_'+A+'">');B.push('<div id="dw_group_'+A+'" style="left:0">');B.push('<div id="dw_boat_'+A+'"></div>');B.push('<div id="dw_boatmen_'+A+'_1"></div>');B.push('<div id="dw_boatmen_'+A+'_2"></div>');B.push('<div id="dw_boatmen_'+A+'_3"></div>');B.push('<div id="dw_boatmen_'+A+'_4"></div>');B.push('<div id="dw_water_'+A+'_1" class="dw_water_a"></div>');B.push('<div id="dw_water_'+A+'_2" class="dw_water_b"></div>');B.push("</div>");B.push('<div id="dw_wave_'+A+'_1" class="dw_wave_a"></div>');B.push('<div id="dw_wave_'+A+'_2" class="dw_wave_b"></div>');B.push('<div id="dw_wave_'+A+'_3" class="dw_wave_c"></div>');B.push('<div id="dw_wave_'+A+'"></div>');B.push("</div>")}B.push('<div id="dw_info"></div>');B.push('<a href="#" title="�ر�" id="dw_close" onclick="return false;" onfocus="this.blur()"></a>');var C=document.createElement("div");C.id="dw_holder";C.innerHTML=B.join("");document.body.appendChild(C)},initMask:function(){var D=this;var A=D.G("s_wrap");if(A){var B=document.createElement("div");B.id="dw_mask_holder";document.body.insertBefore(B,A);var C=document.createElement("div");C.id="dw_mask";B.appendChild(C);C.style.height=A.offsetHeight+"px"}},initFlash:function(){var C=this;var A=C.url+"/img/drum.swf";var B=document.createElement("div");B.id="dw_flash";B.innerHTML='<object id="dw_drum" width="20" height="20" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param value="'+A+'" name="movie"><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><embed width="20" height="20" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="dw_drum" wmode="transparent" src="'+A+'"></object>';document.getElementById("dw_holder").appendChild(B)},init:function(){var E=this;if(E.isIE){try{document.execCommand("BackgroundImageCache",false,true)}catch(D){}}document.body.style.cursor="url("+E.domain+"/img/cur.ico),default";E.createLogo();E.addEvent(E.G(E.ele.drum),"mouseover",function(){if(!E.inited){E.initStyle();E.initHtml();E.initMask();E.initFlash();E.setInfo("pick");new WaveEffect("dw_wave_1_1",0,-10,8,1,0.5);new WaveEffect("dw_wave_1_2",40,-65,7,1.5,1.2);new WaveEffect("dw_wave_1_3",10,-10,9,0.8,1.5);new WaveEffect("dw_wave_2_1",0,-118,9,1,0.5);new WaveEffect("dw_wave_2_2",40,-175,7,1.5,1.2);new WaveEffect("dw_wave_2_3",10,-65,8,0.8,1.5);new WaveEffect("dw_wave_3_1",0,-175,9,1,0.5);new WaveEffect("dw_wave_3_2",40,-118,7,1.5,1.2);new WaveEffect("dw_wave_3_3",10,-170,8,0.8,1.4);new BoatRoll("dw_group_1",20,-40);new BoatRoll("dw_group_2",20,-40);new BoatRoll("dw_group_3",20,-40);E.data.boating[1]=new Boating(1);E.data.boating[2]=new Boating(2);E.data.boating[3]=new Boating(3);E.setReady();E.inited=true;E.addEvent(E.G(E.ele.closebtn),"click",function(){E.gameover();E.TJ("close")})}else{E.G(E.ele.holder).style.display="block";var F=E.G("dw_mask_holder");if(F){F.style.display="block"}}});var C="mousedown";var A=navigator.userAgent.toLowerCase();if(/ipad/i.test(A)){C="touchstart";E.addEvent(E.G(E.ele.drum),"touchend",function(F){var F=event||window.event;if(window.event){F.returnValue=false}else{F.preventDefault()}})}E.addEvent(E.G(E.ele.drum),C,function(F){if(E.data.selected!=0){if(!E.data.start){E.data.boating[1].start();E.data.boating[2].start();E.data.boating[3].start();E.data.start=true;E.data.boating[E.data.selected].enControl=true;E.winT=setInterval(function(){E.checkWin()},10);E.G(E.ele.info).style.display="none";if(E.started){E.TJ("restart")}else{E.TJ("start");E.started=true}}E.playFlash();E.data.boating[E.data.selected].play(12);E.G(E.ele.drumface).className="dw_down"}});E.addEvent(E.G(E.ele.drum),"mouseup",function(){E.G(E.ele.drumface).className=""});E.addEvent(window,"resize",function(){if(!E.data.selected){return }for(var F=1;F<=3;F++){E.data.boating[F].distance=document.documentElement.clientWidth}});var B=E.G("kw");if(B){E.addEvent(B,"mousedown",function(){if(E.inited){E.gameover()}});E.addEvent(B,"keydown",function(){if(E.inited){E.gameover()}})}},createLogo:function(){var E=this;var A=E.G("m");if(A){var D=document.createElement("div");D.style.position="relative";D.style.left=0;D.style.top=0;D.style.width="100%";D.style.zoom="1";A.insertBefore(D,E.G("lg"));var C=document.createElement("div");C.id="dw_drumface";C.style.position="absolute";C.style.left=E.G("s_wrap")?"324px":"304px";C.style.top="4px";C.style.width="78px";C.style.height="61px";D.appendChild(C);var B=document.createElement("div");B.id="dw_logo";B.title=E.text.alt;B.style.width="270px";B.style.height="129px";B.style.position="absolute";B.style.left=E.G("s_wrap")?"225px":"205px";B.style.top=0;if(this.isIE){B.style.background="url(about:blank)"}D.appendChild(B);D.style.MozUserSelect="none";D.onselectstart=function(){return false}}},setInfo:function(A){var C=this;var B=C.G(C.ele.info);B.style.display="block";B.innerHTML=C.text[A]},playFlash:function(){try{var B=document.dw_drum||window.dw_drum;B.playNote()}catch(A){}},getGroup:function(B){var B=B||window.event;var A=B.target||B.srcElement;var D=A.id;if(!/group/.test(D)){A=A.parentNode}var C=A.id.split("_")[2];return C},setReady:function(){var B=this;for(var A=1;A<=3;A++){B.addEvent(B.G("dw_group_"+A),"mouseover",function(C){if(B.data.start){return }var D=B.getGroup(C);B.data.boating[D].ready(true)});B.addEvent(B.G("dw_group_"+A),"mouseout",function(C){if(B.data.start){return }var D=B.getGroup(C);if(B.data.selected!=D){B.data.boating[D].ready(false)}});B.addEvent(B.G("dw_group_"+A),"click",function(C){if(B.data.start){return }var D=B.getGroup(C);B.resetReady();B.data.selected=D;B.data.boating[D].ready(true);B.setInfo("begin")})}},resetReady:function(){var B=this;for(var A=1;A<=3;A++){B.data.boating[A].ready(false)}},gameover:function(){var C=this;C.data.selected=0;C.data.inited=false;C.data.start=false;clearInterval(C.winT);clearTimeout(C.rndSpeedT1);clearTimeout(C.rndSpeedT2);for(var B=1;B<=3;B++){C.data.boating[B].end()}C.G(C.ele.holder).style.display="none";C.setInfo("pick");var A=C.G("dw_mask_holder");if(A){A.style.display="none"}},checkWin:function(){var C=this;var B=0;for(var A=1;A<=3;A++){if(C.data.boating[A].arrived){B=A;clearInterval(C.winT);C.showWin(B);C.gameover();break;return }}C.changeSpeed()},showWin:function(E){var G=this;var D=G.G("lm");if(D){D.innerHTML=E==parseInt(G.data.selected)?'<span id="dw_txt" class="dw_txt_win"></span>':'<span id="dw_txt" class="dw_txt_fail"></span>';D.style.color="#f00";D.style.fontSize="28px";var A=G.G("s_wrap"),B=G.G("dw_txt");if(A&&B){B.style.marginTop="5px"}setTimeout(function(){D.innerHTML=""},4000);if(E==parseInt(G.data.selected)){G.TJ("win")}else{G.TJ("lose")}}var F=G.isIE?60:100;for(var C=0;C<4;C++){if(!G.data.firework[C]){G.data.firework[C]=new Firework(F,10,20,500,500,C,"dw"+C)}else{G.data.firework[C].play()}}},changeSpeed:function(){var H=this;if(H.data.selected<=0){return }var E=parseInt(H.data.boating[H.data.selected].obj.style.left);var A,G;switch(H.data.selected){case"1":A=H.data.boating[2];G=H.data.boating[3];break;case"2":A=H.data.boating[1];G=H.data.boating[3];break;case"3":A=H.data.boating[1];G=H.data.boating[2];break}var F=parseInt(A.obj.style.left),D=parseInt(G.obj.style.left);var C=H.data.boating[H.data.selected].speed;if(E-F>50){setTimeout(function(){var I=0.7+Math.random()*0.2;A.setSpeed(C*I)},60)}if(E-D>100){setTimeout(function(){var I=0.6+Math.random()*0.3;G.setSpeed(C*I)},100)}if(F-E>60){var B=1+Math.random()*0.2;A.setSpeed(C*B)}if(D-E>60){var B=1+Math.random()*0.2;G.setSpeed(C*B)}},TJ:function(B,C){var A=window["BD_PS_C"+(new Date()).getTime()]=new Image();A.src="http://nsclick.baidu.com/v.gif?pid=201&pj=duanwu&type="+B+"&t="+new Date().getTime()}};var WaveEffect=Duanwu.createClass();WaveEffect.prototype={initialize:function(A,F,E,C,D,B){this.el=Duanwu.G(A);this.posX=F;this.posY=E;this.count=C;this.stepX=D;this.stepY=B;this.step=0;this.plus=true;this.play()},play:function(){var A=this;setInterval(function(){A.move()},100);A.el.style.backgroundPosition=A.posX+"px "+A.posY+"px"},move:function(){var A=this;if(A.plus){A.step++}else{A.step--}if(A.step>=A.count){A.plus=false}else{if(A.step<=0){A.plus=true}}A.el.style.backgroundPosition=(A.step*A.stepX+A.posX)+"px "+(A.step*A.stepY+A.posY)+"px"}};var BoatRoll=Duanwu.createClass();BoatRoll.prototype={initialize:function(A,C,B){this.el=Duanwu.G(A);this.posX=C;this.posY=B;this.count=10;this.stepX=0;this.stepY=1;this.step=0;this.plus=true;this.play()},play:function(){var A=this;setInterval(function(){A.move()},100);A.el.style.top=A.posY+"px"},move:function(){var A=this;if(A.plus){A.step++}else{A.step--}if(A.step>=A.count){A.plus=false}else{if(A.step<=0){A.plus=true}}A.el.style.top=(A.step*A.stepY+A.posY)+"px "}};var Boating=Duanwu.createClass();Boating.prototype={initialize:function(A){this.group=A;this.obj=Duanwu.G("dw_group_"+A)},init:function(){this.step=4;this.count=0;this.space=110;this.speed=300;this.minSpeed=60;this.maxSpeed=400;this.speedStep=10;this.speedupT=null;this.speeddownT=null;this.moveT=null;this.enControl=false;this.controlCount=5;this.distance=document.documentElement.clientWidth;this.moveSpace=10;this.arrived=false},start:function(){var B=this;B.init();B.move();for(var A=1;A<=3;A++){Duanwu.G("dw_water_"+B.group+"_1").style.display="block";Duanwu.G("dw_water_"+B.group+"_2").style.display="block"}},end:function(){var A=this;clearTimeout(A.speedupT);clearTimeout(A.speeddownT);clearTimeout(A.moveT);A.ready(false);setTimeout(function(){A.resetPos()},50)},play:function(A){var B=this;clearTimeout(B.speedupT);clearTimeout(B.speeddownT);if(A<1){A=10}B.speedStep=A;B.speedup();if(B.enControl){B.controlCount=5;clearTimeout(B.moveT);B.move()}},resetPos:function(){var B=this;B.obj.style.left=0;for(var A=1;A<=3;A++){Duanwu.G("dw_water_"+B.group+"_1").style.display="none";Duanwu.G("dw_water_"+B.group+"_2").style.display="none"}},ready:function(A){var C=this.group;var D=A?"-110px -"+((C-1)*77)+"px":"0 -"+((C-1)*77)+"px";for(var B=1;B<=4;B++){Duanwu.G("dw_boatmen_"+C+"_"+B).style.backgroundPosition=D}},move:function(){var B=this;if(B.enControl){if(B.controlCount--<=0){return }}for(var A=1;A<=4;A++){Duanwu.G("dw_boatmen_"+B.group+"_"+A).style.backgroundPosition=-B.space*B.count+"px "+(1-B.group)*77+"px"}Duanwu.G("dw_water_"+B.group+"_1").style.backgroundPosition="-232px -"+(240+43*B.count)+"px";Duanwu.G("dw_water_"+B.group+"_2").style.backgroundPosition="-292px -"+(240+43*B.count)+"px";B.run();B.count++;if(B.count>=B.step){B.count=0}B.moveT=setTimeout(function(){B.move()},B.speed)},run:function(){var B=this;var A=parseInt(B.obj.style.left)+B.moveSpace;if(A<B.distance-240){B.obj.style.left=A+"px"}else{B.arrived=true;B.end()}},speedup:function(){var A=this;if(A.speed>A.minSpeed){A.speedStep--;if(A.speedStep<0){A.speeddown();return }A.speed-=20;if(A.speed<A.minSpeed){A.speed=A.minSpeed}A.speedupT=setTimeout(function(){A.speedup()},30)}else{A.speeddown()}},speeddown:function(){var A=this;if(A.speed<A.maxSpeed){A.speed+=20;if(A.speed>A.maxSpeed){A.speed=A.maxSpeed}A.speeddownT=setTimeout(function(){A.speeddown()},50)}},setSpeed:function(A){this.speed=A}};var Firework=Duanwu.createClass();Firework.prototype={G:function(A){return document.getElementById(A)},initialize:function(E,A,D,F,C,B,G){this.colors=["#5CEF7C","#F05400","#F02458","#93f","#0cc","#f93"];this.color=B;this.sX=0;this.sY=0;this.offsetX=0;this.arrHeight=0;this.bits=E;this.intensity=A;this.speed=D;this.sWidth=F;this.sHeight=C;this.id=G;this.fade=[];this.pos=[];this.rate=[];this.rizeT=null;this.init()},init:function(){var A=this;A.setWidth();A.createFire();A.play();Duanwu.addEvent(window,"resize",function(){A.setWidth()});A.setScroll();Duanwu.addEvent(window,"scroll",function(){A.setScroll()})},play:function(){var A=this;setTimeout(function(){var B=A.G(A.id+"_lg"),C=A.G(A.id+"_tg");B.style.visibility="visible";C.style.visibility="visible";A.launch()},10);A.riseT=setInterval(function(){A.rise()},10)},createFire:function(){var C=this;var B=document.createElement("div");B.id=C.id+"_firework_holder";B.style.position="absolute";B.style.zIndex="9999";B.style.left=0;B.style.top=0;document.body.appendChild(B);B.appendChild(C.createChip(C.id+"_lg",3,4));B.appendChild(C.createChip(C.id+"_tg",2,3));for(var A=0;A<C.bits;A++){B.appendChild(C.createChip(C.id+"_firework_"+A,1,1))}},createChip:function(E,A,B){var D=this;var C=document.createElement("div");C.style.position="absolute";C.style.overflow="hidden";C.style.width=A+"px";C.style.height=B+"px";C.setAttribute("id",E);return C},launch:function(){var C=this;C.sX=Math.round((0.5+Math.random())*C.sWidth*0.5);C.sY=C.sHeight-5;C.offsetX=(Math.random()-0.5)*1;C.arrHeight=Math.round((0.5+Math.random())*C.sHeight*0.4);var A=C.G(C.id+"_lg"),B=C.G(C.id+"_tg");A.style.backgroundColor=C.colors[C.color];B.style.backgroundColor=C.colors[C.color]},rise:function(){var F=this;var E=F.sX,D=F.sY;F.sX+=F.offsetX;F.sY-=5;if(F.sX<=0||F.sX>=F.sWidth||F.sY<=F.arrHeight||F.sY>=F.sHeight){for(var C=0;C<F.bits;C++){F.pos[C]={x:F.sX,y:F.sY};var G=(Math.random()-0.5)*F.intensity;var H=(Math.random()-0.5)*(F.intensity-Math.abs(G))*1.25;F.rate[C]={x:H,y:G};F.fade[C]=Math.floor((Math.random()*16)+16);var B=F.G(F.id+"_firework_"+C);B.style.backgroundColor=F.colors[F.color];B.style.visibility="visible"}F.bang();clearInterval(F.riseT)}var I=F.G(F.id+"_lg"),A=F.G(F.id+"_tg");I.style.left=F.sX+"px";I.style.top=F.sY+"px";A.style.left=E+"px";A.style.top=D+"px"},bang:function(){var F=this;var C,H,D,G=0;for(var E=0;E<F.bits;E++){C=Math.round(F.pos[E].x);H=Math.round(F.pos[E].y);D=F.G(F.id+"_firework_"+E);if(C>=0&&C<F.sWidth&&H>=0&&H<F.sHeight){D.style.left=C+"px";D.style.top=H+"px"}var A=F.fade[E]--;if(A>14){D.style.width="4px";D.style.height="4px"}else{if(A>7){D.style.width="3px";D.style.height="3px"}else{if(A>3){D.style.width="2px";D.style.height="2px"}else{++G;D.style.visibility="hidden";var I=F.G(F.id+"_lg"),B=F.G(F.id+"_tg");I.style.visibility="hidden";B.style.visibility="hidden"}}}F.pos[E].x+=F.rate[E].x;F.pos[E].y+=(F.rate[E].y+=1.25/F.intensity)}if(G!=F.bits){setTimeout(function(){F.bang()},F.speed)}},setWidth:function(){var A=this;A.sWidth=document.body.clientWidth||document.documentElement.clientWidth;A.sHeight=document.body.clientHeight||document.documentElement.clientHeight;if(A.sHeight>500){A.sHeight=500}},setScroll:function(){var D=this;var B=document.body.scrollLeft||document.documentElement.scrollLeft;var A=document.body.scrollTop||document.documentElement.scrollTop;var C=D.G(D.id+"_firework_holder");C.style.left=B+"px";C.style.top=A+"px"}};Duanwu.init();
上面这段是 duanwu.js 文件
下面开始写 home页面的js 放置于文件夹的根目录下,命名为home-1.0.js文件
var bds=bds||{};bds.se=bds.se||{};bds.se.sug=function(){var M=navigator.userAgent.indexOf("MSIE")!=-1&&!window.opera;var V=(document.compatMode=="BackCompat");function I(C){return document.getElementById(C)}function K(C){return document.createElement(C)}function S(C){return String(C).replace(new RegExp("(^[\\s\\t\\xa0\\u3000]+)|([\\u3000\\xa0\\s\\t]+\x24)","g"),"")}function U(C){return String(C).replace(new RegExp("[\\s\\t\\xa0\\u3000]","g"),"")}function P(X,G,C){if(M){X.attachEvent("on"+G,(function(Y){return function(){C.call(Y)}})(X))}else{X.addEventListener(G,C,false)}}function N(C){if(M){C.returnValue=false}else{C.preventDefault()}}function R(G){if(M){var X=document.createStyleSheet();X.cssText=G}else{var C=document.createElement("style");C.type="text/css";C.appendChild(document.createTextNode(G));document.getElementsByTagName("HEAD")[0].appendChild(C)}}function H(Y){var X=document.forms[0];for(var G in Y){if(Y[G]==undefined){if(I("bdsug_ipt_"+G)){X.removeChild(I("bdsug_ipt_"+G))}}else{if(!O(G)){X.appendChild(C(G,Y[G]))}else{O(G).value=Y[G]}}}function C(b,Z){var a=K("INPUT");a.type="hidden";a.name=b;a.id="bdsug_ipt_"+b;a.value=Z;return a}}function O(X){var Y=document.forms[0];var Z=false;var C=Y.getElementsByTagName("INPUT");for(var G=0;G<C.length;G++){if(X==C[G].getAttribute("name")){Z=C[G];return Z}else{Z=false}}}function L(X){var G=document.forms[0];for(var C in X){if(C=="f"){if(O("f")){if(O("f").id=="bdsug_ipt_f"){G.removeChild(I("bdsug_ipt_f"))}else{O("f").value="8"}}}else{if(I("bdsug_ipt_"+C)){G.removeChild(I("bdsug_ipt_"+C))}}}}var A=0;if(typeof window.bdsug!="object"||window.bdsug==null){window.bdsug={}}bdsug.sug={};bdsug.sugkeywatcher={};var J=(function(){function C(X){var Z=this.__MSG_QS__;if(!Z[X]){Z[X]=[]}for(var Y=1,b=arguments.length,a;Y<b;Y++){Z[X].push(arguments[Y])}}function G(Z){var Y=this.__MSG_QS__[Z.type];if(Y==null){return }for(var X=0,a=Y.length;X<a;X++){Y[X].rm(Z)}}return{ini:function(X){X.__MSG_QS__={};X.on=C;X.dm=G;return X}}})();var F=(function(){var n=I("kw");var e;var b=0;var p=0;var g="";var m="";var h;var Y=false;var j=true;var c;var Z=I("su");P(Z,"mousedown",l);P(Z,"keydown",l);P(I("kw"),"paste",function(){H({rsv_n:2});if(A==0){A=new Date().getTime()}});function l(){H({inputT:A>0?(new Date().getTime()-A):0})}function k(){if(j){F.dm({type:"start"});j=false}}function f(q){if(A==0){A=new Date().getTime()}if(j){F.dm({type:"start"});j=false}q=q||window.event;if(q.keyCode==9||q.keyCode==27){F.dm({type:"hide_div"})}if(q.keyCode==13){N(q);F.dm({type:"key_enter"})}if(q.keyCode==86&&q.ctrlKey){H({rsv_n:2})}if(e.style.display!="none"){if(q.keyCode==38){N(q);F.dm({type:"key_up"})}if(q.keyCode==40){F.dm({type:"key_down"})}}else{if(q.keyCode==38||q.keyCode==40){F.dm({type:"need_data",wd:n.value})}}}function X(){var q=n.value;if(q==g&&q!=""&&q!=m&&q!=h){if(p==0){p=setTimeout(function(){F.dm({type:"need_data",wd:q})},100)}}else{clearTimeout(p);p=0;g=q;if(q==""){F.dm({type:"hide_div"})}if(m!=n.value){m=""}}}function G(){b=setInterval(X,10)}function d(){clearInterval(b)}function a(){if(Y){window.event.cancelBubble=true;window.event.returnValue=false;Y=false}}function i(q){n.blur();n.setAttribute("autocomplete",q);n.focus()}function o(q){var q=q||window.event;if(q.keyCode==13){N(q)}}n.setAttribute("autocomplete","off");var C=false;bdsug.sugkeywatcher.on=function(){if(!C){if(M){n.attachEvent("onkeydown",f)}else{n.addEventListener("keydown",f,false)}C=true}};bdsug.sugkeywatcher.off=function(){if(C){if(M){n.detachEvent("onkeydown",f)}else{n.removeEventListener("keydown",f,false)}C=false}};bdsug.sugkeywatcher.on();P(n,"mousedown",k);P(n,"beforedeactivate",a);if(window.opera){P(n,"keypress",o)}return J.ini({rm:function(q){switch(q.type){case"div_ready":e=q.sdiv;m=n.value;G();break;case"clk_submit":d();n.blur();n.value=q.wd;break;case"ent_submit":d();n.blur();break;case"key_select":h=q.selected;break;case"close":d();i("on");break;case"mousedown_tr":if(navigator.userAgent.toLowerCase().indexOf("webkit")!=-1){d();setTimeout(G,2000)}Y=true;break}}})})();var W=(function(){var d;var k=I("kw");var Z;var h=-1;var p;var Y;var G;function X(){var q=Z.rows;for(var r=0;r<q.length;r++){q[r].className="ml"}}function g(){if(typeof (Z)!="undefined"&&Z!=null&&d.style.display!="none"){var q=Z.rows;for(var r=0;r<q.length;r++){if(q[r].className=="mo"){return[r,q[r].cells[0].innerHTML]}}}return[-1,""]}function c(){if(M){G.style.display="none"}d.style.display="none"}function o(){X();this.className="mo"}function j(q){W.dm({type:"mousedown_tr"});if(!M){q.stopPropagation();q.preventDefault();return false}}function i(r){var q=r;return function(){var s=p[q];c();W.dm({type:"clk_submit",oq:I("kw").value,wd:s,rsp:q})}}function f(q){q=q||window.event;N(q);W.dm({type:"close"});c();(new Image()).src="http://sclick.baidu.com/w.gif?fm=suggestion&title=%B9%D8%B1%D5&t="+new Date().getTime()}function n(){var q=[k.offsetWidth+15,k.offsetHeight+10];d.style.width=((M&&V)?q[0]:q[0]-2)+"px";d.style.top=((M&&V)?q[1]:q[1]-1)+"px";d.style.display="block";if(M){G.style.top=((M&&V)?q[1]:q[1]-1)+"px";G.style.width=((M&&V)?q[0]:q[0]-2)+"px"}}function m(s,t){if(s&&t){var r=S(s);if(t.indexOf(r)==0){t=C(t,r)}else{if(t.indexOf(U(s))==0){r=U(s);t=C(t,r)}else{}}}t=t.replace("&","&");return t}function C(u,s){var r="<span>"+s+"</span>";var q=s.length;var t="<b>"+u.substring(q)+"</b>";return(r+t)}function b(){Z=K("TABLE");Z.id="st";Z.cellSpacing=0;Z.cellPadding=2;var s=K("tbody");Z.appendChild(s);for(var r=0,q=p.length;r<q;r++){var t=s.insertRow(-1);P(t,"mouseover",o);P(t,"mouseout",X);P(t,"mousedown",j);P(t,"click",i(r));var u=t.insertCell(-1);u.innerHTML=m(Y,p[r])}d.innerHTML="";d.appendChild(Z);n();if(M){G.style.display="block";G.style.left=0+"px";G.style.top=k.offsetHeight+15+"px";G.style.width=k.offsetWidth+"px";G.style.height=d.offsetHeight-1+"px"}}function l(){h=g()[0];if(h==-1){W.dm({type:"submit"})}else{W.dm({type:"ent_submit",oq:Y,wd:g()[1],rsp:h})}}function a(){h=g()[0];X();if(h==0){W.dm({type:"key_select",selected:""});I("kw").value=Y;h--;L({oq:Y,sug:p[h],rsv_n:1,rsp:h,f:3,rsv_sug:rsv_sug})}else{if(h==-1){h=p.length}h--;var q=Z.rows[h];q.className="mo";W.dm({type:"key_select",selected:p[h]});I("kw").value=p[h];H({oq:Y,sug:p[h],rsv_n:1,rsp:h,f:3,rsv_sug:rsv_sug})}}function e(){h=g()[0];X();if(h==p.length-1){W.dm({type:"key_select",selected:""});I("kw").value=Y;h=-1;L({oq:Y,sug:p[h],rsv_n:1,rsp:h,f:3,rsv_sug:rsv_sug})}else{h++;var q=Z.rows[h];q.className="mo";W.dm({type:"key_select",selected:p[h]});I("kw").value=p[h];H({oq:Y,sug:p[h],rsv_n:1,rsp:h,f:3,rsv_sug:rsv_sug})}}return J.ini({rm:function(q){switch(q.type){case"div_ready":d=q.sdiv;G=q.frm;break;case"give_data":Y=q.data.q;p=q.data.s;rsv_sug=q.data.t;if(p.length!=0){b()}else{c()}break;case"key_enter":l();break;case"key_up":a();break;case"key_down":e();break;case"hide_div":c();break;case"mousedown_other":c();break;case"window_blur":c();break;case"need_resize":n();break}}})})();var T=(function(){var C=document.forms[0];function Y(){if(I("bdsug_ipt_sug")){if(I("bdsug_ipt_sug").value==S(I("kw").value)){L({rsv_n:1,sug:1})}else{L({f:1})}}}P(C,"submit",Y);function X(){Y();H({inputT:A>0?(new Date().getTime()-A):0});C.submit()}function G(Z){H(Z);H({inputT:A>0?(new Date().getTime()-A):0});L({sug:1,rsv_n:1});C.submit()}return J.ini({rm:function(Z){switch(Z.type){case"clk_submit":G({oq:Z.oq,rsp:Z.rsp,f:3,rsv_sug:rsv_sug,rsv_sug2:1});break;case"ent_submit":G({oq:Z.oq,rsp:Z.rsp,f:3,rsv_sug:rsv_sug,rsv_sug2:0});break;case"submit":X();break}}})})();var B=(function(){var C={};function X(Y){if(typeof C[Y]=="undefined"){B.dm({type:"request_data",wd:Y})}else{B.dm({type:"give_data",data:C[Y]})}}function G(Y){C[Y.q]=Y;B.dm({type:"give_data",data:C[Y.q]})}return J.ini({rm:function(Y){switch(Y.type){case"response_data":G(Y.data);break;case"need_data":X(Y.wd);break}}})})();var Q=(function(){var C;var G;function X(Y){Q.dm({type:"need_cookie"});if(C){document.body.removeChild(C)}C=K("SCRIPT");C.src="http://suggestion.baidu.com/su?wd="+encodeURIComponent(Y)+"&p="+G+"&cb=window.bdsug.sug&t="+(new Date()).getTime();C.charset="gb2312";document.body.appendChild(C)}return J.ini({rm:function(Z){switch(Z.type){case"request_data":X(Z.wd);break;case"give_cookie":var Y=Z.sug;if(Y>0){Y=3}G=Y;break}}})})();bdsug.sug=function(C){bdsug.dm({type:"response_data",data:C})};bdsug.initSug=function(){bdsug.dm({type:"init"})};J.ini(bdsug);var E=(function(){function C(){if(navigator.cookieEnabled){document.cookie="su=0; domain=www.baidu.com"}}function G(){var X=(navigator.cookieEnabled&&/sug=(\d)/.test(document.cookie)?RegExp.$1:3);E.dm({type:"give_cookie",sug:X})}return J.ini({rm:function(X){switch(X.type){case"close":C();break;case"need_cookie":G();break}}})})();var D=(function(){var c=I("kw");var X;var Z=document.forms[0];var d;function b(){if(X.offsetWidth!=0&&c.offsetWidth!=X.offsetWidth){D.dm({type:"need_resize"})}}function Y(){X=K("DIV");X.id="sd_"+new Date().getTime();X.style.display="none";Z.appendChild(X);if(M){d=K("IFRAME");d.style.display="none";d.style.position="absolute";X.parentNode.insertBefore(d,X)}}function a(f){f=f||window.event;var g=f.target||f.srcElement;if(g==c){return }while(g=g.parentNode){if(g==X){return }}D.dm({type:"mousedown_other"})}function C(){D.dm({type:"window_blur"})}function G(){var f="#"+X.id;var e=[];D.dm({type:"div_ready",sdiv:X,frm:d});setInterval(b,100);P(document,"mousedown",a);P(window,"blur",C);e.push(f+"{border:1px solid #817F82;position:absolute;top:32px;left:0}");e.push(f+" table{width:100%;background:#fff;cursor:default}");e.push(f+" td{color:#000;font:14px arial;height:25px;line-height:25px;padding:0 8px}");e.push(f+" td b{color:#000}");e.push(f+" .mo{background:#ebebeb}");e.push(f+" .ml{background:#fff}");R(e.join(""))}bdsug.sug.initial=G;return J.ini({rm:function(e){switch(e.type){case"start":G();break;case"init":Y();break}}})})();F.on("need_data",B);F.on("close_div",W);F.on("key_enter",W);F.on("key_up",W);F.on("key_down",W);F.on("hide_div",W);F.on("start",D);B.on("request_data",Q);B.on("give_data",W);bdsug.on("response_data",B);bdsug.on("init",D);W.on("clk_submit",F,T);W.on("ent_submit",F,T);W.on("submit",T);W.on("key_select",F);W.on("close",F,E);W.on("mousedown_tr",F);D.on("mousedown_other",W);D.on("need_resize",W);D.on("div_ready",F,W);D.on("window_blur",W);Q.on("need_cookie",E);E.on("give_cookie",Q);window.bdsug.initSug()};var sethfPos=sethfPos||0;(function(){var O="http://www.baidu.com/",L=navigator.userAgent.indexOf("MSIE")!=-1&&!window.opera,P=Math.random()*100,V="�ٶ�һ�£����֪��",C="";window.fa=function(Y){try{if(window.sidebar){window.sidebar.addPanel(V,O,"")}else{if(window.opera&&window.print){Y.setAttribute("rel","sidebar");Y.setAttribute("href",O);Y.setAttribute("title",V);Y.click()}else{window.external.AddFavorite(O,V)}}}catch(X){}};function D(Y){var X=Y.parentNode;if(X){X.style.marginBottom="20px";X.style.marginTop="2px"}}if(L){try{var W=/se /gi.test(navigator.userAgent);var M=/AppleWebKit/gi.test(navigator.userAgent)&&/theworld/gi.test(navigator.userAgent);var I=/theworld/gi.test(navigator.userAgent);var N=/360se/gi.test(navigator.userAgent);var A=/360chrome/gi.test(navigator.userAgent);var E=/greenbrowser/gi.test(navigator.userAgent);var S=/qqbrowser/gi.test(navigator.userAgent);var J=/tencenttraveler/gi.test(navigator.userAgent);var H=/maxthon/gi.test(navigator.userAgent);var T=/krbrowser/gi.test(navigator.userAgent);var B=false;try{B=+external.twGetVersion(external.twGetSecurityID(window)).replace(/\./g,"")>1013}catch(R){}if(W||B||M||I||N||A||E||S||J||H||T){var G=sethfPos?document.getElementById("set_f"):document.getElementById("setf");if(G){G.style.display="inline";if(sethfPos){D(G);C="favorites"}}}else{var F=sethfPos?document.getElementById("set_h"):document.getElementById("seth");var Q=F&&F.isHomePage(O);if(!Q){var F=sethfPos?document.getElementById("set_h"):document.getElementById("seth");if(F){F.style.display="inline";if(sethfPos){D(F);C="home"}}}else{if(sethfPos){C="home_exist"}}if(P<=1){var K=encodeURIComponent(window.document.location.href),U=window["BD_PS_C"+(new Date()).getTime()]=new Image();U.src="http://nsclick.baidu.com/v.gif?pid=201&pj=hps&hp="+Q+"&path="+K+"&t="+new Date().getTime();return true}}}catch(R){}}else{var G=sethfPos?document.getElementById("set_f"):document.getElementById("setf");G.style.display="inline";if(sethfPos){D(G);C="favorites"}}if(C&&sethfPos){ns_c({fm:"sethf_show",tab:C})}})();
第三个js文件需要写打开游戏时的js文件,我将它命名为 openime.js,文件放置于文件夹的根目录下~
var bdimeHW={hasF:1};var imeTar="kw";var ime_t1=(new Date()).getTime();(function(){var M=G("mCon"),A=G("mMenu");var B=["���뷨","��д","ƴ��"],O=["cl","hw","py"],D=["","http://www.baidu.com/hw/hwInput_1.1.js","http://www.baidu.com/olime/bdime.js"],N=[0,0,0];var L=navigator.cookieEnabled;if(L&&/\bbdime=(\d)/.test(document.cookie)){H(O[RegExp["\x241"]],false)}var K=A.getElementsByTagName("a");for(var I=0;I<K.length;I++){K[I].onclick=F}if(isIE){var E=[];var P=M.getElementsByTagName("*");for(var I=0;I<P.length;I++){E.push(P[I])}E.push(M);var P=A.getElementsByTagName("*");for(var I=0;I<P.length;I++){E.push(P[I])}E.push(A);for(var I=0;I<E.length;I++){E[I].setAttribute("unselectable","on")}}function F(){ime_t1=(new Date()).getTime();var R=this.name.split("_")[1];try{if(window.bdime){bdime.control.closeIme()}}catch(Q){}H(R,true);return false}function H(V,Q){var T=0;if(V==O[1]){T=1;G("mHolder").style.display="inline-block";M.innerHTML='<span id="imeS" class="hw">'+B[1]+"</span>";if(isIE){G("imeS").setAttribute("unselectable","on")}function S(){if(!N[1]){if(document.selection&&document.activeElement.id&&document.activeElement.id=="kw"){bdimeHW.hasF=1}bdimeHW.input=imeTar;bdimeHW.submit="su";J(D[1]);setTimeout(function(){if(typeof bdsug!="undefined"){bdsug.sug.initial()}},1000);N[1]=1}else{bdimeHW.reload(Q)}}if(Q){S()}else{addEV(G("imeS"),"click",S)}}else{if(V==O[2]){T=2;G("mHolder").style.display="inline-block";M.innerHTML="<span>"+B[2]+"</span>";if(!N[2]){J(D[2]);N[2]=1}else{try{if(window.bdime){bdime.control.openIme()}}catch(U){}}}else{G("mHolder").style.display="none"}}if(Q&&L){var R=new Date();R.setTime(R.getTime()+365*24*3600*1000);document.cookie="bdime="+T+";domain=baidu.com;path=/;expires="+R.toGMTString()}}function J(Q){if(Q){var R=document.createElement("script");R.charset="gbk";R.src=Q;document.getElementsByTagName("head")[0].appendChild(R)}}function C(R){var R=R||window.event;var Q=R.target||R.srcElement;A.style.display=Q.id=="mCon"&&A.style.display!="block"?"block":"none"}addEV(document,"click",C)})();
然后文件夹的样式是属于如下样式~
现在,咱们进入前端测试一下小游戏的性能~
在 Chrome 里面打开时,我开心了😄
选择自己的🐲🛶就开始比赛了呀~~
我把游戏发给了女神,她说:咱们在一起吧😂
我:🤌(拿捏)哈哈哈哈
掘友们觉得这篇文章有点意思的话💁♂️,欢迎点赞👍,留言,🙏谢谢各位掘友,包粽子去啦~~
