JS实现的走迷宫小游戏完整实例
程序员文章站
2022-05-26 08:25:18
本文实例讲述了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程序设计有所帮助。
上一篇： 解决Vue页面固定滚动位置的处理办法
下一篇： 基于BootStrap实现简洁注册界面