特效描述：HTML5 网页版黑白子五子棋 五子棋游戏。

通过原生js和canvas实现五子棋，可以试下左右手互搏

代码结构

1. HTML代码

PK

var text = document.getElementsByClassName('text');

//定义二维数组作为棋盘

var maps = new Array(16);

var len = maps.length;

// alert(len)

for(var i=0;i

maps[i] = new Array();

for(var j = 0;j

maps[i][j] = 0;

// console.log(maps[i][j]);

}

}

//初始化棋子

var black = new Image();

var white = new Image();

var clientWidth = document.documentElement.clientWidth;

black.src = "picture/black.png";

white.src = "picture/white.png";

//棋盘初始化

var can = document.getElementById('can');

var ctx = can.getContext("2d"); //获取该canvas的2D绘图环境对象

ctx.strokeStyle = "#333";

for(var m=0;m

for(var n=0;n

ctx.strokeRect(m*40+20,n*40+20,40,40); //绘制40的小正方形

}

}

//绘制文字

var can1 = document.getElementsByClassName('text');

var ctx1 = can1[0].getContext("2d");

ctx1.beginPath();

ctx1.font=("100px Georgia");

ctx1.fillStyle="#F70707";

// ctx1.fillText("Hello",40,100);

var isBlack = true;

//下子

can.οnclick=function play(e){

// alert(e.clientX);

//获取棋盘偏移量

var l = this.offsetLeft+20;

var t = this.offsetTop+20;

//获取点击相对棋盘坐标

var x =e.clientX - l;

var y = e.clientY -t;

// alert(x);

var row,col,index = 0;

if(x%40 < 20){

col = parseInt(x/40);

}else{

col = parseInt(x/40)+1;

}

row = y%40<20 ? parseInt(y/40) : parseInt(y/40)+1;

// alert(row+"行"+col+"行"); //第几列行第几列

if(maps[row][col]===0){

if(isBlack){

ctx.drawImage(black,col*40,row*40); //下黑子

isBlack = false;

maps[row][col] = 2; //黑子为2

iswin(2,row,col);

}else{

ctx.drawImage(white,col*40,row*40);

isBlack = true;

maps[row][col] = 1; //白子为1

iswin(1,row,col);

}

}

function iswin(t,row,col){

var orgrow,orgcol,total;

reset();

// alert(total);

//判断每行是否有五个

while(col>0 &&maps[row][col-1]==t){ //当前子左边还有

total++;

col--;

};

row = orgrow;

col = orgcol;

while(col+1<16 &&maps[row][col+1]==t){ //当前子右边还有

col++;

total++;

};

// alert(total);

celebrate();

//判断每列是否有五个

reset();

while(row>0&&maps[row-1][col]==t){ //当前子上面还有

total++;

row--;

}

row = orgrow;

col = orgcol;

while(row+1<16&&maps[row+1][col]==t){ //下面

total++;

row++;

}

celebrate();

//左上 右下有没有五个

reset();

while(row>0&&col>0&&maps[row-1][col-1]==t){ //左上1

row--;

col--;

total++;

}

row = orgrow;

col = orgcol;

while(row+1<16&&col+1<16&&maps[row+1][col+1]==t){ //右下1

row++;

col++;

total++;

}

// alert(total)

celebrate();

//左下 右上有没有五个

reset();

// alert(total);

while(row>0&&col+1<16&&maps[row-1][col+1]==t){ //右上

row--;

col++;

total++;

}

row = orgrow;

col = orgcol;

while(row+1<16&&col>0&&maps[row+1][col-1]==t){ //左下

row++;

col--;

total++;

}

// alert(total);

celebrate();

function celebrate(){ //显示哪边赢

if(total>=5){

if(t==1){

// alert("白子赢");

// text[0].innerHTML="白子赢";

// cxt1.clearRect(0,0,can1.width,can1.height);

ctx1.clearRect(0,0,can1[0].width,can1[0].height);

ctx1.fillText("白子赢",0,100);

}else{

// alert("黑子赢");

// text[0].innerHTML="黑子赢";

// cxt1.clearRect(0,0,can1.width,can1.height);

ctx1.clearRect(0,0,can1[0].width,can1[0].height);

ctx1.fillText("黑子赢",0,100);

}

}

}

function reset(){

orgrow = row;

orgcol = col;

total = 1;

}

}

}