Question

我是JavaScript的新手，这是我第一次使用HTML5 canvas，因此如果这是一个简单的解决方法，请原谅。

我使用画布创建了一个Tic Tac Toe游戏，每次单击画布正方形时都会放置png或SVG。我现在尝试创建一个撤消按钮，可以删除上一步的操作。我试图使用clearRect（）函数删除图形，并且图形确实消失了，但控制台显示错误“ Uncaught TypeError：box.getContext不是一个函数” ...这很奇怪，因为我没有当我使用“ box.getContext”将图形放在第一位时，不会出现此错误。

不仅如此，当我再次尝试单击已清除的画布正方形时，它不允许放置图形...有关为什么发生这种情况的任何想法？

（顺便说一下，我在X上使用png，在O上使用SVG，仅用于每种图形的练习）

这是我的JS：

window.onload = function() {
  var num;
  var box;
  var ctx;
  var turn = 1;
  var filled;
  var symbol;
  var winner;
  var gameOver = false;

  filled = [false, false, false, false, false, false, false, false, false];
  symbol = ["", "", "", "", "", "", "", "", ""];
  winner = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];


  //canvas click + retrieving the box's number
  document.getElementById("tic").addEventListener("click", function(e) {
    boxClick(e.target.id);
  });

  function boxClick(numId) {
    box = document.getElementById(numId);
    ctx = box.getContext("2d"); /*here is where I'm getting the error*/

    switch (numId) {
      case "square1":
        num = 1;
        break;
      case "square2":
        num = 2;
        break;
      case "square3":
        num = 3;
        break;
      case "square4":
        num = 4;
        break;
      case "square5":
        num = 5;
        break;
      case "square6":
        num = 6;
        break;
      case "square7":
        num = 7;
        break;
      case "square8":
        num = 8;
        break;
      case "square9":
        num = 9;
        break;
    }

    //drawing the shapes on the canvases (switch to 0 indexing later)
    if (filled[num - 1] == false) {
      if (gameOver == false) {
        if (turn % 2 != 0) {
          var sean_image = new Image();
          sean_image.src = "graphics/sean.png";
          sean_image.onload = function() {
            ctx.drawImage(sean_image, -43, -26);
          };
          symbol[num - 1] = "X";
        } else {
          //if number is even (O player)
          var square_svg = new Image();
          square_svg.src = "graphics/square.svg";
          square_svg.onload = function() {
            ctx.drawImage(square_svg, 8.5, 8.5);
          };
          symbol[num - 1] = "O";
        }


/* ***this is where I'm trying to implement the undo function */
        //undo the last move made
        document.getElementById("undo").onclick = function() {
          ctx.clearRect(0, 0, box.width, box.height);
          filled[num - 1] == false;
          symbol[num - 1] = "";
        };
      } 
    } 
  }
};

这是我的HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="ticTacToe.css" />
  </head>
  <body>
    <header>
      <h1 id="head">Tic Tac Toe Game</h1>
    </header>
    <h1 id="result"></h1>

    <section id="game">
      <div id="tic">
        <canvas id="square1" width="100" height="100"></canvas>
        <canvas id="square2" width="100" height="100"></canvas>
        <canvas id="square3" width="100" height="100"></canvas><br />

        <canvas id="square4" width="100" height="100"></canvas>
        <canvas id="square5" width="100" height="100"></canvas>
        <canvas id="square6" width="100" height="100"></canvas><br />

        <canvas id="square7" width="100" height="100"></canvas>
        <canvas id="square8" width="100" height="100"></canvas>
        <canvas id="square9" width="100" height="100"></canvas>

        <button id="undo">Undo Move</button>
      </div>
    </section>

    <script type="text/javascript" src="ticTacToe.js"></script>
  </body>
</html>

Answer 1

这是由于您将点击事件监听器附加到ID为tic的div上。因此，如果您单击tic div内的任何内容，则将触发该事件侦听器。由于撤消按钮位于tic div内，因此单击该事件侦听器将触发事件e.target并表示被单击的撤消按钮。由于该撤消按钮不是画布元素，因此getContext方法将无法在其上正常工作，并且您会收到该错误。

因此，您应该使用id=tic将该按钮元素移到div之外。我将其放置在tic div的正下方。

删除最后一个放置在画布上的图形，但继续获取getContext不是函数

1 个答案: