原生JS寫《畫素鳥》的小遊戲（下落的小鳥）
阿新 • • 發佈：2019-02-16
HTML頁面程式碼：
CSS頁面程式碼：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="js/index.js"></script> </head> <body> <div id="bg"> <div id="BG"></div> <div id="start"> <ul id="log"> <li class="logo"></li> <li class="bird"></li> </ul> <button class="btnstart"></button> </div> <div id="gameover" style="display:none"> <div class="over"> </div> <div class="gameover"> <span class="number">0</span> <span class="HistoryNumber">0</span> </div> <div class="ok"></div> </div> <div id="bigScore" style="display:none"> <img src="img/0.jpg"> </div> <ul id="banner"> <li></li> <li></li> </ul> </div> </body> </html>
js頁面程式碼：@charset "utf-8"; *{ margin:0px; padding:0px; box-sizing:border-box; } a{ text-decoration: none; } li,ul{ list-style: none; } #bg{ margin: 0px auto; width: 343px; height: 480px; position: relative; background: url(../img/bg.jpg); overflow: hidden; } #BG{ position: absolute; width: 343px; height: 480px; } #start{ width: 343px; padding-top: 100px; } #log{ width: 343px; height: 77px; position: absolute; } .logo{ width: 236px; height: 77px; background: url(../img/head.png); } .bird{ width: 40px; height: 30px; background: url(../img/bird0.png) no-repeat; } #log li{ float:left; } .btnstart{ width: 85px; height: 29px; border:none; background: url(../img/start.jpg) no-repeat; position: absolute; top: 330px; left: 130px; } #banner li{ width: 343px; height: 14px; float: left; background: yellow; background: url(../img/banner.jpg) no-repeat; } #banner{ width: 686px; position: absolute; top: 423px; } .Brid{ width: 40px; height: 30px; background: url(../img/bird0.png) no-repeat; position: absolute; top:160px; left:70px; } .conduit{ position: absolute; width: 62px; right: -62px; } .conduit div{ width: 62px; } #gameover{ position: absolute; margin: 70px 30px; z-index: 3; } .gameover{ width: 269px; height: 135px; background:url(../img/message.jpg) no-repeat; margin-top: 20px; } .HistoryNumber{ position: absolute; width: 53px; height: 37px; bottom: 63px; right: 0px; margin-right: 28px; line-height: 37px; text-align: center; font-size: 40px; } .gameover span{ float: right; width: 53px; height: 37px; margin-top: 33px; margin-right: 28px; line-height: 37px; text-align: center; font-size: 40px; } .over{ width: 221px; height: 40px; background:url(../img/game_over.png) no-repeat; } .ok{ background:url(../img/ok.jpg) no-repeat; width: 96px; margin:10px auto; height: 33px; } #bigScore{ position: absolute; z-index: 3; width: 343px; text-align: center; margin:0px auto; height:39px; }
（我吃酸蘿蔔 新浪微博http://www.weibo.com/wcslb ---李帥醒著）window.onload=function(){ // 工具 //查詢元素 function $(a,b){ if(arguments.length==2){ return document.querySelector(a).querySelectorAll(b); } if(arguments.length==1){ return document.querySelector(a); } } //建立元素 function cj(name){ return document.createElement(name); } //開始介面 var number=0; //計算分數 var time3=0; var Arr=["img/bird0.png","img/bird1.png","img/down_bird0.png","img/down_bird1.png","img/up_bird0.png","img/up_bird1.png"]; var index=0; time1=setInterval(move,30); var i=1; function move(){ //背景滾動 $("#banner").style.left=$("#banner").offsetLeft-1+"px"; if($("#banner").offsetLeft<=-343){ $("#banner").style.left="0px"; } //小鳥 $(".bird").style.background=" url("+Arr[index++]+")"+" no-repeat"; if(index==Arr.length){ index=0; } //LOGO $("#log").style.top=$("#log").offsetTop+i+"px"; if($("#log").offsetTop<=80|| $("#log").offsetTop>=120){ i*=-1; } } //建立小鳥 function Abrid(){ Brid=cj("div"); Brid.setAttribute("class","Brid"); $("#BG").appendChild(Brid); return Brid; } //小鳥運動 var speedY=0.1; var imgindex=0; function Abridmove(Brid){ time2=setInterval(fly,30); function fly(){ speedY=speedY+0.5; Brid.style.top=Brid.offsetTop+speedY+"px"; //煽動翅膀 Brid.style.background=" url("+Arr[imgindex++]+")"+" no-repeat"; if(imgindex==2){ imgindex=0; }; //判斷碰撞 if (Brid.offsetTop+Brid.offsetHeight>=422||Brid.offsetTop<0){ Gameover(); }; } //點選滑鼠向上飛 document.onclick=function(){ speedY=-8; } //點選空格向上飛 document.onkeydown = function(ev) { var eventObj = ev || event; if(eventObj.keyCode==32){ speedY=-8; } } }; // 建立水管 function WaterPipe(conduit,Height1,Height2,top,bottom,img1,img2){ conduit.setAttribute("class","conduit"); conduit.style.top=top; conduit.style.bottom=bottom; var top=cj("div"); top.style.height=Height1; top.style.backgroundImage="url("+img1+")"; var down=cj("div"); down.style.height=Height2; down.style.background="url("+img2+")"; conduit.appendChild(top); conduit.appendChild(down); $("#BG").appendChild(conduit); //水管運動 this.MoveWater=function(){ time3=setInterval(function(){ //水管滾動 conduit.style.left=conduit.offsetLeft-1+"px"; if(conduit.offsetLeft+conduit.offsetWidth<=0){ //水管移動出去清除 conduit.remove(); }; //判斷碰撞 if($(".Brid").offsetTop+$(".Brid").offsetHeight>=conduit.offsetTop && $(".Brid").offsetTop<=conduit.offsetTop+conduit.offsetHeight && $(".Brid").offsetLeft+$(".Brid").offsetWidth>=conduit.offsetLeft && $(".Brid").offsetLeft<=conduit.offsetLeft+conduit.offsetWidth){ Gameover();//呼叫停止函式 } //判斷分數 if(conduit.offsetLeft+conduit.offsetWidth==70){ number++; //每次有兩個水管滿足條件，所以計算積分的時候需要除2; } jiFen(); },15); }; } //遊戲初始化水管移動 function StartGame(){ time4=setInterval(CreateWater,2400) function CreateWater(){ var a=parseInt(Math.random()*180); //建立上水管 var Top=cj("div"); //建立下水管 var Down=cj("div"); var Watertop= new WaterPipe(Top,a+"px","60px","0px","none","img/up_mod.png","img/up_pipe.png"); var Waterdown= new WaterPipe(Down,"60px",(180-a)+"px","none","57px","img/down_pipe.png","img/down_mod.png"); //呼叫水管移動方法 Watertop.MoveWater(); Waterdown.MoveWater(); } }; //計算積分 function jiFen() { $("#bigScore").innerHTML = ""; var scoreStr =Math.floor((number/2)).toString(); for (var i = 0; i < scoreStr.length; i++) { $("#bigScore").innerHTML += "<img src='img/" + scoreStr[i] + ".jpg'/>"; }; } //點選開始 $(".btnstart").onclick=function(){ $("#bigScore").style.display="block"; $("#start").style.display="none"; clearInterval(time1); Abridmove(Abrid()); StartGame(); } //重新開始 $(".ok").onclick=function(){ number=0; $("#gameover").style.display="none"; $("#start").style.display="none"; $("#BG").innerHTML=""; clearInterval(time1); Abridmove(Abrid()); StartGame(); } //點選暫停$() function Gameover(){ $(".number").innerHTML=Math.floor(number/2); //利用H5新屬性，可以在記憶體儲存一個數據，來作為歷史成績記錄 if(window.localStorage.getItem("history")>Math.floor(number/2)){ $(".HistoryNumber").innerHTML=window.localStorage.getItem("history"); }else{ window.localStorage.setItem("history",Math.floor(number/2)); $(".HistoryNumber").innerHTML=Math.floor(number/2); } $("#gameover").style.display="block"; //清除所有定時器 for(var i=0;i<1000;i++){ clearInterval(i); } } }
