第二步:把如下代码加入<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 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()