Javascript 画布不是'；t抽签游戏中抽签_Javascript_Html_Canvas

Javascript 画布不是'；t抽签游戏中抽签

javascript html canvas

Javascript 画布不是'；t抽签游戏中抽签,javascript,html,canvas,Javascript,Html,Canvas,我正在编写一个Tic-Tac-Toe游戏，但是它说谁先进入游戏循环，而不绘制网格，即使它应该先绘制网格。它应该先绘制网格，但它不会这样做 <!DOCTYPE html> <html> <head> <title>Canvas</title> </head> <body> <canvas id="canvas" width="300" height="300"></canvas

我正在编写一个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>


帆布
//设置
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
函数getRandomFromInterval（interval）{
返回值（Math.floor（Math.random（）*interval））；
};
函数为数字（数字、低、高）{
返回（number>=low&&number你有一个无限循环。玩家永远没有机会移动，因为你的while
循环从未完成。围绕事件组织游戏，而不是while
循环。我尝试禁用循环进行测试，但它仍然会在绘制画布之前告知谁先移动。并在最后删除循环。N其他。网格按预期绘制。我使用了单击事件和一些函数，现在可以工作了：）