JQuery做的一个简单的点灯游戏分享(2)
var grid = document.getElementById('content');
for (var i = 1; i <= x; i++) {
for (var j = 1; j <= y; j++) {
var button = createButton('bt' + i + j);
grid.appendChild(button);
}
var ret = document.createElement('br');
ret.className = "return";
grid.appendChild(ret);
}
createButton是一个方法，用于生成和设置html的元素。我这里button的id命名采用bt+行号+列号，这样方便知道以后按的是哪个按钮。为了方便期间，我规定行号和列号必须小于10（好偷懒啊），这也样直接取倒数第一个或第二个字符就知道坐标值了。
程序最重要的逻辑：按某个按钮改变自己和相邻按钮的状态。我们只需要把坐标取出来，再改变上下左右的按钮状态就行了（注意越界情况的判断），这里写一个判断吧：
$(".darkButton").click(function () {
changeButton(this.id);
var x = this.id.charAt(2);
var y = this.id.charAt(3);
if (x - 1 > 0) {
changeButton('bt' + (x - 1) + y);
}
注意this是在JQuery中定义的。如果不用JQuery想拿到这个this那可不容易。要提醒一点的就是下面这一段代码：
var newX = 1 + parseInt(x);
if (x + 1 <= maxX) {
changeButton('bt' + newX + y);
}
如果不parseInt，JavaScript会把1当作字符串和后面的x拼起来，这样id就不对了，所以把x转成int后相加即可（上面那个相减的情况不需要这样做）。这就是无类型语言的弊端之一吧，所以才会出现TypeScript（屌丝最近正在学的）。
重要部分都说完了，下面贴上htm文件所有的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Turn the light</title>
<link rel="stylesheet" href="app.css" rel="external nofollow" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(startButton).click(function () {
if (step > 0) {
if (confirm('乃确定要重新开始游戏么？') === false)
return;
}
if (isNaN($(X).val()) || isNaN($(Y).val())) {
alert('横纵的单元格中之能输入数字。');
return;
}
else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val() >= 10) {
alert('横纵的数量不能小于 4，且不能大于 9。');
return;
}
