JavaScript编写人机对战五子棋(五)

实现点击落子功能：

//获取canvas对象
var chess = document.getElementById('chess');
//获取canvas上下文
var ctx = chess.getContext('2d');
//背景图
var back = new Image();
back.src = "img/back.jpg";
//控制黑白顺序
var me = true;
//声明二维数组记录棋子空0,黑1,白2
var chessBoard = [];
for(var i = 0;i<15;i++){
chessBoard[i] = [];
for (var j = 0;j<15;j++) {
chessBoard[i][j] = 0;
}
}

//绘制棋盘
function drawChessBoard(context){
back.onload = function(){
context.drawImage(back,0,0,450,450);
for (var i=0;i<15;i++) {
context.strokeStyle = 'black';
context.moveTo(15+i*30,15);
context.lineTo(15+i*30,435);
context.stroke();
context.beginPath();
context.moveTo(15,15+i*30);
context.lineTo(435,15+i*30);
context.stroke();

}
}

}
//绘制棋子
function drawChessPiece(context,i,j,me){
context.beginPath();
context.arc(15+30*i,15+30*j,13,0,2*Math.PI);
context.closePath();
var gradient = context.createRadialGradient(15+30*i+2,15+30*j-2,13,15+30*i+2,15+30*j-2,0);
if(me){
gradient.addColorStop(0,"#0A0A0A");
gradient.addColorStop(1,"#636766");
}else{
gradient.addColorStop(0,"#D1D1D1");
gradient.addColorStop(1,"#F9F9F9");
}
context.fillStyle = gradient;
context.fill();
}
//下棋事件绑定
chess.onclick = function(e){
x = e.offsetX;
y = e.offsetY;
i = Math.floor(x/30);
j = Math.floor(y/30);
if(chessBoard[i][j] == 0){
drawChessPiece(ctx,i,j,me);
if(me){
chessBoard[i][j] = 1;//黑棋
}else{
chessBoard[i][j] = 2;//白棋
}
me = !me;
}

}
//启动方法
function start(){
drawChessBoard(ctx);

}


效果图如下: