Javascript 对象的 boolean 变量始终为 false

Question

我昨天刚开始练习 JavaScript，所以我决定用它写一个小井字游戏，但是我在设置单元格对象的 boolean 变量时遇到了一个问题。尽管 putX() 或 putO() 函数将 boolean 变量设置为 true(IsEmpty() 函数控制台日志在单击特定单元格后工作正常，但绘制单元格的功能似乎永远不会工作，因为 if 语句永远不会执行).

我一直在寻找这个问题大约几个小时，但我找不到它，也许我只是忽略了一些东西。

代码如下:

var board = [];
var cellSize = 25;
var turn = 0;

function cell(posX, posY) {
  this.posX = posX;
  this.posY = posY;
  this.x = false;
  this.o = false;
}

cell.prototype.putX = function() {
  if (this.x === false && this.o === false) {
    this.x = true;
  }
};

cell.prototype.putO = function() {
  if (this.x === false && this.o === false) {
    this.o = true;
  }
};

cell.prototype.isEmpty = function() {
  if (this.x === false && this.o === false)
    return true;
  else {
    if (this.x === true) console.log("There is already X in this cell");
    else if (this.o === true) console.log("There is already O in this cell");
    return false;
  }
};

cell.prototype.draw = function() {
  if (this.x === true) {
    drawX(this.posX, this.posY);
  } else if (this.o === true) {
    drawO(this.posX, this.posY);
  }
};

function drawX(posX, posY, ctx) {
  var c = document.getElementById("game-canvas");
  var ctx = c.getContext("2d");
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(posX, posY);
  ctx.lineTo(posX + cellSize, posY + cellSize)
  ctx.moveTo(posX + cellSize, posY);
  ctx.lineTo(posX, posY + cellSize)
  ctx.stroke();
  ctx.lineWidth = 1;
}

function drawO(posX, posY) {
  var c = document.getElementById("game-canvas");
  var ctx = c.getContext("2d");
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(Math.floor((posX + cellSize / 2)), Math.floor(posY + cellSize / 2), 8, 0, 2 * Math.PI)
  ctx.stroke();
  ctx.lineWidth = 1;
}

function getBoardIndex(posX, posY) {
  var boardIndex = ((Math.floor(posY / cellSize) * getboardDimension())) + (Math.floor(posX / cellSize));
  return board[boardIndex];
}

function getboardDimension() {
  var c = document.getElementById("game-canvas");
  var dimension = c.width / cellSize;

  return dimension;
}

function initializeBoard() {
  var currentRow = 0;
  var currentCol = 0;

  for (var i = 0; i < getboardDimension() * getboardDimension(); i++) {
    if (currentCol == getboardDimension() && i > 0) {
      currentRow++;
      currentCol = 0;
    }

    board[i] = new cell(currentCol * cellSize, currentRow * cellSize);
    currentCol++;
  }

  drawBoard();
}

function getCursorPosition(canvas, event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;

  if (turn === 1) {
    if (getBoardIndex(x, y).isEmpty()) {
      getBoardIndex(x, y).putX();
      turn ^= 1;
    }
  } else if (turn === 0) {
    if (getBoardIndex(x, y).isEmpty()) {
      getBoardIndex(x, y).putO();
      turn ^= 1;
    }
  }
}

function drawBoard() {
  var c = document.getElementById("game-canvas");
  var ctx = c.getContext("2d");
  ctx.strokeStyle = "#333";

  for (var i = 0; i < board.length; i++) {
    board[i].draw();
  }

  for (var i = 0; i < getboardDimension(); i++) {
    ctx.beginPath();
    ctx.moveTo(0, i * cellSize);
    ctx.lineTo(getboardDimension() * cellSize, i * cellSize);
    ctx.moveTo(i * cellSize, 0);
    ctx.lineTo(i * cellSize, getboardDimension() * cellSize);
    ctx.stroke();
  }

  ctx.beginPath();
  ctx.moveTo(c.width, 0);
  ctx.lineTo(c.width, c.height);
  ctx.moveTo(0, c.height);
  ctx.lineTo(c.width, c.height);
  ctx.stroke();
}

* {
  box-sizing: border-box;
}
body {
  background-color: #1d1d1d;
  margin: 0;
  padding: 0;
}
.row {
  width: 100%;
}
.container {
  margin: auto;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}
