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