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>

Answer 1

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>

Answer 2

x/y 仅在 Firefox 中支持，查看浏览器兼容性https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect