我们首先创建一个棋盘，是一个画布，我们可以在上面画出棋盘
CSS给棋盘阴影，我们可以看出棋盘大致轮廓。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五子棋</title>
<style type="text/css">
#chess{
margin: auto;
display: block;
box-shadow: 5px 5px 5px #808080,-2px -2px 2px #D5D5D5;
cursor:pointer ;
}
</style>
</head>
<body>
<h3 align="center">益智五子棋</h3>
<canvas id="chess" width="450px" height="450px"></canvas>
</div>
</body>
</html>
``
现在我们需要一个画笔，以下的代码均是在script中。
我们画的是一个15*15的棋盘，通过for循环来让画笔划线
//画布画笔
var chess = document.getElementById("chess");
var context = chess.getContext("2d"); //context可以看作画笔
context.strokeStyle="#bfbfbf"; //画笔的颜色
//加载棋盘
window.onload = function(){ //页面加载完成事件
for(var i=0;i<15;i++){
context.moveTo(15,15+30*i); //横线（x，y）起始点
context.lineTo(435,15+30*i); //横线（x，y）终止点
context.stroke(); //画一条线
context.moveTo(15+30*i,15); //竖线
context.lineTo(15+30*i,435);
context.stroke();
}
}
可以看到我们的棋盘已经OK了
接下来就是要让棋盘上可以有下棋的效果
chess.onclick=function(e){
var i =(e.offsetX/30)|0; //得到点击的x坐标
var j = (e.offsetY/30)|0; //得到点击的y坐标
var x=i;
var y=j;
oneStep(x,y,true);
}
//这里player true为玩家 false为电脑（下面会写）
function oneStep(x,y,player){
var color;
context.beginPath(); //开始画圆
context.arc(15+30*x,15+30*y,13,0,2*Math.PI) //（x,y,半径，起始点，终止点2*PI即360度）
context.closePath(); //结束画圆
if(player){
color="black"; //玩家是黑色
}else{
color="red"; //电脑是红色
}
context.fillStyle=color; //设置填充色
context.fill(); //填充颜色
}
点击棋盘已经可以下棋了
电脑如何落子呢，我们这里的想法是首先给电脑遍历所有的赢法，由于棋盘上的每个子所占的赢的情况是多样的，所有我们这里不仅需要x，y来记录棋子的位置，还需要多加一维count来记录这是哪种胜利情况下的棋子，即用三维数组来统计赢法。
//赢法数组
var wins = [];
for(var i=0;i<15;i++){ //定义三维数组
wins[i]=[];
for(var j=0;j<15;j++){
wins[i][j]=[];
}
}
var count = 0; //（x，y）在的赢法种类
//横线能赢情况
for(var x=0;x<11;x++){
for(var y=0;y<15;y++){
for(var z=0;z<5;z++){ //z代表向后5个字
wins[x+z][y][count]=true; //true代表是一种赢法，用count记录下来
}
count++; //(x,y)在另一个赢法中
}
}
//竖线能赢情况
for(var x=0;x<15;x++){
for(var y=0;y<11;y++){
for(var z=0;z<5;z++){
wins[x][y+z][count]=true;
}
count++;
}
}
//正斜线能赢情况
for(var x=0;x<11;x++){
for(var y=0;y<11;y++){
for(var z=0;z<5;z++){
wins[x+z][y+z][count]=true;
}
count++;
}
}
//反斜线能赢情况
for(var x=0;x<11;x++){
for(var y=4;y<15;y++){
for(var z=0;z<5;z++){
wins[x+z][y-z][count]=true;
}
count++;
}
}
赢法是怎么得到的，我会再写一篇，敬请期待。
还有，下过棋的地方不能在下，我们可以遍历一波棋盘，设置0为没下过，1为已经下了
这样就可以在之后电脑或玩家出发事件时将其值由0变1，通过if判断是否可下
//遍历棋盘，是否有棋子，默认为0没有
var isChess = []
for(var i=0;i<15;i++){
isChess[i]=[];
for(var j=0;j<15;j++){
isChess[i][j]=0;
}
}
是时候判断一下到什么程度会赢了，我们分别给人或电脑设置赢的事件
刚刚说过，count是棋子（x，y）在的赢法，我们之后就可以判断wins是否为true来知道（x，y）是否在赢法count上了
//人和电脑赢的子占赢法的情况
var manWin=[];
var computerWin=[];
for(var i=0;i<count;i++){
manWin[i]=0;
computerWin[i]=0;
}
那么玩家下棋的部分我们就要改一改了
//玩家点击下棋
chess.onclick=function(e){
var i =(e.offsetX/30)|0;
var j = (e.offsetY/30)|0;
var x=i;
var y=j;
if(isChess[x][y]==0){ //是否有棋子，没有下子
isChess[x][y]=1; //值变一，代表有棋子
oneStep(x,y,true); //玩家颜色
for(var i=0;i<count;i++){ //遍历赢法
if(wins[x][y][i]){ //（x，y）在赢法i上 该赢法将赢数加一
manWin[i]++;
}
if(manWin[i]==5){ //为五，赢了
alert("你赢了");
}
}
computerPlayerAction(); //玩家下过棋后该电脑下
}
}
大家应该可以看到上面已经调了电脑下棋的方法了，接下来就是电脑。
没错，电脑需要判断玩家的棋是否要赢了，应需要判断自己的棋是否要赢了，我们这里设置了权值manOfValue和computerOfVAlue来表示他们，电脑遍历棋盘，查找每个空缺在玩家和电脑的赢法上的可能，即计算myWin和computerWin，并将其不同的值付给manOfValue和computerOfVAlue
function computerPlayerAction(){
var max=0;
var u=0; //电脑棋x坐标
var v=0; //电脑棋y坐标
var manOfValue=[]; //玩家赢的权值
var computerOfValue=[]; //电脑赢的权值
for(var x=0;x<15;x++){
manOfValue[x]=[];
computerOfValue[x]=[];
for(var y=0;y<15;y++){
manOfValue[x][y]=0;
computerOfValue[x][y]=0;
}
}
for(var x=0;x<15;x++){
for(var y=0;y<15;y++){
if(isChess[x][y]==0){ //查找空白棋
for(var i=0;i<count;i++){ //遍历count
if(wins[x][y][i]){
if(manWin[i]==1)
{manOfValue[x][y]+=200;} //给予权值
else if(manWin[i]==2)
{manOfValue[x][y]+=400;}
else if(manWin[i]==3)
{manOfValue[x][y]+=2000;}
else if(manWin[i]==4)
{manOfValue[x][y]+=10000;}
if(computerWin[i]==1)
{computerOfValue[x][y]+=220;} //电脑相同条件权值要比玩家高，主要还是自己赢
else if(computerWin[i]==2)
{computerOfValue[x][y]+=420;}
else if(computerWin[i]==3)
{computerOfValue[x][y]+=2200;}
else if(computerWin[i]==4)
{computerOfValue[x][y]+=20000;}
}
}
if(manOfValue[x][y]>max){ //循环判断最大权值
max=manOfValue[x][y];
u=x;
v=y;
}
if(computerOfValue[x][y]>max){
max=computerOfValue[x][y];
u=x;
v=y;
}
}
}
}
oneStep(u,v,false); //电脑判断完成，下棋
isChess[u][v]=1; //标记已下
for(var i=0;i<count;i++){ //（x，y）在赢法i上 该赢法将赢数加一
if(wins[u][v][i]){
computerWin[i]++;
}
if(computerWin[i]==5){
alert("电脑赢了");
}
}
}
到此电脑人就写好了，整理以上的代码，你的五子棋也可以跑起来
最后看一下预览图。
源码我会上传，有兴趣的朋友可以看看