[class*="col-"] {
  float: left;
  padding: 15px;
}
@media only screen and (max-width: 768px) {
  [class*="col-"] {
    width: 100%;
  }
}
.container {
  width: 1200px;
  margin: auto;
}
.container-fluid {
  width: 100%;
}
.content-center {
  text-align: center;
}
.input-text {
  color: #666;
  background-color: transparent;
  padding: 10px 10px 10px 10px;
  border: none;
  border-radius: 5px;
  border: 1px solid #333;
}
.input-text:focus {
  outline: none;
  border-color: #444;
}
.default-button {
  margin-top: 5px;
  font-family: calibri;
  background-color: #353535;
  color: #fff;
  border: none;
  padding: 10px 30px 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
}
.default-button:hover {
  background-color: #302f2f;
  cursor: pointer;
}
.default-button:focus {
  outline: none;
}
.info-button {
  margin-top: 5px;
  font-family: calibri;
  background-color: #00a1dd;
  color: #fff;
  border: none;
  padding: 10px 30px 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
}
.info-button:hover {
  background-color: #0090cc;
  cursor: pointer;
}
.info-button:focus {
  outline: none;
}
.warning-button {
  margin-top: 5px;
  font-family: calibri;
  background-color: #d93131;
  color: #fff;
  border: none;
  padding: 10px 30px 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
}
.warning-button:hover {
  background-color: #c82020;
  cursor: pointer;
}
.warning-button:focus {
  outline: none;
}
.success-button {
  margin-top: 5px;
  font-family: calibri;
  background-color: #0ea60f;
  color: #fff;
  border: none;
  padding: 10px 30px 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
}
.success-button:hover {
  background-color: #0d950e;
  cursor: pointer;
}
.success-button:focus {
  outline: none;
}
#game-canvas {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  display: block;
  background-color: transparent;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}
.start-button {
  width: 100%;
}
.restart-button {
  width: 100%;
}
.chat {
  font-family: Arial;
  font-size: 13px;
  resize: none;
  width: 100%;
  height: 360px;
  margin-top: 10px;
}
.comment {
  width: 100%;
  margin-top: 10px;
}

<head>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script type="text/javascript" src="ttt.js"></script>

<body onload="initializeBoard()">
  <div class="row">
    <div class="container">
      <div class="col-2"></div>
      <div class="col-3 content-center">
        <textarea disabled class="input-text chat"></textarea>
        <input type="text" name="" value="" class="comment input-text">
        <button type="button" name="button" class="default-button start-button">start game</button>
        <button type="button" name="button" class="warning-button restart-button">restart</button>
      </div>
      <div id="game-column" class="col-5 content-center">
        <canvas id="game-canvas" width="500" height="500" onclick="getCursorPosition(this, event)"> </canvas>
      </div>
      <div class="col-2"></div>
    </div>
  </div>
</body>

Answer 1

您不会在状态更改后重新绘制单元格。您在单元格中的逻辑在功能上没有任何问题。第一次绘制后 Canvas 不会再次绘制，因此单元格保持其旧状态。我在 putX/putO 函数中添加了一个重新绘制的单元格，并开始在板上显示选择。

var board = [];
var cellSize = 25;
var turn = 0;

function cell(posX, posY) {
  this.posX = posX;
  this.posY = posY;
  this.x = false;
  this.o = false;
}

cell.prototype.putX = function() {
  if (this.x === false && this.o === false) {
    this.x = true;
  }
  this.draw();
};

cell.prototype.putO = function() {
  if (this.x === false && this.o === false) {
    this.o = true;
  }
  this.draw();
};

cell.prototype.isEmpty = function() {
  if (this.x === false && this.o === false)
    return true;
  else {
    if (this.x === true) console.log("There is already X in this cell");
    else if (this.o === true) console.log("There is already O in this cell");
    return false;
  }
};

cell.prototype.draw = function() {
  if (this.x === true) {
    drawX(this.posX, this.posY);
  } else if (this.o === true) {
    drawO(this.posX, this.posY);
  }
};

function drawX(posX, posY, ctx) {
  var c = document.getElementById("game-canvas");
  var ctx = c.getContext("2d");
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(posX, posY);
  ctx.lineTo(posX + cellSize, posY + cellSize)
  ctx.moveTo(posX + cellSize, posY);
  ctx.lineTo(posX, posY + cellSize)
  ctx.stroke();
  ctx.lineWidth = 1;
}

function drawO(posX, posY) {
  var c = document.getElementById("game-canvas");
  var ctx = c.getContext("2d");
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(Math.floor((posX + cellSize / 2)), Math.floor(posY + cellSize / 2), 8, 0, 2 * Math.PI)
  ctx.stroke();
  ctx.lineWidth = 1;
}

function getBoardIndex(posX, posY) {
  var boardIndex = ((Math.floor(posY / cellSize) * getboardDimension())) + (Math.floor(posX / cellSize));
  return board[boardIndex];
}

function getboardDimension() {
  var c = document.getElementById("game-canvas");
  var dimension = c.width / cellSize;

  return dimension;
}

