Javascript Tic-Tac-Toe对手不'；行不通_Javascript_Jquery_Arrays_Random

Javascript Tic-Tac-Toe对手不'；行不通
javascript jquery arrays random
Javascript Tic-Tac-Toe对手不'；行不通,javascript,jquery,arrays,random,Javascript,Jquery,Arrays,Random,嗯，我在我的井字游戏中使用了事件，现在效果更好了。但是，现在对手（基于数组并选择随机值）无法正常工作。无论何时选择某个对象，都会将其从阵列中删除。我该如何解决这个问题？帆布 //设置 //定义画布 var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； //定义各种功能函数getRandomFromInterval（interval）{ 返回值（Math.floor（Math.rando
嗯，我在我的井字游戏中使用了事件，现在效果更好了。但是，现在对手（基于数组并选择随机值）无法正常工作。无论何时选择某个对象，都会将其从阵列中删除。我该如何解决这个问题？

帆布
//设置
//定义画布
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//定义各种功能
函数getRandomFromInterval（interval）{
返回值（Math.floor（Math.random（）*interval））；
};
函数getRandomFromArray（数组）{
返回（数组[getRandomFromInterval（array.length）]）
};
函数为数字（数字、低、高）{
return（number>=low&&number很好，splice会改变数组，因此我不确定您还希望看到什么。我应该如何从数组的某个位置删除特定值？
<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>