为什么只能在一半的区域下棋子？

Question

var chessBoard=[]; var me=true; for (var i = 0; i < 15; i++) { chessBoard[i]=[]; for (var j = 0; j < chessBoard.length; j++) { chessBoard[i][j]=0; }; }; var chess=document.getElementById('chess'); var context=chess.getContext('2d'); context.strokeStyle="#bfbfbf"; var logo=new Image(); logo.src="images/logo.png"; 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; } }

Answer 1

我也是按着教程敲的，没什么问题你看看吧

var chess = document.getElementById("chess");
var context = chess.getContext('2d');
var me = true;
var cheseBoard = [];
context.strokeStyle = "#bfbfbf"

for (var i = 0; i < 15; i++) {
    cheseBoard[i] = [];
    for (j = 0; j < 15; j++) {
        cheseBoard[i][j] = 0;
    }
}

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, 50, 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();
    context.stroke();
}



chess.onclick = function(event) {
    var x = event.offsetX;
    var y = event.offsetY;

    var i = Math.floor(x / 30);
    var j = Math.floor(y / 30);
    if (cheseBoard[i][j] == 0) {
        oneStep(i, j, me);
        if (me) {
            cheseBoard[i][j] = 1;
        } else {
            cheseBoard[i][j] = 2;

        }
        me = !me;
    }
}