突然想起小时候玩的三大炮十五兵 写个程序实现
小时候常玩的三大炮十五兵,特别简单,棋盘容易画,棋子容易找,替代,就成了不受地点和环境限制的小游戏,那时候小伙伴总是会用三大炮形成俗称 “猪肚子阵” 的阵法,让人难以攻破,后来我琢磨很久,弄了一个八卦阵出来对抗他,总算是能赢了!好吧,叙旧到这里,且看代码
<!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>
录制的部分效果图:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战