Javascript object's boolean variable always false

Question

I've just started practicing JavaScript yesterday, so i decided to write a little tic tac toe game in it, but i came across a problem during setting the cell object's boolean variable. The draw cell's function seems to be never working because the if statement never executes, although the boolean variable is set to true by putX() or putO() function (The IsEmpty() function console log works just fine after clicking at a specific cell).

I've been looking for the problem for about few hours now and i can't find it, maybe im just overlooking something.

Here's the code:

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>

Afforess · Accepted Answer · 2017-01-19 15:07:08Z

You aren't re-drawing the cell after the state changes. There is nothing functionally wrong with your logic in the cell. The canvas is just not being drawn again after your first draw, so the cells remain in their old state. I added a cell re-draw in the putX/putO functions, and that started showing the selections on the board.

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>

andr1o · Accepted Answer · 2017-01-19 14:47:41Z

0

x/y supported only in Firefox, look at browser compartability https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect

answered Jan 19, 2017 at 14:47

andr1o

2693 silver badges7 bronze badges

1 Comment

Afforess Over a year ago

Anecdotally, this seems to be outdated as the demo works fine in Chrome 54

Collectives™ on Stack Overflow

Javascript object's boolean variable always false

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related