当前位置:Gxlcms > JavaScript > JS实现的走迷宫小游戏完整实例

JS实现的走迷宫小游戏完整实例

时间:2021-07-01 10:21:17 帮助过:6人阅读

本文实例讲述了JS实现的走迷宫小游戏。分享给大家供大家参考,具体如下:

先来看看运行效果截图:

完整实例代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>JS打造的走迷宫游戏</title>
  5. </head>
  6. <body>
  7. <SCRIPT>
  8. function ShowMenu(bMenu) {
  9. document.all.idFinder.style.display = (bMenu) ? "none" : "block"
  10. document.all.idMenu.style.display = (bMenu) ? "block" : "none"
  11. idML.className = (bMenu) ? "cOn" : "cOff"
  12. idRL.className = (bMenu) ? "cOff" : "cOn"
  13. return false
  14. }
  15. </SCRIPT>
  16. <STYLE>
  17. <!--
  18. A.cOn {text-decoration:none;font-weight:bolder}
  19. #article {font: 12pt Verdana, geneva, arial, sans-serif; background: white; color: black; padding: 10pt 15pt 0 5pt}
  20. #article P.start {text-indent: 0pt}
  21. #article P {margin-top:0pt;font-size:10pt;text-indent:12pt}
  22. #article #author {margin-bottom:5pt;text-indent:0pt;font-style: italic}
  23. #pageList P {padding-top:10pt}
  24. #article H3 {font-weight:bold}
  25. #article DL, UL, OL {font-size: 10pt}
  26. -->
  27. </STYLE>
  28. <SCRIPT>
  29. <!--
  30. function addList(url,desc) {
  31. if ((navigator.appName=="Netscape") || (parseInt(navigator.appVersion)>=4)) {
  32. var w=window.open("","_IDHTML_LIST_","top=0,left=0,width=475,height=150,history=no,menubar=no,status=no,resizable=no")
  33. var d=w.document
  34. if (!w._init) {
  35. d.open()
  36. d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>")
  37. d.close()
  38. w.opener=self
  39. window.status="Personal Assistant (Adding): " + desc
  40. } else {
  41. window.status=w.addOption(url,desc)
  42. w.focus()
  43. }
  44. }
  45. else
  46. alert("Your browser does not support the personal assistant.")
  47. return false
  48. }
  49. // -->
  50. </SCRIPT>
  51. <STYLE TYPE="text/css">
  52. #board TD {width: 15pt; height: 15pt; font-size: 2pt; }
  53. TD.foot {font-size: 10pt;}
  54. #board TD.start {font-size: 8pt; border-left: 2px black solid; background:yellow; border-top: 2px black solid;text-align: center; color: red}
  55. #board TD.end {font-size: 8pt; text-align: center; color: green}
  56. #message {margin: 0pt; padding: 0pt; text-align: center}
  57. </STYLE>
  58. <SCRIPT LANGUAGE="JavaScript">
  59. var maze = new Array()
  60. var sides = new Array("Border-Top", "Border-Right")
  61. for (var rows=0; rows<13; rows++)
  62. maze[rows] = new Array()
  63. maze[0][0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1)
  64. maze[0][1] = new Array(0,0,1,0,1,0,0,0,0,1,0,1)
  65. maze[1][0] = new Array(1,0,0,0,1,0,1,1,1,0,1,1)
  66. maze[1][1] = new Array(0,1,1,0,0,1,1,0,0,1,0,1)
  67. maze[2][0] = new Array(1,0,1,0,1,0,0,1,1,0,1,1)
  68. maze[2][1] = new Array(0,0,0,0,1,1,1,0,0,0,0,1)
  69. maze[3][0] = new Array(0,1,1,1,1,1,0,0,0,0,1,1)
  70. maze[3][1] = new Array(1,0,0,1,0,0,0,1,1,0,0,1)
  71. maze[4][0] = new Array(0,0,0,0,0,0,1,1,1,1,1,1)
  72. maze[4][1] = new Array(1,1,1,1,1,0,0,0,0,0,1,1)
  73. maze[5][0] = new Array(0,0,0,0,1,0,1,1,1,1,0,0)
  74. maze[5][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)
  75. maze[6][0] = new Array(0,0,0,0,0,0,1,1,0,1,0,1)
  76. maze[6][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)
  77. maze[7][0] = new Array(1,0,1,0,0,0,1,0,1,1,0,1)
  78. maze[7][1] = new Array(1,1,1,0,1,0,0,1,0,1,1,1)
  79. maze[8][0] = new Array(0,0,0,1,0,0,1,1,0,0,0,0)
  80. maze[8][1] = new Array(0,1,0,1,1,0,0,0,1,1,0,1)
  81. maze[9][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,1)
  82. maze[9][1] = new Array(1,1,1,1,0,0,0,0,0,1,1,1)
  83. maze[10][0] = new Array(0,0,0,0,0,1,1,1,1,1,0,0)
  84. maze[10][1] = new Array(1,1,1,0,1,0,0,0,0,1,0,1)
  85. maze[11][0] = new Array(0,0,1,1,1,1,1,1,1,0,0,0)
  86. maze[11][1] = new Array(1,0,1,0,0,0,0,0,0,0,1,1)
  87. maze[12][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,0)
  88. maze[12][1] = new Array(1,1,0,1,0,0,0,1,0,0,1,1)
  89. function testNext(nxt) {
  90. if ((board.rows[start.rows].cells[start.cols].style.backgroundColor=="yellow") && (nxt.style.backgroundColor=='yellow')) {
  91. message.innerText="I see you changed your mind."
  92. board.rows[start.rows].cells[start.cols].style.backgroundColor=""
  93. return false
  94. }
  95. return true
  96. }
  97. function moveIt() {
  98. if (!progress) return
  99. switch (event.keyCode) {
  100. case 37: // left
  101. if (maze[start.rows][1][start.cols-1]==0) {
  102. if (testNext(board.rows[start.rows].cells[start.cols-1]))
  103. message.innerText="Going west..."
  104. start.cols--
  105. document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
  106. } else
  107. message.innerText="Ouch... you can't go west."
  108. break;
  109. case 38: // up
  110. if (maze[start.rows][0][start.cols]==0) {
  111. if (testNext(board.rows[start.rows-1].cells[start.cols]))
  112. message.innerText="Going north..."
  113. start.rows--
  114. document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
  115. } else
  116. message.innerText="Ouch... you can't go north."
  117. break;
  118. case 39: // right
  119. if (maze[start.rows][1][start.cols]==0) {
  120. if (testNext(board.rows[start.rows].cells[start.cols+1]))
  121. message.innerText="Going east..."
  122. start.cols++
  123. document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
  124. }
  125. else
  126. message.innerText="Ouch... you can't go east."
  127. break;
  128. case 40: //down
  129. if (maze[start.rows+1]==null) return
  130. if (maze[start.rows+1][0][start.cols]==0) {
  131. if (testNext(board.rows[start.rows+1].cells[start.cols]))
  132. message.innerText="Going south..."
  133. start.rows++
  134. document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
  135. } else
  136. message.innerText="Ouch... you can't go south."
  137. break;
  138. }
  139. if (document.all.board.rows[start.rows].cells[start.cols].innerText=="end") {
  140. message.innerText="You Win!"
  141. progress=false
  142. }
  143. }
  144. </SCRIPT>
  145. <P ALIGN=center>请使用键盘上的→←↑↓键进行游戏</P><BR>
  146. <p><TABLE ID=board ALIGN=CENTER CELLSPACING=0 CELLPADDING=0>
  147. <SCRIPT LANGUAGE="JavaScript">
  148. for (var row = 0; row<maze.length; row++) {
  149. document.write("<TR>")
  150. for (var col = 0; col<maze[row][0].length; col++) {
  151. document.write("<TD STYLE='")
  152. for (var cell = 0; cell<2; cell++) {
  153. if (maze[row][cell][col]==1)
  154. document.write(sides[cell]+": 2px black solid;")
  155. }
  156. if ((0==col) && (0!=row))
  157. document.write("border-left: 2px black solid;")
  158. if (row==maze.length-1)
  159. document.write("border-bottom: 2px black solid;")
  160. if ((0==row) && (0==col))
  161. document.write(" background-color:yellow;' class=start>start</TD>")
  162. else
  163. if ((row==maze.length-1) && (col==maze[row][0].length-1))
  164. document.write("' class=end>end</TD>")
  165. else
  166. document.write("'> </TD>")
  167. }
  168. document.write("</TR>")
  169. }
  170. var start = new Object
  171. start.rows = 0
  172. start.cols = 0
  173. progress=true
  174. document.onkeydown = moveIt;
  175. </SCRIPT>
  176. </TABLE>
  177. <P ID="message"> </P>
  178. <br />
  179. </body>
  180. </html>

PS:这里再为大家推荐另一款本站的迷宫在线游戏供大家参考,同样是基于JS实现的:

在线迷宫小游戏:
http://tools.jb51.net/games/migong

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

人气教程排行