您的位置：首页 > 其它

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

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

<!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>


录制的部分效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航