javascript - 最终 else if 语句未运行

Question

我正在尝试用 JavaScript 制作一个基本的井字棋类型游戏。尽管 x 和 y 值在 if 语句的范围内，但除最后一个之外的所有空格都有效。

我不知道为什么最后的 else if 语句不起作用。

var c = document.getElementById("tictactoe");
var cx = c.getContext('2d');
var turn;
var boardArray = [0,0,0,
                  0,0,0,
                  0,0,0];

function drawGameBoard(){
  cx.lineWidth = 20;
  cx.strokeStyle = "#888";
  cx.lineCap = "round";

  cx.beginPath();
  cx.moveTo(200,20);
  cx.lineTo(200,580);
  cx.moveTo(400,20);
  cx.lineTo(400,580);
  cx.moveTo(20,200);
  cx.lineTo(580,200);
  cx.moveTo(20,400);
  cx.lineTo(580,400);
  cx.stroke();
}

$("#tictactoe").click(function(e){
  var x = e.offsetX;
  var y = e.offsetY;
  checkPos(x, y);
});

function checkPos(x, y){
  alert(x +"+"+ y);
  if((x<190 && x>10) && (y<190 && y>10)){
    gamePiece(1);
  } else if((x<390 && x>210) && (y<190 && y>10)){
    gamePiece(2);
  } else if((x<590 && x>410) && (y<190 && y>10)){
    gamePiece(3);
  } else if((x<190 && x>10) && (y<390 && y>210)){
    gamePiece(4);
  } else if((x<390 && x>210) && (y<390 && y>210)){
    gamePiece(5);
  } else if((x<590 && x>410) && (y<390 && y>210)){
    gamePiece(6);
  } else if((x<190 && x>10) && (y<590 && y>410)){
    gamePiece(7);
  } else if((x<390 && x>210) && (y<590 && y>410)){
      gamePiece(8);
  } else if((x<590 && x>410) && (y<590 && y>410)){
      gamePiece(9);
  } else{
    //do nothing
  }
}

function gamePiece(pos){
  if(isEmpty(pos)){
    alert(pos);
    if(pos == 1){
      cx.clearRect(80,80,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(80,80,50,50);
    } 
    if(pos == 2){
      cx.clearRect(280,80,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(280,80,50,50);
    } 
    if(pos == 3){
      cx.clearRect(480,80,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(480,80,50,50);
    } 
    if(pos == 4){
      cx.clearRect(80,280,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(80,280,50,50);
    } 
    if(pos == 5){
      cx.clearRect(280,280,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(280,280,50,50);
    }
    if(pos == 6){
      cx.clearRect(480,280,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(480,280,50,50);
    } 
    if(pos == 7){
      cx.clearRect(80,480,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(80,480,50,50);
    } 
    if(pos == 8){
      cx.clearRect(280,480,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(280,480,50,50);
    }  
    if (pos == 9){
      cx.clearRect(480,480,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(480,480,50,50);
    }  
  }
}

function isEmpty(pos){
 if(boardArray[pos] == 0){
   return true;
 } else{
    return false;
  }
}

window.onLoad = drawGameBoard();

body{
  padding: 0 auto;
  margin: 0 auto;
}

.wrapper-parent{
  width: 100%;
}

.canvas-wrapper{
  width: 100%;
  padding-bottom: 1em;
}

.ctic{
  display: block;
  padding: 0;
  margin: auto;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper-parent">
  <div class="canvas-wrapper">
    <canvas id="tictactoe" class="ctic" width="600px" height='600px'>
    </canvas>
  </div>
</div>

Answer 1

您需要像这样更改“isEmpty”函数:

function isEmpty(pos){
   // Array indexes start with 0 not 1
   // Also it is generally better to use strict equality in my opinion
   return (boardArray[(pos - 1)] === 0);
}

您的数组中有 9 个项目，这意味着最后一个项目的“pos”是“8”而不是“9”

这是带有小改动的完整片段。

var c = document.getElementById("tictactoe");
var cx = c.getContext('2d');
var turn;
var boardArray = [0,0,0,
                  0,0,0,
                  0,0,0];

function drawGameBoard(){
  cx.lineWidth = 20;
  cx.strokeStyle = "#888";
  cx.lineCap = "round";

  cx.beginPath();
  cx.moveTo(200,20);
  cx.lineTo(200,580);
  cx.moveTo(400,20);
  cx.lineTo(400,580);
  cx.moveTo(20,200);
  cx.lineTo(580,200);
  cx.moveTo(20,400);
  cx.lineTo(580,400);
  cx.stroke();
}

$("#tictactoe").click(function(e){
  var x = e.offsetX;
  var y = e.offsetY;
  checkPos(x, y);
});

function checkPos(x, y){
  alert(x +"+"+ y);
  if((x<190 && x>10) && (y<190 && y>10)){
    gamePiece(1);
  } else if((x<390 && x>210) && (y<190 && y>10)){
    gamePiece(2);
  } else if((x<590 && x>410) && (y<190 && y>10)){
    gamePiece(3);
  } else if((x<190 && x>10) && (y<390 && y>210)){
    gamePiece(4);
  } else if((x<390 && x>210) && (y<390 && y>210)){
    gamePiece(5);
  } else if((x<590 && x>410) && (y<390 && y>210)){
    gamePiece(6);
  } else if((x<190 && x>10) && (y<590 && y>410)){
    gamePiece(7);
  } else if((x<390 && x>210) && (y<590 && y>410)){
      gamePiece(8);
  } else if((x<590 && x>410) && (y<590 && y>410)){
      gamePiece(9);
  } else{
    //do nothing
  }
}

function gamePiece(pos){
  if(isEmpty(pos)){
    alert(pos);
    if(pos == 1){
      cx.clearRect(80,80,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(80,80,50,50);
    } 
    if(pos == 2){
      cx.clearRect(280,80,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(280,80,50,50);
    } 
    if(pos == 3){
      cx.clearRect(480,80,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(480,80,50,50);
    } 
    if(pos == 4){
      cx.clearRect(80,280,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(80,280,50,50);
    } 
    if(pos == 5){
      cx.clearRect(280,280,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(280,280,50,50);
    }
    if(pos == 6){
      cx.clearRect(480,280,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(480,280,50,50);
    } 
    if(pos == 7){
      cx.clearRect(80,480,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(80,480,50,50);
    } 
    if(pos == 8){
      cx.clearRect(280,480,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(280,480,50,50);
    }  
    if (pos == 9){
      cx.clearRect(480,480,50,50);
      cx.fillStyle = 'black';
      cx.fillRect(480,480,50,50);
    }  
  }
}

function isEmpty(pos){
   // Array indexes start with 0 not 1
   // Also it is generally better to use strict equality in my opinion
   return (boardArray[(pos - 1)] === 0);
}

window.onLoad = drawGameBoard();

body{
  padding: 0 auto;
  margin: 0 auto;
}

.wrapper-parent{
  width: 100%;
}

.canvas-wrapper{
  width: 100%;
  padding-bottom: 1em;
}

.ctic{
  display: block;
  padding: 0;
  margin: auto;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper-parent">
  <div class="canvas-wrapper">
    <canvas id="tictactoe" class="ctic" width="600px" height='600px'>
    </canvas>
  </div>
</div>