本文實例講述了JS實現的走迷宮小游戲。分享給大家供大家參考，具體如下：
先來看看運行效果截圖：
完整實例代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>JS打造的走迷宮游戲</title></head><body><SCRIPT>function ShowMenu(bMenu) {document.all.idFinder.style.display = (bMenu) ? "none" : "block"document.all.idMenu.style.display = (bMenu) ? "block" : "none"idML.className = (bMenu) ? "cOn" : "cOff"idRL.className = (bMenu) ? "cOff" : "cOn"return false}</SCRIPT><STYLE><!--A.cOn {text-decoration:none;font-weight:bolder}#article {font: 12pt Verdana, geneva, arial, sans-serif; background: white; color: black; padding: 10pt 15pt 0 5pt}#article P.start {text-indent: 0pt}#article P {margin-top:0pt;font-size:10pt;text-indent:12pt}#article #author {margin-bottom:5pt;text-indent:0pt;font-style: italic}#pageList P {padding-top:10pt}#article H3 {font-weight:bold}#article DL, UL, OL {font-size: 10pt}--></STYLE><SCRIPT><!--function addList(url,desc) {if ((navigator.appName=="Netscape") || (parseInt(navigator.appVersion)>=4)) {var w=window.open("","_IDHTML_LIST_","top=0,left=0,width=475,height=150,history=no,menubar=no,status=no,resizable=no")var d=w.documentif (!w._init) {d.open()d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>")d.close()w.opener=selfwindow.status="Personal Assistant (Adding): " + desc} else {window.status=w.addOption(url,desc)w.focus()}}elsealert("Your browser does not support the personal assistant.")return false}// --></SCRIPT><STYLE TYPE="text/css">#board TD {width: 15pt; height: 15pt; font-size: 2pt; }TD.foot {font-size: 10pt;}#board TD.start {font-size: 8pt; border-left: 2px black solid; background:yellow; border-top: 2px black solid;text-align: center; color: red}#board TD.end {font-size: 8pt; text-align: center; color: green}#message {margin: 0pt; padding: 0pt; text-align: center}</STYLE><SCRIPT LANGUAGE="JavaScript">var maze = new Array()var sides = new Array("Border-Top", "Border-Right")for (var rows=0; rows<13; rows++)maze[rows] = new Array()maze[0][0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1)maze[0][1] = new Array(0,0,1,0,1,0,0,0,0,1,0,1)maze[1][0] = new Array(1,0,0,0,1,0,1,1,1,0,1,1)maze[1][1] = new Array(0,1,1,0,0,1,1,0,0,1,0,1)maze[2][0] = new Array(1,0,1,0,1,0,0,1,1,0,1,1)maze[2][1] = new Array(0,0,0,0,1,1,1,0,0,0,0,1)maze[3][0] = new Array(0,1,1,1,1,1,0,0,0,0,1,1)maze[3][1] = new Array(1,0,0,1,0,0,0,1,1,0,0,1)maze[4][0] = new Array(0,0,0,0,0,0,1,1,1,1,1,1)maze[4][1] = new Array(1,1,1,1,1,0,0,0,0,0,1,1)maze[5][0] = new Array(0,0,0,0,1,0,1,1,1,1,0,0)maze[5][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)maze[6][0] = new Array(0,0,0,0,0,0,1,1,0,1,0,1)maze[6][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)maze[7][0] = new Array(1,0,1,0,0,0,1,0,1,1,0,1)maze[7][1] = new Array(1,1,1,0,1,0,0,1,0,1,1,1)maze[8][0] = new Array(0,0,0,1,0,0,1,1,0,0,0,0)maze[8][1] = new Array(0,1,0,1,1,0,0,0,1,1,0,1)maze[9][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,1)maze[9][1] = new Array(1,1,1,1,0,0,0,0,0,1,1,1)maze[10][0] = new Array(0,0,0,0,0,1,1,1,1,1,0,0)maze[10][1] = new Array(1,1,1,0,1,0,0,0,0,1,0,1)maze[11][0] = new Array(0,0,1,1,1,1,1,1,1,0,0,0)maze[11][1] = new Array(1,0,1,0,0,0,0,0,0,0,1,1)maze[12][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,0)maze[12][1] = new Array(1,1,0,1,0,0,0,1,0,0,1,1)function testNext(nxt) {if ((board.rows[start.rows].cells[start.cols].style.backgroundColor=="yellow") && (nxt.style.backgroundColor=='yellow')) {message.innerText="I see you changed your mind."board.rows[start.rows].cells[start.cols].style.backgroundColor=""return false}return true}function moveIt() {if (!progress) returnswitch (event.keyCode) {case 37: // leftif (maze[start.rows][1][start.cols-1]==0) {if (testNext(board.rows[start.rows].cells[start.cols-1]))message.innerText="Going west..."start.cols--document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"} elsemessage.innerText="Ouch... you can't go west."break;case 38: // upif (maze[start.rows][0][start.cols]==0) {if (testNext(board.rows[start.rows-1].cells[start.cols]))message.innerText="Going north..."start.rows--document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"} elsemessage.innerText="Ouch... you can't go north."break;case 39: // rightif (maze[start.rows][1][start.cols]==0) {if (testNext(board.rows[start.rows].cells[start.cols+1]))message.innerText="Going east..."start.cols++document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"}elsemessage.innerText="Ouch... you can't go east."break;case 40: //downif (maze[start.rows+1]==null) returnif (maze[start.rows+1][0][start.cols]==0) {if (testNext(board.rows[start.rows+1].cells[start.cols]))message.innerText="Going south..."start.rows++document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"} elsemessage.innerText="Ouch... you can't go south."break;}if (document.all.board.rows[start.rows].cells[start.cols].innerText=="end") {message.innerText="You Win!"progress=false}}</SCRIPT><P ALIGN=center>請使用鍵盤上的→←↑↓鍵進行游戲</P><BR><p><TABLE ID=board ALIGN=CENTER CELLSPACING=0 CELLPADDING=0><SCRIPT LANGUAGE="JavaScript">for (var row = 0; row<maze.length; row++) {document.write("<TR>")for (var col = 0; col<maze[row][0].length; col++) {document.write("<TD STYLE='")for (var cell = 0; cell<2; cell++) {if (maze[row][cell][col]==1)document.write(sides[cell]+": 2px black solid;")}if ((0==col) && (0!=row))document.write("border-left: 2px black solid;")if (row==maze.length-1)document.write("border-bottom: 2px black solid;")if ((0==row) && (0==col))document.write(" background-color:yellow;' class=start>start</TD>")elseif ((row==maze.length-1) && (col==maze[row][0].length-1))document.write("' class=end>end</TD>")elsedocument.write("'> </TD>")}document.write("</TR>")}var start = new Objectstart.rows = 0start.cols = 0progress=truedocument.onkeydown = moveIt;</SCRIPT></TABLE><P ID="message"> </P><br /></body></html>PS：這里再為大家推薦另一款本站的迷宮在線游戲供大家參考，同樣是基于JS實現的：
在線迷宮小游戲：
http://tools.VeVB.COm/games/migong
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數據結構與算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》及《JavaScript遍歷算法與技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
