HTML勇闯迷宫游戏代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<HTML>
<HEAD>
<TITLE>勇闯迷宫</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY>
<BASEFONT face=verdana size=2>
<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 {
	FONT-WEIGHT: bolder; TEXT-DECORATION: none
}
#article {
	PADDING-RIGHT: 15pt; PADDING-LEFT: 5pt; BACKGROUND: white; PADDING-BOTTOM: 0px; FONT: 12pt Verdana, geneva, arial, sans-serif; COLOR: black; PADDING-TOP: 10pt
}
#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 {
	FONT-SIZE: 10pt
}
UL {
	FONT-SIZE: 10pt
}
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 {
	FONT-SIZE: 2pt; WIDTH: 15pt; HEIGHT: 15pt
}
TD.foot {
	FONT-SIZE: 10pt
}
#board TD.start {
	BORDER-TOP: black 2px solid; FONT-SIZE: 8pt; BACKGROUND: yellow; BORDER-LEFT: black 2px solid; COLOR: red; TEXT-ALIGN: center
}
#board TD.end {
	FONT-SIZE: 8pt; COLOR: green; TEXT-ALIGN: center
}
#message {
	PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; PADDING-BOTTOM: 0pt; MARGIN: 0pt; PADDING-TOP: 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=="blue") && (nxt.style.backgroundColor=='blue')) {
        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="blue"
          } 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="blue"
          } 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="blue"
          }
          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="blue"
          } 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 cellSpacing=0 cellPadding=0 align=center>
  <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("'>&nbsp;</TD>")
      }
      document.write("</TR>")
    }
    var start = new Object
    start.rows = 0
    start.cols = 0
    progress=true
    document.onkeydown = moveIt;
  </SCRIPT>
  <TBODY></TBODY></TABLE>
<P id=message>
</P></BASEFONT>
</BODY>
</HTML>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML勇闯迷宫游戏代码

分类

游戏

描述

Js写的HTML勇闯迷宫游戏代码，请使用键盘上的→←↑↓键进行游戏。比较益智的游戏，键盘上的方向键用来控制目标移动，试玩了一下，在30秒内，我不用重来第二次，就可以顺利找到出口，你呢？