hollo
2016-04-13 14:11
var me = true; 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 = "#bbb";//棋盘线的颜色 function drawChessBoard(){ 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 logo = new Image(); logo.src = "img/logo.png"; logo.onload = function(){ context.drawImage(logo,0,0,450,450); drawChessBoard(); } //棋子 i j 是棋子的坐标 me判断是黑棋白棋 function oneStep(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+i*30-2,13,15+i*30+2,15+i*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; } }
66行 me =!me 写反了
JS实现人机大战之五子棋(UI篇)
35652 学习 · 136 问题
相似问题