Удалите последнюю графику, помещенную на холст, но продолжайте получать getContext не является функцией - PullRequest
0 голосов
/ 02 июля 2019

Я новичок в JavaScript, и я впервые использую холст HTML5, поэтому извините, если это простое исправление.

Я создал игру Tic Tac Toe, используя холсты, где png или SVGпомещается при каждом щелчке квадрата холста.Я пытаюсь создать кнопку отмены, где можно удалить последний сделанный ход.Я пытаюсь использовать функцию clearRect () для удаления графики, и, хотя графика исчезает, консоль отображает ошибку «Uncaught TypeError: box.getContext не является функцией» ... это странно, потому что я нея не получаю эту ошибку, когда я использую «box.getContext» для размещения графического объекта на первом месте.

Мало того, что, когда я пытаюсь снова щелкнуть очищенный квадрат холста после этого, он не позволяетпомещать графику ... есть идеи, почему это происходит?

(Кстати, я использую png для X и SVG для O только для практики с каждым типом графики)

Вот мой 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>

1 Ответ

1 голос
/ 02 июля 2019

Это связано с тем, что вы подключаете прослушиватель событий клика к вашему div с идентификатором tic. Поэтому, если вы щелкнете что-нибудь внутри этого tic div, этот прослушиватель событий сработает. Поскольку кнопка отмены находится внутри элемента tic, при нажатии на нее будет активирован прослушиватель событий, а e.target будет представлять ту кнопку отмены, которая была нажата. Поскольку эта кнопка отмены не является элементом canvas, метод getContext не будет работать с ней должным образом, и вы получите эту ошибку.

Итак, вы должны переместить этот элемент кнопки за пределы div с помощью id=tic. Я бы поместил его прямо под тик див.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...