2
私はちょうど昨日JavaScriptを練習し始めたので、少しティックタックのゲームを書くことにしましたが、セルオブジェクトのブール変数の設定中に問題が発生しました。ブール変数がputX（）またはputO（）関数によってtrueに設定されていても、ifステートメントは実行されないため、drawセルの関数は決して動作しないようです（IsEmpty（）関数コンソールログは、特定のセル）。Javascriptオブジェクトのブール変数always false
私は数時間前から問題を探していましたが、見つけられないかもしれません。何か見落としているかもしれません。
ここでは、コードです：
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>
おかげで正常に動作して古くなっているようです！今は魅力のように働いています。 – Graatz