JS实现的走迷宫小游戏完整实例
时间:2019-03-30
本文章向大家介绍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实现的:
在线迷宫小游戏:
http://tools.jb51.net/games/migong
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- Hadoop数据分析平台实战——180Oozie工作流使用介绍离线数据分析平台实战——180Oozie工作流使用介绍
- 博弈论及算法实现
- Hadoop数据分析平台实战——160Sqoop介绍离线数据分析平台实战——160Sqoop介绍
- HDU 2186 悼念512汶川大地震遇难同胞——一定要记住我爱你
- Hadoop数据分析平台实战——150Flume介绍离线数据分析平台实战——150Flume介绍
- Codeforces 714A Meeting of Old Friends
- Code forces 719A Vitya in the Countryside
- Hadoop数据分析平台实战——190Highcharts介绍离线数据分析平台实战——190Highcharts介绍
- HUST 1555 A Math Homework
- HUST 1541 Student’s question
- HDU 3785 寻找大富翁
- Hadoop数据分析平台实战——250JSSDK数据收集引擎编写离线数据分析平台实战——250JSSDK数据收集引擎编写
- HDU 2564 词组缩写
- 约瑟夫问题方法总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解Gson的TypeToken原理
- 时间序列分解和异常检测方法应用案例
- 为什么机器学习应用交易那么难(上)
- 快速学习-sentinel动态规则扩展
- Git-git diff命令结果解析
- 快速学习-sentinel实时监控
- Git技术干货!工作中Git的使用实践和常用命令合集!
- gremlin-both()与bothE().bothV()的区别
- C# Time.deltaTime 增量时间
- Docker--docker ps 命令与结果解析
- Junit5系列-Junit5中@DisplayName自定义名称
- Junit5系列-Junit5中Assertions断言类
- 使用libev监视文件夹下文件(夹)属性变动的方案和实现
- C++拾取——stl标准库中集合交集、并集、差集、对称差方法
- netty结合Protostuff传输对象案例,单机压测秒级接收35万个对象