突然想起小时候玩的三大炮十五兵 写个程序实现

小时候常玩的三大炮十五兵，特别简单，棋盘容易画，棋子容易找，替代，就成了不受地点和环境限制的小游戏，那时候小伙伴总是会用三大炮形成俗称 “猪肚子阵” 的阵法，让人难以攻破，后来我琢磨很久，弄了一个八卦阵出来对抗他，总算是能赢了！好吧，叙旧到这里，且看代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
    <style type="text/css">
        table{width:350px;height:350px;}
        td{border:1px solid #ccc;width:50px;height:50px;}
        .black{width:50px;height:50pX;background-color:black;border:solid 1px black;border-radius:50px;cursor:pointer;}
        .red{width:50px;height:50pX;background-color:red;border:solid 1px red;border-radius:50px;cursor:pointer;}
    </style>


    <table>
        <tr>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
        </tr>
        <tr>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
        </tr>
        <tr>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
            <td align="center"><div class="black"></div></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td align="center"><div class="red"></div></td>
            <td align="center"></td>
            <td align="center"><div class="red"></div></td>
            <td align="center"></td>
            <td align="center"><div class="red"></div></td>
        </tr>
    </table>

    
    <script type="text/javascript">
        $(function(){
            //页面加载完毕后开始执行的事件
            var now_action="";
            var tmp_html="";
            var $tmp_obj="";
            $("td").click(function(){
                var this_html=$(this).html();
                if(now_action=="")
                {
                    if(this_html==""){return false;}
                    //首次点击棋子 赋值
                    now_action="pick_up";
                    tmp_html=this_html;
                    $tmp_obj=$(this);
                    $tmp_obj.css("background-color","#ccc");
                }else if(now_action=="pick_up")
                {
                    //落下
                    $(this).html(tmp_html);
                    now_action="";
                    $tmp_obj.html("");
                    $tmp_obj.css("background-color","white");
                }else
                {
                    alert("error");
                }
            });
        });
    </script>
</body>
</html>

录制的部分效果图：

posted @ 2017-11-03 10:39  李照耀  阅读(834)  评论(0)  编辑  收藏  举报