JS实现的走迷宫小游戏完整实例
程序员文章站
2023-02-23 23:51:57
本文实例讲述了js实现的走迷宫小游戏。分享给大家供大家参考,具体如下:
先来看看运行效果截图:
完整实例代码如下:
本文实例讲述了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.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 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>") 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 id="message"> </p> <br /> </body> </html>
ps:这里再为大家推荐另一款本站的迷宫在线游戏供大家参考,同样是基于js实现的:
在线迷宫小游戏:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript数据结构与算法技巧总结》、《javascript数学运算用法总结》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》及《javascript遍历算法与技巧总结》
希望本文所述对大家javascript程序设计有所帮助。