我是初学者，所以请大方：)我正在尝试使用html，css和纯JS制作井字游戏。我一直试图在板上单击一个正方形时尝试显示“ X”符号（或“ O”）（我用于循环，就像以前在俄罗斯方块游戏中一样）。我尝试了事件侦听器，但无法正常工作，可能是我做错了：P所以无论如何我的问题是：如何通过单击它在板上显示符号？
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="tic-tac-toe.css">
<title>TIC TAC TOE IN JS</title>
<h1 class='header'>TIC TAC TOE in JS</h1>
</head>
<body>
<div class='canvas'>
<canvas id="canvas" width='300px' height="300px"></canvas>
</div>
<div class='scores'>
<div>Player 1 Wins: <span id="score-x">0</span></div>
<div>Ties: <span id="score-tie">0</span> </div>
<div>Player 2 Wins: <span id="score-o">0</span> </div>
</div>
<script src="./tictactoe.js"></script>
</body>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
//CONSTS
const row = 3;
const col = 3;
const vacant = "white";
const sq = 100;
let w = canvas.clientWidth/3;
let h = canvas.clientHeight/3;
//draw a square
function drawSquare(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x*sq, y*sq, sq, sq);
ctx.strokeStyle = 'black';
ctx.strokeRect(x*sq, y*sq, sq, sq);
}
//Create board
let board = [ ];
for(let r = 0; r < row; r++){
board[r] = [ ];
for(let c = 0; c < col; c++) {
board[r][c] = vacant;
}
}
//Draw Board
function drawBoard() {
for(r = 0; r < row; r++) {
for(c = 0; c < col; c++){
drawSquare(c, r, board[r][c]);
}
}
}
drawBoard();
//players
const players = ['X', 'O']
const player1 = players[0];
const player2 = players[1];
//let the starting player be selected at random
const spot = board[r-1][c-1];
function setup() {
let randomPlayer = Math.floor(Math.random() *2 );
let currentPlayer = "";
if (randomPlayer == 0){
currentPlayer = player1;
alert('Player 1 starts the game !')
}else {
currentPlayer = player2;
alert('Player 2 starts the game !')
};
}
function drawSymbol () {
let x = w * r + w/2;
let y = h * c + h/2;
let xr = w/4;
spot.addEventListener('click', (x, y, xr) => {
line(x-xr, y-xr, x+xr, y+xr);
line(x+xr, y-xr, x-xr, y+xr);
})
}
setup();
//Check if player clicked on the board
//Place X
//Place O
您似乎从未将事件侦听器添加到画布本身？从此类事件侦听器中，您可以获取点击的X坐标和Y坐标，以确定点击的单元格。如果该单元空闲，请为当前玩家绘制一个符号。
因此，您需要使drawSymbol接收有关要插入哪个单元格的信息。
您创建了一个我不了解它的功能的变量，在drawSymbol内添加了一个事件侦听器，但这可能不是元素吗？而且从来没有调用drawSymbol函数，因此不会执行代码，因此也不会出现错误。