📄 lattice.htm
字号:
<html>
<head>
<title>
涂格子
</title>
<style>
#board {cursor: default}
#board TD {width: 25px; height: 25px; }
</style>
</head>
<body>
<table border="1" width="90%">
<tr>
<td width="50%" height="27">
<div align="right">
<table id="score" border="0" width="250">
<tr>
<td width="45" align="center">移动:</td>
<td id="moves" width="37">0</td>
<td width="45" align="center">灯灭:</td>
<td id="off" width="37">100</td>
<td width="45" align="center">灯亮:</td>
<td id="on" width="37">0</td>
</tr>
</table>
</div>
</td>
<td width="50%" height="27">
<div align="left">
<table width="185">
<tr>
<td width="54">大小: </td>
<td width="31">
<input id="gameSize" type="text" value="10" size="2" name="text"></td>
<td width="97">
<input onClick="newGame()" type="button" value="开始游戏" name="button"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="27" align="center">
<script language="Javascript">
var size = 10; //大小
var moves = 0; //移动步数
var off = size*size; //灭灯数
var on = 0; //亮灯数
var current = null; //当前方格
//处理鼠标经过事件 鼠标从其它部分移动到某元素上时
//将鼠标移出的方格恢复颜色，将鼠标所在的方格变为灰色
function doOver()
{
//srcElement用于得到触事件的对象名，tagName用于得到标识符名
if ((event.srcElement.tagName=="TD") && (current!=event.srcElement))
{
if (current!=null)
current.style.backgroundColor = current._background; //将鼠标移出的方格，恢复颜色
//保存当前颜色，_background的值只有click时才改变，而backgroundColor的值mouseOver和Click时都改变
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; //document.all得到所有有效标示符的对象集合 documnet.all.on即表示name="on"的表格一项
if (off!=0) //innerText得到或设置开始标志和结束标志之间的文本
document.all.off.innerText = off;
else
document.all.off.innerText = "You Win!";
return (off==0); //返回是否胜利
}
//鼠标点击某方格
function doClick()
{
setColor(current); //当前的方格变色
//cellIndex用于返回单元格在所在的行中的位置，cells集合包含了该行所有元素
//parentElement得到父对象，rowIndex得到是第几行
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++; //步数加1
document.all.moves.innerText = moves; //显示步数
win = countLights() //测试是否胜利
if (win)
{
board.onclick = null; //胜利后，不处理Click和MouseOver鼠标事件
board.onmouseover = null;
//current.style.background = "yellow";
}
}
//产生画出size*size的面板的string
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(); //outerHTML用HTML语言设置对象内容
moves=0;
document.all.moves.innerText = moves;
countLights();
}
document.write(buildBoard());
</script>
</td>
</tr>
<tr>
<td colspan="2" height="27">开动脑筋，将方格全部填成黄色，看看有什么规律和技巧吧。</td>
</tr>
</table>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -