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实现的：
在线迷宫小游戏：
http://tools.jb51.net/games/migong
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript HTML5 canvas实现打砖块游戏
本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块
-
JavaScript实现打地鼠小游戏
在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu
-
JS+Canvas实现的俄罗斯方块游戏完整实例
本文实例讲述了JS+Canvas实现的俄罗斯方块游戏.分享给大家供大家参考,具体如下: 试玩(没有考虑兼容低版本浏览器): ********************************************************************** 9月3日更新: 修复了隐藏的比较深的BUG 加上暂停.再来一次功能 速度随分数增高而递减 添加log日志 ****************************************************************
-
js H5 canvas投篮小游戏
本文实例为大家分享了H5 canvas投篮小游戏实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="init(19,'mylegend',820,500,main,LEvent.INIT)"> <div
-
JavaScript用200行代码制作打飞机小游戏实例
我去,我的图片分数被这个录屏软件的水印盖上了,扎心. 这个程序的文件以及代码全部上传到了github 程序下载链接传送门 这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了.所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西. 当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创. 代码部分我是通过一个大
-
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五
-
原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *
-
JS+canvas实现的五子棋游戏【人机大战版】
本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
20行js代码实现的贪吃蛇小游戏
前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
原生JavaScript编写canvas版的连连看游戏
本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos
-
javascript和HTML5利用canvas构建猜牌游戏实现算法
让我猜猜你心中的牌,先随机生成27张牌,不能重复列出三列牌,然后记住其中一张,然后点击牌所在的列,多次就可以猜出你想的牌. 如果是9张只要猜2次,如果是27张就是猜3次. 实现方法(27张): 如果点击了第三列,那就是说牌一定在这9张里面,就把第三列的9张牌平均给每列分3张,假设编号为123,456,789 再点击一次,如果点击第二列,那么猜的牌就在456里面,再分到三列,4,5,6 再点击一次,就可以知道牌是哪个了. 实现算法: 我是使用一维数组实现,第一次猜第三列就把第三列的数据和0,1,2