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


Posted in Javascript onJuly 19, 2017

本文实例讲述了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>
Javascript 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
javascript中new关键字详解
Dec 14 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 #Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 #Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 #Javascript
深入理解vue2.0路由如何配置问题
Jul 18 #Javascript
JavaScript实现二维坐标点排序效果
Jul 18 #Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python的Django框架安装全攻略
2015/07/15 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
母亲追悼会答谢词
2014/01/27 职场文书
C++程序员求职信范文
2014/04/14 职场文书
政协常委会议主持词
2015/07/03 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python