如果语句没有运行，则返回else

时间：2016-12-15 03:02:45

标签： javascript

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

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

＆＃13;
＆＃13; 
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();
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

您需要更改＆＃34; isEmpty＆＃34;功能如下：

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个项目，这意味着＆＃34; pos＆＃34;对于最后一项是＆＃34; 8＆＃34;不是＆＃34; 9＆＃34;

这是一个完整的代码片段。

＆＃13;
＆＃13; 
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();
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

数组的数组基于Javascript ...你的pos变量是1基于...

只需调整isEmpty函数...... 

function isEmpty(pos){
 if(boardArray[pos - 1] == 0){
   return true;
 } else{
    return false;
  }
}
相关问题
最新问题