最近带新人做培训，聊起了JQuery的用法，于是，就实地教学，讲了选择器和事件处理。算是带入门了。
结果后来我一看我做的演示案例，基本可以做成一个像两个人下棋的例子，于是花了点点时间就把代码重新撸了一把。
代码如下：
<html>
<head>
<title>FIVE CHISS</title>
<style>
h1{
padding:30px 30px 0px;
margin:0;
}
table{
border-collapse:collapse;
}
td{
width:30px;
height:30px;
}
.pan{
padding:30px;
position:relative;
}
.bg table{
border-right:1px solid #999;
border-bottom:1px solid #999;
}
.bg td{
background:#999;
}
.bg td div{
width:31px;
height:31px;
background:#fff;
margin:0 -1px -1px 0;
}
.qizi{
position:absolute;
z-index:99;
left:15px;
top:15px;
}
.qizi td div{
border-radius:50%;
width:26px;
height:26px;
margin:2px;
cursor:pointer;
}
.qizi td div.showtrue{
background: radial-gradient(at 30% 30%, #fbef6e 20%, orange 80%);
}
.qizi td div.showfalse{
background: radial-gradient(at 30% 30%, #07f560 20%, green 80%);
}
</style>
</head>
<body>
<h1>五子棋<em>v0.1</em></h1>
<div class="pan">
<div class="bg">
<table id="qipan">
</table>
</div>
<div class="qizi">
<table id="qizi">
</table>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
bg=tdmake(20);//线
qizi=tdmake(21);//棋子
user=false;//下棋者
userA=[];//A用户坐标
userB=[];//B用户坐标
//生成棋盘
$('#qipan').html(bg);
//生成棋子
$('#qizi').html(qizi);
//写棋子点击事件
$('#qizi td div').each(function(){
$(this).one("click",function(){
$(this).addClass('show'+user);
xy=[
$(this).attr('x'),
$(this).attr('y')
]
if(user==false)
{
userA.push(xy);
//判断输赢
check_win(userA,xy);
}else{
userB.push(xy);
//判断输赢
check_win(userB,xy);
}
//轮到另一人下棋
user=!user;
});
}
);
});
function check_win(arr,pointxy)
{
//canwin
}
function tdmake(num)
{
tmp='';
for(i=0;i<num;i++)
{
tmp=tmp+'<tr>';
for(j=0;j<num;j++)
{
tmp=tmp+'<td><div x="'+i+'" y="'+j+'"></div></td>';
}
tmp=tmp+'</tr>';
}
return tmp;
}
</script>
</body>
</html>
源代码：five.zip
