1回答

• 

  未来开拓者

  2016-07-20 15:13:02

  已采纳

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

  
  

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

  var chessBoard=[];

  var me=true;

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

  chessBoard[i]=[];

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

  chessBoard[i][j]=0;

  }

  
  

  context.strokeStyle="#BFBFBF";

  
  

  
  

  
  

  var logo=new Image();

  
  

  logo.src ="\logobg.jpg";//载入图片

  
  

  logo.onload=function(){

  
  

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

  
  

  drawChessBoard();

  
  

  onStep(0,0,true);

  
  

  onStep(1,1,false);

  
  

  
  

  
  

  }

  
  

  
  

  
  

  //绘制棋盘

  
  

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

  
  

  }

  
  

  }

  
  

                                     //i,j指索引，me表示黑棋白棋

  
  

  var oneStep=function(i,j,me){  //此处i,j 间多了逗号

  
  

  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,8,15+i*30+2,15+j*30-2,5);//你这里渐变圆的半径弄太大了，建议将第一个圆半径设为8或9，第二个渐变圆半径设为5或6，效果会更好

  
  

         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(e){

  var x=Math.floor(e.offsetX/30);

  var y=Math.floor(e.offsetY/30);

  if(chessBoard[x][y]==0){

  oneStep(x,y,me);

  if(me)

  chessBoard[x][y]=1;

  else

  chessBoard[x][y]=2;

  me=!me; //结束时交换落子颜色

  }

  }

  // 鼠标触发事件你再仔细看看视频吧

  
  

  1 1

  TimzSh...

  非常感谢！

  2016-10-31 20:13:32

  共 1 条回复 >