function initializeBoard() {
  var currentRow = 0;
  var currentCol = 0;

  for (var i = 0; i < getboardDimension() * getboardDimension(); i++) {
    if (currentCol == getboardDimension() && i > 0) {
      currentRow++;
      currentCol = 0;
    }

    board[i] = new cell(currentCol * cellSize, currentRow * cellSize);
    currentCol++;
  }

  drawBoard();
}

function getCursorPosition(canvas, event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;

  if (turn === 1) {
    if (getBoardIndex(x, y).isEmpty()) {
      getBoardIndex(x, y).putX();
      turn ^= 1;
    }
  } else if (turn === 0) {
    if (getBoardIndex(x, y).isEmpty()) {
      getBoardIndex(x, y).putO();
      turn ^= 1;
    }
  }
}

function drawBoard() {
  var c = document.getElementById("game-canvas");
  var ctx = c.getContext("2d");
  ctx.strokeStyle = "#333";

  for (var i = 0; i < board.length; i++) {
    board[i].draw();
  }

  for (var i = 0; i < getboardDimension(); i++) {
    ctx.beginPath();
    ctx.moveTo(0, i * cellSize);
    ctx.lineTo(getboardDimension() * cellSize, i * cellSize);
    ctx.moveTo(i * cellSize, 0);
    ctx.lineTo(i * cellSize, getboardDimension() * cellSize);
    ctx.stroke();
  }

  ctx.beginPath();
  ctx.moveTo(c.width, 0);
  ctx.lineTo(c.width, c.height);
  ctx.moveTo(0, c.height);
  ctx.lineTo(c.width, c.height);
  ctx.stroke();
}

* {
  box-sizing: border-box;
}
body {
  background-color: #1d1d1d;
  margin: 0;
  padding: 0;
}
.row {
  width: 100%;
}
.container {
  margin: auto;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}
[class*="col-"] {
  float: left;
  padding: 15px;
}
@media only screen and (max-width: 768px) {
  [class*="col-"] {
    width: 100%;
  }
}
.container {
  width: 1200px;
  margin: auto;
}
.container-fluid {
  width: 100%;
}
.content-center {
  text-align: center;
}
.input-text {
  color: #666;
  background-color: transparent;
  padding: 10px 10px 10px 10px;
  border: none;
  border-radius: 5px;
  border: 1px solid #333;
}
.input-text:focus {
  outline: none;
  border-color: #444;
}
.default-button {
  margin-top: 5px;
  font-family: calibri;
  background-color: #353535;
  color: #fff;
  border: none;
  padding: 10px 30px 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
}
.default-button:hover {
  background-color: #302f2f;
  cursor: pointer;
}
.default-button:focus {
  outline: none;
}
.info-button {
  margin-top: 5px;
  font-family: calibri;
  background-color: #00a1dd;
  color: #fff;
  border: none;
  padding: 10px 30px 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
}
.info-button:hover {
  background-color: #0090cc;
  cursor: pointer;
}
.info-button:focus {
  outline: none;
}
.warning-button {
  margin-top: 5px;
  font-family: calibri;
  background-color: #d93131;
  color: #fff;
  border: none;
  padding: 10px 30px 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
}
.warning-button:hover {
  background-color: #c82020;
  cursor: pointer;
}
.warning-button:focus {
  outline: none;
}
.success-button {
  margin-top: 5px;
  font-family: calibri;
  background-color: #0ea60f;
  color: #fff;
  border: none;
  padding: 10px 30px 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
}
.success-button:hover {
  background-color: #0d950e;
  cursor: pointer;
}
.success-button:focus {
  outline: none;
}
#game-canvas {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  display: block;
  background-color: transparent;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}
.start-button {
  width: 100%;
}
.restart-button {
  width: 100%;
}
.chat {
  font-family: Arial;
  font-size: 13px;
  resize: none;
  width: 100%;
  height: 360px;
  margin-top: 10px;
}
.comment {
  width: 100%;
  margin-top: 10px;
}

<head>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script type="text/javascript" src="ttt.js"></script>

<body onload="initializeBoard()">
  <div class="row">
    <div class="container">
      <div class="col-2"></div>
      <div class="col-3 content-center">
        <textarea disabled class="input-text chat"></textarea>
        <input type="text" name="" value="" class="comment input-text">
        <button type="button" name="button" class="default-button start-button">start game</button>
        <button type="button" name="button" class="warning-button restart-button">restart</button>
      </div>
      <div id="game-column" class="col-5 content-center">
        <canvas id="game-canvas" width="500" height="500" onclick="getCursorPosition(this, event)"> </canvas>
      </div>
      <div class="col-2"></div>
    </div>
  </div>
</body>