替汁儿妹妹Javascript版块造势--HTML5之五子棋设计初步
汁儿妹妹为振兴Javascript版而呕心沥血，实在令人钦佩。在汁儿妹妹的带动下，认真拜读汁儿妹妹近期所发的代码，发现HTML5之Javascript功能着实强大，为帮Javascript版块造势，特奉上五子棋游戏初步代码，所谓初步，就是画了棋盘，能下黑白子，没有判断胜负，不能自动走子，只起个抛砖引玉的作用，献丑了（360浏览器运行）：
程序代码：<!DOCTYPE html>
<html lang="en" xmlns="http://www. <meta charset="utf-8" />
<title>五子棋</title>
</head>
<body>
<canvas width="616" height="616" style="background-color:#A0A000;" id="am"></canvas>
<script>
var ostart=20,oend=596,gc=document.getElementById('am').getContext('2d'),qj=new Array(361),zc=-1;
var mousexy=document.getElementById("am"); //用于鼠标点击坐标计算
window.document.onmousedown=mouseDown; //激活鼠标点击事件，为程序设计标准起见，建议放到后面执行（编译类型程序需要，否则必须前面声明）
function drawqp()
{//画棋盘
var i,j,k;
j=(oend-ostart)/18;
gc.strokeStyle="#000000";
gc.lineWidth=1;
for(i=0;i<19;i++)
{
gc.moveTo(ostart+i*j,ostart);
gc.lineTo(ostart+i*j,oend); //画竖线
gc.moveTo(ostart,ostart+i*j);
gc.lineTo(oend,ostart+i*j); //画横线
gc.stroke();
}
for(i=3;i<=15;i+=6)
{
for(k=3;k<=15;k+=6)
{
gc.beginPath();
gc.arc(ostart+i*j,ostart+k*j,5,0,2*3.14);
gc.fill(); //画星位
}
}
}
function drawqz(x,y,c)
{//画棋子，x/y为棋盘上坐标0-18，c为子色，-1黑棋，1白棋，0无棋子
var i,j,ci,co,hls,hle,sls,sle,x1,y1,r,qz;
j=(oend-ostart)/18;r=j*0.5-2;
x1=x*j+ostart;y1=y*j+ostart;
ci='rgb(250,250,250)';co='rgb(200,200,200)';
if(c<0){ci='rgb(100,100,100)';co='rgb(20,20,20)';}
if(c)
{//画棋子
gc.beginPath();
gc.arc(x1,y1,r,0,2*3.14);
qz=gc.createRadialGradient(x1,y1,0,x1,y1,r);
qz.addColorStop(0, ci);
qz.addColorStop(1, co);
gc.fillStyle = qz;
gc.fill(); //画棋子
//gc.strokeStyle = 'rgb(255,255,255)';
//gc.stroke(); //棋子勾白边
}
else
{//消棋子
hls=x1-r;hle=x1+r;sls=y1-r;sle=y1+r;
gc.clearRect(hls,hls,2*r,2*r);
if(!x)hls=x1;
if(!y)sls=y1;
if(x==18)hle=x1;
if(y==18)sle=y1;
//五子棋只处理走子，无需消棋子，后面的恢复线、星位的画图不处理，如编走围棋时在做处理
}
}
function mouseDown()
{
if (event.button)return; //非鼠标左键退出
var b = mousexy.getBoundingClientRect(),x,y,x1,y1,i,j,k;
j=(oend-ostart)/18
x=event.x-b.left-ostart;
y=event.y-b.top-ostart; //获取鼠标在canvas标签里坐标
if(x%j>10)x=x+2*(j-x%j);
if(y%j>10)y=y+2*(j-y%j);
x1=x%j;y1=y%j;
if(x1<10&&y1<10)
{//鼠标点击在下子的范围,处理下子
x=parseInt(x/j);y=parseInt(y/j);
drawqz(x,y,zc);
zc*=-1;
}
}
drawqp();
</script>
</body>
</html> 
，不过递归可能要用。下面的代码可以自己跟自己走了,请有兴趣的检测是否有错：