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 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
jquery validate表单验证插件
Sep 06 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
js模块加载方式浅析
Aug 12 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python实现维吉尼亚加密法
2019/03/20 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
办理暂住证介绍信
2014/01/11 职场文书
打架检讨书500字
2014/01/29 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书