好吧，我使用了tic-tac-toe游戏的事件，现在效果更好。但是，现在对手（基于阵列并选择随机值）不能正常工作。只要选择了某些内容，就会从阵列中删除它。我该如何解决？
<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
//defines canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//defines various functions
function getRandomFromInterval(interval) {
return(Math.floor(Math.random() * interval));
};
function getRandomFromArray(array) {
return(array[getRandomFromInterval(array.length)])
};
function isNumberBetween(number, low, high) {
return(number >= low && number <= high);
};
function removeFromArray(array, value) {
var helper = array.indexOf(value)
if (helper != -1) {
array.splice(helper, helper);
};
return(helper);
};
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();
};
};
//defines the spot object constructor
function Spot(x, y, cloneID, type) {
this.x = x,
this.y = y,
this.cloneID = cloneID,
this.type = type
};
//defines the spot object drawing functions for drawing X and O
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);
};
//defines several variables used in these functions
var playerValidity = true;
var availableSpots = [1, 2, 3, 4, 5, 6, 7, 8, 9];
//defines the spots and other variables
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, "");
//defines the opponent's turn (WIP)
function opponentTurn () {
if (playerValidity === true) {
var opponentChoice = getRandomFromArray(availableSpots);
if (opponentChoice === 1) {
removeFromArray(availableSpots, 1)
if (opponentSymbol === "X") {
spot1.drawX();
spot1.type = "X"
} else {
spot1.drawCircle();
spot1.type = "O"
};
currentTurn = "player"
} else if (opponentChoice === 2) {
removeFromArray(availableSpots, 2)
if (opponentSymbol === "X") {
spot2.drawX();
spot2.type = "X"
} else {
spot2.type = "O"
};
};
currentTurn = "player"
} else if (opponentChoice === 3) {
removeFromArray(availableSpots, 3)
if (opponentSymbol === "X") {
spot3.drawX();
spot3.type = "X"
} else {
spot3.drawCircle();
};
currentTurn = "player"
} else if (opponentChoice === 4) {
removeFromArray(availableSpots, 4)
if (opponentSymbol === "X") {
spot4.drawX();
spot4.type = "X"
} else {
spot4.drawCircle();
spot4.type = "O"
};
currentTurn = "player"
} else if (opponentChoice === 5) {
removeFromArray(availableSpots, 5)
if (opponentSymbol === "X") {
spot5.drawX();
spot5.type = "X"
} else {
spot5.drawCircle();
spot5.type = "O"
};
currentTurn = "player"
} else if (opponentChoice === 6) {
removeFromArray(availableSpots, 6)
if (opponentSymbol === "X") {
spot6.drawX();
spot6.type = "X"
} else {
spot6.drawCircle();
spot6.type = "O"
};
currentTurn = "player"
} else if (opponentChoice === 7) {
removeFromArray(availableSpots, 7)
if (opponentSymbol === "X") {
spot7.drawX();
spot7.type = "X"
} else {
spot7.drawCircle();
spot7.type = "O"
};
currentTurn = "player"
} else if (opponentChoice === 8) {
removeFromArray(availableSpots, 8)
if (opponentSymbol === "X") {
spot8.drawX();
spot8.type = "X"
} else {
spot8.drawCircle();
spot8.type = "O"
};
currentTurn = "player"
} else if (opponentChoice === 9 && spot9.type === "") {
removeFromArray(availableSpots, 9)
if (opponentSymbol === "X") {
spot9.drawX();
spot9.type = "X"
} else {
spot9.drawCircle();
spot9.type = "O"
};
//switches to player's turn
currentTurn = "player"
};
};
//decides the first player
function decideFirst () {
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!");
opponentTurn();
};
};
//draws the grid
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 currentTurn = "";
var playerSymbol = "";
var opponentSymbol = "";
setTimeout(decideFirst, 100)
//Game
//executes a player turn if the canvas is clicked
$("canvas").click(function (event) {
playerValidity = false;
if (currentTurn === "player") {
if (isNumberBetween(event.pageX, 0, 100) && isNumberBetween(event.pageY, 0, 100) && spot1.type === "") {
removeFromArray(availableSpots, 1)
spot1.type = playerSymbol;
if (playerSymbol === "X") {
spot1.drawX();
spot1.type = "X"
} else {
spot1.drawCircle();
spot1.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
opponentTurn();
} else if (isNumberBetween(event.pageX, 100, 200) && isNumberBetween(event.pageY, 0, 100) && spot2.type === "") {
removeFromArray(availableSpots, 2)
spot2.type = playerSymbol;
if (playerSymbol === "X") {
spot2.drawX();
spot2.type = "X"
} else {
spot2.drawCircle();
spot2.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
opponentTurn();
} else if (isNumberBetween(event.pageX, 200, 300) && isNumberBetween(event.pageY, 0, 100) && spot3.type === "") {
removeFromArray(availableSpots, 3)
spot3.type = playerSymbol;
if (playerSymbol === "X") {
spot3.drawX();
spot3.type = "X"
} else {
spot3.drawCircle();
spot3.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
opponentTurn();
} else if (isNumberBetween(event.pageX, 0, 100) && isNumberBetween(event.pageY, 100, 200) && spot4.type === "") {
removeFromArray(availableSpots, 4)
spot4.type = playerSymbol;
if (playerSymbol === "X") {
spot4.drawX();
spot4.type = "X"
} else {
spot4.drawCircle();
spot4.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
opponentTurn();
} else if (isNumberBetween(event.pageX, 100, 200) && isNumberBetween(event.pageY, 100, 200) && spot5.type === "") {
removeFromArray(availableSpots, 5)
spot5.type = playerSymbol;
if (playerSymbol === "X") {
spot5.drawX();
spot5.type = "X"
} else {
spot5.drawCircle();
spot5.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
opponentTurn();
} else if (isNumberBetween(event.pageX, 200, 300) && isNumberBetween(event.pageY, 100, 200) && spot6.type === "") {
removeFromArray(availableSpots, 6)
spot6.type = playerSymbol;
if (playerSymbol === "X") {
spot6.drawX();
spot6.type = "X"
} else {
spot6.drawCircle();
spot6.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
opponentTurn();
} else if (isNumberBetween(event.pageX, 0, 100) && isNumberBetween(event.pageY, 200, 300) && spot7.type === "") {
removeFromArray(availableSpots, 7)
spot7.type = playerSymbol;
if (playerSymbol === "X") {
spot7.drawX();
spot7.type = "X"
} else {
spot7.drawCircle();
spot7.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
opponentTurn();
} else if (isNumberBetween(event.pageX, 100, 200) && isNumberBetween(event.pageY, 200, 300) && spot8.type === "") {
removeFromArray(availableSpots, 8)
spot8.type = playerSymbol;
if (playerSymbol === "X") {
spot8.drawX();
spot8.type = "X"
} else {
spot8.drawCircle();
spot8.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
opponentTurn();
} else if (isNumberBetween(event.pageX, 200, 300) && isNumberBetween(event.pageY, 200, 300) && spot9.type === "") {
removeFromArray(availableSpots, 9)
spot9.type = playerSymbol;
if (playerSymbol === "X") {
spot9.drawX();
spot9.type = "X"
} else {
spot9.drawCircle();
spot9.type = "O"
};
playerValidity = true;
currentTurn = "opponent";
setTimeout(opponentTurn, 100);
};
};
});
</script>
</body>
</html>