1回答

• 

  慕仔8415870

  2021-07-11 09:45:04

  我的问题我解答，重复看了一遍视频，跟着一步步做，结果可以了，这是js全部代码，嘻嘻，开心。

  
  

  var  chessBoard = [];

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

  chessBoard[i] = [];

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

      chessBoard[i][j] = 0;

  }

  }

  
  
  

  var me = true;

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

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

  
  

  context.strokeStyle = "#BFBFBF";

  
  

  var logo = new Image();

  logo.src = "images/sj5.jpg";

  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;

      }

  }

  
  

  0 0