12、动脑小游戏

12、动脑小游戏

脚本说明:

第一步:把如下代码加入<head>区域中

<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()

d.location.replace("/assist/listing.asp?url="+escape(url)+"&desc="+escape(desc)) 

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>

    #board {cursor: default}   

    #board TD {width: 25px; height: 25px; }

  </style>

 

 

 

第二步:把如下代码加入<body>

<script>

    var size=10

    var moves = 0

    var off = size*2

    var on = 0

    var current = null

    function doOver() {

      if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {

        if (current!=null)

          current.style.backgroundColor = current._background

        event.srcElement._background = event.srcElement.style.backgroundColor

        event.srcElement.style.backgroundColor = "lightgrey"

        current = event.srcElement

      }

    }

 

    function setColor(el) {

      if ((el._background=="") || (el._background==null)) {

        el.style.backgroundColor = "yellow"

        el._background = "yellow"

      } else {

        el.style.backgroundColor = ""

        el._background = ""

      }

    }

 

    function countLights() {

      off = 0; on = 0

      for (var x=0; x < size; x++)

        for (var y=0; y < size; y++) {

          var p = board.rows[x].cells[y]

          if (p._background=="yellow")

            on++

          else

            off ++

        }

        document.all.on.innerText = on

      if (off!=0)    

        document.all.off.innerText = off

      else

        document.all.off.innerText = "You Win!"

      return (off==0)

    }

 

    function doClick() {

      setColor(current)    

      var cellIdx = current.cellIndex

      var rowIdx = current.parentElement.rowIndex

      if (rowIdx>0)

        setColor(board.rows[rowIdx-1].cells[cellIdx])

      if (rowIdx<size-1)

        setColor(board.rows[rowIdx+1].cells[cellIdx])

      if (cellIdx>0)

        setColor(board.rows[rowIdx].cells[cellIdx-1])

      if (cellIdx<size-1)

        setColor(board.rows[rowIdx].cells[cellIdx+1])

      moves++

      document.all.moves.innerText = moves

      win = countLights()

      if (win) {

        board.onclick = null

        board.onmouseover = null

        current.style.background = "yellow"

      }

    }

 

    function buildBoard() {

      var str = "<TABLE ID=board ONSELECTSTART=\"return false\" ONCLICK=\"doClick()\" ONMOUSEOVER=\"doOver()\" cellspacing=0 cellpadding=0 border=5>"

      for (var x=0; x < size; x++) {

        str+="<TR>"

        for (var y=0; y < size; y++) {

          str+="<TD> </TD>"

        }

        str+="</TR>"

      }

      str+="</TABLE>"

      return str

    }

 

    function newGame() {

      size = document.all.gameSize.value

      if (size<3)

        size=3

      if (size>15)

        size=15

      document.all.gameSize.value = size

      document.all.board.outerHTML = buildBoard()

      moves=0

      document.all.moves.innerText = moves

      countLights()

 

    }

   

  </script>

  <p align="center"><big><font color="#0000FF">在方格上点击,你可以将下面的方格全部填成黄色吗</font><strong><font

color="#FF0000"><big><big></big></big></font></strong></big></p>

 

<p align="center"><font color="#0000FF">快开动你智慧脑筋,看看有什么技巧与规律。</font></p>

 

<table border="1" width="100%">

  <tr>

    <td width="50%"><div align="right"><table ID="score" border="0" width="284">

      <tr>

        <td width="52">移动: </td>

        <td id="moves" width="33">0</td>

        <td width="42">灯灭:</td>

        <td id="off" width="36">25</td>

        <td width="46">灯亮:</td>

        <td id="on" width="39">0</td>

      </tr>

    </table>

    </div></td>

    <td width="50%"><div align="left"><table width="204">

      <tr>

        <td width="54">大小: </td>

        <td width="41"><input ID="gameSize" TYPE="text" VALUE="10" SIZE="2"></td>

        <td width="97"><input ONCLICK="newGame()" TYPE="button" VALUE="开始游戏"></td>

      </tr>

    </table>

    </div></td>

  </tr>

</table>

 

<p align="center"><script>

    document.write(buildBoard())

  </script></p>

 

 

Write a comment

Comments: 0