13-1.htm

JavaScript网页特效实例大全

<basefont FACE="verdana" size="2">





<STYLE TYPE="text/css">
#board TD {width: 15pt; height: 15pt; font-size: 2pt; }

#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="我认为你最好还是改变主意！"
        board.rows[start.rows].cells[start.cols].style.backgroundColor=""
        return false
      }
      return true
    }    

    function moveIt() {
      if (!progress) return
      switch (event.keyCode) {
        case 37:
          if (maze[start.rows][1][start.cols-1]==0) {
            if (testNext(board.rows[start.rows].cells[start.cols-1]))
              message.innerText="向西..."
            start.cols--
            document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
          } else
          message.innerText="噢...你不能向西！"

          break;
        case 38: 
          if (maze[start.rows][0][start.cols]==0) {
            if (testNext(board.rows[start.rows-1].cells[start.cols]))
              message.innerText="向北..."
            start.rows--
            document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
          } else
          message.innerText="噢...你不能向北！"

          break;
        case 39: // right
          
          if (maze[start.rows][1][start.cols]==0) {
            if (testNext(board.rows[start.rows].cells[start.cols+1]))
              message.innerText="向东......"
            start.cols++
            document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
          }
          else
          message.innerText="噢...你不能向东！"

          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="向南..."
            start.rows++
            document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
          } else
          message.innerText="噢...你不能向南！"

          break;
      }
      if (document.all.board.rows[start.rows].cells[start.cols].innerText=="end") {
        message.innerText="你赢了！"
        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("'>&nbsp;</TD>")
      }
      document.write("</TR>")
    }
    var start = new Object
    start.rows = 0
    start.cols = 0
    progress=true
    document.onkeydown = moveIt;
  </SCRIPT>
  </TABLE>
  <P ID="message">&nbsp;</P>