问答详情
源自:2-5 落子实现

X轴的不能点击呢

为什么我的最后是只能走Y竖轴,不能走X横轴的呢?每次点击X轴,chessBoard[i,j]不能初始化为0,但是点击Y轴的就可以初始化为0呢?

var me = false;
var chessBoard = []; 
for(var i=0;i<15; i++){
chessBoard[i] = [];
for(var j=0; j<15; j++){
chessBoard[i,j] = 0;
}
}
var chess = document.getElementById('chess');
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

var logo = new Image();
logo.src = "image/yixiu.png";
logo.onload = function(){
context.drawImage(logo,0,0,450,450);
drawChessBoard();
/*context.beginPath();
context.arc(200, 200, 100,0, 2 * Math.PI);
context.closePath();
 
var gradient = context.createRadialGradient(200, 200, 50, 200, 200, 10);
gradient.addColorStop(0,"#0A0A0A");
gradient.addColorStop(1,"#636766");
context.fillStyle = gradient;
context.fill();*/

}

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);

//alert("me="+me+',i='+i+",j="+j+",="+ chessBoard[i,j]);
debugger;
if(chessBoard[i,j] == 0){
oneStep(i,j,me);
if(me){//如果是黑棋
chessBoard[i,j] = 1;
}else{//如果是白棋
chessBoard[i,j] = 2;
}
me = !me;
}

}

提问者:不断的学习者 2016-03-31 16:42

个回答

  • 短衣匹马
    2016-04-23 20:37:15

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

    为啥在

    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;
       }

    }


    下面这一段可以用双等,而上面不能

  • 不断的学习者
    2016-03-31 20:16:08

    解决了,这里学习到一个知识点,二维数组写法,arr[i][j],而非arr[i,j],汗颜呢

  • 不断的学习者
    2016-03-31 16:46:00


    var me = false;

    var chessBoard = []; 

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

    chessBoard[i] = [];

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

    chessBoard[i,j] = 0;

    }

    }

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

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

    context.strokeStyle = "#BFBFBF";

    var logo = new Image();

    logo.src = "image/yixiu.png";

    logo.onload = function(){

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

    drawChessBoard();

    /*context.beginPath();

    context.arc(200, 200, 100,0, 2 * Math.PI);

    context.closePath();

     

    var gradient = context.createRadialGradient(200, 200, 50, 200, 200, 10);

    gradient.addColorStop(0,"#0A0A0A");

    gradient.addColorStop(1,"#636766");

    context.fillStyle = gradient;

    context.fill();*/

    }


    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);


    //alert("me="+me+',i='+i+",j="+j+",="+ chessBoard[i,j]);

    debugger;

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

    oneStep(i,j,me);

    if(me){//如果是黑棋

    chessBoard[i,j] = 1;

    }else{//如果是白棋

    chessBoard[i,j] = 2;

    }

    me = !me;

    }

    }