在HTML5如何写游戏中的开灯关灯

css的世界就是障眼法，当然开灯关灯也是，当发生开灯的时间的时候

background:#fff

然后关灯的时候

background:#000

当然这样做并不严谨，都要根据自己的需求来定制自己的代码，不过实现的思路就是这个样子

周围8格全变,点法:上中->左中->下中->右中->左上->右上->右下->左下。

解决这类问题的方法：

1、分析法：分析法是从题中所求问题出发，逐步找出要解决的问题所必须的已知条件的思考方法。

2、综合法：综合法就是从题目中已知条件出发，逐步推算出要解决的问题的思考方法。

3、分析、综合法：一方面要认真考虑已知条件，另一方面还要注意题目中要解决的问题是什么，这样思维才有明确的方向性和目的性。

根据示例可以看出，点了一个开关，其本身及四周开关取反，游戏代码如下，至于如何全部清空，慢慢点吧

<p style="padding:0margin:0"><input type="button" id="btn_0_0" value="0" onclick="change(0,0)" /><input type="button" id="btn_0_1" value="1" onclick="change(0,1)" /><input type="button" id="btn_0_2" value="1" onclick="change(0,2)" /><input type="button" id="btn_0_3" value="0" onclick="change(0,3)" /><input type="button" id="btn_0_4" value="1" onclick="change(0,4)" /><input type="button" id="btn_0_5" value="0" onclick="change(0,5)" /></p>

<p style="padding:0margin:0"><input type="button" id="btn_1_0" value="1" onclick="change(1,0)" /><input type="button" id="btn_1_1" value="0" onclick="change(1,1)" /><input type="button" id="btn_1_2" value="0" onclick="change(1,2)" /><input type="button" id="btn_1_3" value="1" onclick="change(1,3)" /><input type="button" id="btn_1_4" value="1" onclick="change(1,4)" /><input type="button" id="btn_1_5" value="1" onclick="change(1,5)" /></p>

<p style="padding:0margin:0"><input type="button" id="btn_2_0" value="0" onclick="change(2,0)" /><input type="button" id="btn_2_1" value="0" onclick="change(2,1)" /><input type="button" id="btn_2_2" value="1" onclick="change(2,2)" /><input type="button" id="btn_2_3" value="0" onclick="change(2,3)" /><input type="button" id="btn_2_4" value="0" onclick="change(2,4)" /><input type="button" id="btn_2_5" value="1" onclick="change(2,5)" /></p>

<p style="padding:0margin:0"><input type="button" id="btn_3_0" value="1" onclick="change(3,0)" /><input type="button" id="btn_3_1" value="0" onclick="change(3,1)" /><input type="button" id="btn_3_2" value="0" onclick="change(3,2)" /><input type="button" id="btn_3_3" value="1" onclick="change(3,3)" /><input type="button" id="btn_3_4" value="0" onclick="change(3,4)" /><input type="button" id="btn_3_5" value="1" onclick="change(3,5)" /></p>

<p style="padding:0margin:0"><input type="button" id="btn_4_0" value="0" onclick="change(4,0)" /><input type="button" id="btn_4_1" value="1" onclick="change(4,1)" /><input type="button" id="btn_4_2" value="1" onclick="change(4,2)" /><input type="button" id="btn_4_3" value="1" onclick="change(4,3)" /><input type="button" id="btn_4_4" value="0" onclick="change(4,4)" /><input type="button" id="btn_4_5" value="0" onclick="change(4,5)" /></p>

<script type="text/javascript" src="~/Js/jquery-1.8.2.min.js"></script>

<script type="text/javascript">

function change(i, j)

    {

        var thisval = $("#btn_" + i + "_" + j).val() == "1" ? "0" : "1"

        $("#btn_" + i + "_" + j).val(thisval)

        if ($("#btn_" + (i - 1)+"_"+j)) {

            var upval = $("#btn_" + (i - 1) + "_" + j).val() == "1" ? "0" : "1"

            $("#line" + (i - 1)).find("input").eq(j).val(upval)

        }

        if ($("#btn_" + (i + 1) + "_" + j)) {

            var downval = $("#btn_" + (i + 1) + "_" + j).val() == "1" ? "0" : "1"

            $("#line" + (i + 1)).find("input").eq(j).val(downval)

        }

        if ($("#btn_" + i + "_" + (j-1))) {

            var leftval = $("#btn_" + i + "_" + (j - 1)).val() == "1" ? "0" : "1"

            $("#btn_" + i + "_" + (j - 1)).val(leftval)

        }

        if ($("#btn_" + i + "_" + (j + 1))) {

            var rightval = $("#btn_" + i + "_" + (j + 1)).val() == "1" ? "0" : "1"

            $("#btn_" + i + "_" + (j + 1)).val(rightval)

        }

    }

</script>

---