定义棋盘数组的目的是为了不重复落子（0代表空时才能下）以及后续AI中统计一方是否最终获胜

我的问题我解答，重复看了一遍视频，跟着一步步做，结果可以了，这是js全部代码，嘻嘻，开心。

var  chessBoard = [];

for(var i = 0;i < 15;i++){

chessBoard[i] = [];

for(var j = 0;j<15;j++){

    chessBoard[i][j] = 0;

}

}

var me = true;

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

var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

var logo = new Image();

logo.src = "images/sj5.jpg";

logo.onload = function(){

    context.drawImage(logo,0,0,450,450);

    drawChessBoard();

}

var drawChessBoard = function(){

for(var i = 0;i<15;i++){

    context.moveTo(15 + i * 30,15);

    context.lineTo(15 + i * 30,435);

    context.stroke(); 

    context.moveTo(15,15 + i * 30);

    context.lineTo(435,15 + i * 30);

    context.stroke(); 

}

}

var oneStep = function(i,j,me){

context.beginPath();

context.arc(15 + i * 30,15 + j * 30,13,0,2*Math.PI);

context.closePath();

var gradient = context.createRadialGradient(15 + i * 30 + 2,15 + j * 30 - 2,13,15 + i * 30 + 2,15 + j * 30 - 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){

    var x = e.offsetX;

    var y = e.offsetY;

    var i = Math.floor(x / 30);

    var j = Math.floor(y / 30);

    if(chessBoard[i][j] == 0){

    oneStep(i,j,me);

    if(me){

        chessBoard[i][j] =1;

    }else{

        chessBoard[i][j] =2;

    }

    me = !me;

    }

}

刚发完就发现有这样的问题  是width和height样式要和视频里一样写在<canvas>标签里

<canvas id="chess" width="450px" height="450px">

标记一下黑棋白棋而已，0表示没有棋子，1表示当前是黑棋，2表示白棋。用来记录棋盘棋子情况

如果 me为真就执行括号里的代码

记事本都可以（坏笑）。

IDE只是辅助工具，用什么不影响结果，渲染是浏览器完成的。

个人认为使用这个parseInt()感谢您的支持

把黑白切换的代码放到可以下棋的分支里面就ok了。

你好，
你这个应该是上面那句 element 获取有问题，你用的是 getElementsByTagName，得到的是一个数组，如果是只有一个元素，那下面那句context 获取就应该是 chess[0].getContext('2d')。

渐变的问题我也不太清楚，对canvas画图了解不深，onload和onLoad里面正确的写法是onload，有时候工具提示也不一定是对的，要是不清楚可以去w3c或者菜鸟教程看一下。

建议换个浏览器调试一下或者清除一下浏览器缓存

上面同学的说法不太对，不是因为方面操作吧。

var x=e.offsetX;//获取的是相对于整个canvas容器的x坐标值

var y=e.offsetY;//获取的是相对于整个canvas容器的y坐标值

var i = Math.floor(x/30);

var j = Math.floor(y/30);

oneStep(i,j,me); //传入i，j值

context.arc(15+i*30,15+j*30,13,0,2*Math.PI) ;//oneStep(i,j,me)里的画圆函数

以上其实 可以 等同于 15+i*30=x; 15+j*30=y; 已知x,y值，通过除30取整获取i,j值再画圆。

以上可能是愚见，见笑了。

上代码，不上代码怎么知道

-2是向上和左的偏移，内部阴影加inset。

如果你是要说光线不应该是这么样，右下角有了左上角就不该有的话，那是他为了消除棋盘的纸片感偷懒用的方法，要css实现有厚度感的立体效果比较麻烦，还不如直接用图片，而且不是这讲的重点。

box-shadow 是css3的属性ie9以上才支持，你看是不是浏览器问题

发现了，i j写错了

现在可以了，原来要这样写

<canvas id="five" width="450px" height="450px"></canvas>

宽和高要写在标签里面而不是样式

没看出来哪里打错了？我也遇到同样问题。

TypeError: context.createRadiaGradient is not a function. (In 'context.createRadiaGradient(200,200,50,200,200,20)', 'context.createRadiaGradient' is undefined)

就是创建一个二维的绘图环境，2d就是二维，也可以说是一个画板。

五子棋的基本格式

jquery技术有要求吗?

多半是js有问题吧，用调试工具（Firefox的firebug或Chrome的控制台）查看一下。

me != me;

应该是me=!me;取反

粘贴出来代码看看

创建渐变出问题了。仔细检查一下。

没错啊，我刚才运行没有问题啊