欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-23 23:51:57
本文实例讲述了js实现的走迷宫小游戏。分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下:

本文实例讲述了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程序设计有所帮助。