javascript开发五指棋和围棋

javascript开发五指棋和围棋

javascript开发的五指棋和围棋的规则如下：

游戏规则：点击一下下面的方块会变一个颜色，第二次点击会变成另一种颜色，两种颜色交替进行，双击是悔棋！

1.html部分如下（用来布局显示的页面效果）：

                    <h3>五指棋/围棋</h3>
                    <p>游戏规则:点击一下下面的方块会变一个颜色，第二次点击会变成另一种颜色！两种颜色交替进行！双击是悔棋！</p>
                    <div class="games_2_con" id="game_yue1">
                       <table id="yue_2">
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                           <tr>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
         <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                           </tr>
                       </table>
                    </div>
                </div>

这里用table表格进行布局，可以根据实际的情况来增加或者减少表格的行或者列；

2.CSS部分代码如下（用来设置html显示出来的样子）：

table { border-spacing:0; border-collapse:collapse;}
.games_2_con{width:100%;height:400px;border:1px dashed #808080;}
.games_2_con table tr{width:100%;height:20px;}
.games_2_con table td{width:20px;height:20px;border:1px solid #808080;}

这里用来给表格赋予样式，也是能根据实际情况来给不同颜色、不同大小的展现样式；

3.javascript/js部分代码如下（用来写五指棋/围棋的功能逻辑）：

//五指棋/围棋
var yue_table = document.getElementById("yue_2");
var yue_num = 1;
yue_table.onclick = function (e) {
    e.target.style.background = yue_num++ % 2 ? "#808080" : "#000";
};
yue_table.ondblclick = function (e) {
    e.target.style.background = "#fff";
};

这里赋予五指棋/围棋的规则逻辑，如果需要设计更为复杂的规则的话，也都可以在这个的基础上面进行修改；

五指棋/围棋的效果如下：

图1

关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；