Javascript:动脑小游戏
脚本说明:
第一步:把如下代码加入<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>