Я новичок в 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>