<!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.document if (!w._init) { d.open() d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>") d.close() w.opener=self window.status="Personal Assistant (Adding): " + desc } else { window.status=w.addOption(url,desc) w.focus() } } else alert("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) return switch (event.keyCode) { case 37: // left if (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" } else message.innerText="Ouch... you can't go west." break; case 38: // up if (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" } else message.innerText="Ouch... you can't go north." break; case 39: // right if (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" } else message.innerText="Ouch... you can't go east." break; case 40: //down if (maze[start.rows+1]==null) return if (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" } else message.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 class=start>start</TD>") else if ((row==maze.length-1) && (col==maze[row][0].length-1)) document.write("' class=end>end</TD>") else document.write("'> </TD>") } document.write("</TR>") } var start = new Object start.rows = 0 start.cols = 0 progress=true document.onkeydown = moveIt; </SCRIPT> </TABLE> <P> </P> <br /> </body> </html>
JS实现的走迷宫小游戏完整实例
内容版权声明：除非注明，否则皆为本站原创文章。