yuantongxin
2016-04-02 19:24
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; } }
再帮你具体分析下吧:你这个for循环逻辑是:
i=0时,j<chessBoard.length=0;
i=1时,j<chessBoard.length=1;
...
i=15时,j<chessBoard.length=15;
懂了不?
for (var i = 0; i < 15; i++) {
chessBoard[i]=[];
for (var j = 0; j < chessBoard.length; j++) {
chessBoard[i][j]=0;
};
};
这一段有问题,这个决定了你只能在右上半落子?j<15
JS实现人机大战之五子棋(UI篇)
35650 学习 · 136 问题
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1