九宫格小游戏

输赢判断有点复杂了
对于赢的结果 [[0,1,2],[3,4,5],[6,7,8],[2,5,8],[1,4,7],[0,3,6],[0,4,8],[2,4,6]] 表示占有其中一组格子就赢了
变形一下 box = [[0,5,6],[0,4],[0,3,7],[1,5],[1,4,6,7],[1,3],[2,5,7],[2,4],[2,3,6]]，下标为格子编号
表示占据一个格子时，会影响到哪些赢的情况
令 goal = [0,0,0,0,0,0,0,0]
设 o 加1 x减1
所以在选中格子时有
t = box[this.innerHTML];
for(i=0; i<t.length; i++) {
  goal[t[i]] ++; //o
  //或  goal[t[i]] --; //x
}
比较时 只需检查 goal 中是否存在 3 或 -3

解决方案 »

  1.   

    谢谢    xuzuning
      

  2.   

    <!DOCTYPE>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>九宫格小游戏</title>
        <style type="text/css">
            *{margin: 0;padding: 0;list-style: none;text-align: center}
            #scs{margin: 200px auto 50px;width: 303px;height:303px;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd}
            #scs li{float: left;border-left: 1px solid #ddd;border-top: 1px solid #ddd;width: 100px;height: 100px;font:bolder 100px/100px Tahoma,Arial;color: #999;text-align: center;cursor: pointer}
        </style>
        <script type="text/javascript">
            var obj ={i:0,arr : [[0,1,2],[3,4,5],[6,7,8],[2,5,8],[1,4,7],[0,3,6],[0,4,8],[2,4,6]]};
            function game(){
                obj.i = 0;
                var li="",t;
                for(var i=9;i--;)li+="<li></li>";
                document.getElementById("scs").innerHTML = li;
                li = document.getElementById("scs").getElementsByTagName("li");
                for(i=li.length;i--;){
                    li[i].onclick = function(){
                        if(obj.i > 8)return false;
                        t = this.innerHTML = ["0","X"][obj.i++ % 2];
                        for(var i=obj.arr.length;i--;){
                            if(li[obj.arr[i][0]].innerHTML== t && li[obj.arr[i][1]].innerHTML==t && li[obj.arr[i][2]].innerHTML==t){
                                alert("您赢啦！");
                                obj.i = 10;
                                break;
                            }
                        }
                        obj.i == 9 && alert("平手！");//点完格子都没人赢当然就是平手
                        this.onclick = null;//每个格子只能点一次
                    }
                }
            }
            window.onload = function(){game()};
        </script>
    </head>
    <body>
        <ul id="scs"></ul>
        <button type="button" onclick="game()">重新开始</button>
    </body>
    </html>