我正在编写一个Tic-Tac-Toe游戏，但它表示谁首先进入游戏循环而不绘制网格，即使它应该首先绘制网格。它应该首先绘制网格，但它不会那样做。
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
//Setup
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function getRandomFromInterval(interval) {
return(Math.floor(Math.random() * interval));
};
function isNumberBetween(number, low, high) {
return(number >= low && number <= high);
};
function circle (x, y, radius, color, filled) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (filled === true) {
ctx.fillStyle = color;
ctx.fill()
} else {
ctx.strokeStyle = color;
ctx.stroke();
};
};
function Spot(x, y, cloneID, type) {
this.x = x,
this.y = y,
this.cloneID = cloneID,
this.type = type
};
Spot.prototype.drawX = function () {
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(this.x - 30, this.y - 30);
ctx.lineTo(this.x + 30, this.y + 30);
ctx.moveTo(this.x - 30, this.y + 30);
ctx.lineTo(this.x + 30, this.y - 30);
ctx.stroke();
};
Spot.prototype.drawCircle = function () {
ctx.lineWidth = 4;
circle(this.x, this.y, 30, "Black", false);
};
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.moveTo(0, 200);
ctx.lineTo(300, 200);
ctx.moveTo(100, 0);
ctx.lineTo(100, 300);
ctx.moveTo(200, 0);
ctx.lineTo(200, 300);
ctx.stroke();
var spot1 = new Spot(50, 50, 1, "");
var spot2 = new Spot(150, 50, 2, "");
var spot3 = new Spot(250, 50, 3, "");
var spot4 = new Spot(50, 150, 4, "");
var spot5 = new Spot(150, 150, 5, "");
var spot6 = new Spot(250, 150, 6, "");
var spot7 = new Spot(50, 250, 7, "");
var spot8 = new Spot(150, 250, 8, "");
var spot9 = new Spot(250, 250, 9, "");
var availableSpots = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var currentTurn = "";
var playerSymbol = "";
var opponentSymbol = "";
if (getRandomFromInterval(2) === 1) {
currentTurn = "player";
playerSymbol = "X";
opponentSymbol = "O";
alert("The player is going first!");
} else {
currentTurn = "opponent"
playerSymbol = "O"
opponentSymbol = "X"
alert("The opponent is going first!");
};
//Game
while (!(spot1.type === "X" && spot2.type === "X" && spot3.type === "X") && !(spot1.type === "O" && spot2.type === "O" && spot3.type === "O")
&& !(spot4.type === "X" && spot5.type === "X" && spot6.type === "X") && !(spot4.type === "O" && spot5.type === "O" && spot6.type === "O")
&& !(spot7.type === "X" && spot8.type === "X" && spot9.type === "X") && !(spot7.type === "O" && spot8.type === "O" && spot9.type === "O")
&& !(spot1.type === "X" && spot4.type === "X" && spot7.type === "X") && !(spot1.type === "O" && spot4.type === "O" && spot7.type === "O")
&& !(spot2.type === "X" && spot5.type === "X" && spot8.type === "X") && !(spot2.type === "O" && spot5.type === "O" && spot8.type === "O")
&& !(spot3.type === "X" && spot6.type === "X" && spot9.type === "X") && !(spot3.type === "O" && spot6.type === "O" && spot9.type === "O")
&& !(spot1.type === "X" && spot5.type === "X" && spot9.type === "X") && !(spot1.type === "O" && spot5.type === "O" && spot9.type === "O")
&& !(spot3.type === "X" && spot5.type === "X" && spot7.type === "X") && !(spot3.type === "O" && spot5.type === "O" && spot7.type === "O") && availableSpots.length != 0) {
if (currentTurn === "player") {
$("canvas").click(function (event) {
if (isNumberBetween(event.pageX, 0, 100) && isNumberBetween(event.pageY, 0, 100) && spot1.type === "") {
availableSpots.pop(1);
spot1.type = playerSymbol;
if (playerSymbol === "X") {
spot1.drawX();
} else {
spot1.drawCircle();
};
currentTurn = "opponent";
} else if (isNumberBetween(event.pageX, 100, 200) && isNumberBetween(event.pageY, 0, 100) && spot2.type === "") {
availableSpots.pop(2);
spot2.type = playerSymbol;
if (playerSymbol === "X") {
spot2.drawX();
} else {
spot2.drawCircle();
};
currentTurn = "opponent";
} else if (isNumberBetween(event.pageX, 200, 300) && isNumberBetween(event.pageY, 0, 100) && spot3.type === "") {
availableSpots.pop(3);
spot3.type = playerSymbol;
if (playerSymbol === "X") {
spot3.drawX();
} else {
spot3.drawCircle();
};
currentTurn = "opponent";
} else if (isNumberBetween(event.pageX, 0, 100) && isNumberBetween(event.pageY, 100, 200) && spot4.type === "") {
availableSpots.pop(4);
spot4.type = playerSymbol;
if (playerSymbol === "X") {
spot4.drawX();
} else {
spot4.drawCircle();
};
currentTurn = "opponent";
} else if (isNumberBetween(event.pageX, 100, 200) && isNumberBetween(event.pageY, 100, 200) && spot5.type === "") {
availableSpots.pop(5);
spot5.type = playerSymbol;
if (playerSymbol === "X") {
spot5.drawX();
} else {
spot5.drawCircle();
};
currentTurn = "opponent";
} else if (isNumberBetween(event.pageX, 200, 300) && isNumberBetween(event.pageY, 100, 200) && spot6.type === "") {
availableSpots.pop(6);
spot6.type = playerSymbol;
if (playerSymbol === "X") {
spot6.drawX();
} else {
spot6.drawCircle();
};
currentTurn = "opponent";
} else if (isNumberBetween(event.pageX, 0, 100) && isNumberBetween(event.pageY, 200, 300) && spot7.type === "") {
availableSpots.pop(7);
spot7.type = playerSymbol;
if (playerSymbol === "X") {
spot7.drawX();
} else {
spot7.drawCircle();
};
currentTurn = "opponent";
} else if (isNumberBetween(event.pageX, 100, 200) && isNumberBetween(event.pageY, 200, 300) && spot8.type === "") {
availableSpots.pop(8);
spot8.type = playerSymbol;
if (playerSymbol === "X") {
spot8.drawX();
} else {
spot8.drawCircle();
};
currentTurn = "opponent";
} else if (isNumberBetween(event.pageX, 200, 300) && isNumberBetween(event.pageY, 200, 300) && spot9.type === "") {
availableSpots.pop(9);
spot9.type = playerSymbol;
if (playerSymbol === "X") {
spot9.drawX();
} else {
spot9.drawCircle();
};
currentTurn = "opponent";
}
});
};
};
</script>
</body>