如何通过单击正方形在使用 for 循环创建的板上显示 X答案

【问题标题】：How to display an X on a board created using for loops by clicking on a square如何通过单击正方形在使用 for 循环创建的板上显示 X
【发布时间】：2020-05-02 20:33:19
【问题描述】：

我是初学者，请多多包涵 :) 我正在尝试使用 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

更新代码

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

//Variables
let row = 3;
let col = 3;
const vacant = "white";
let sq = 100;
let w = canvas.clientWidth/3;
let h = canvas.clientHeight/3;
let currentPlayer = "";

//players
const players = ['X', 'O']
const player1 = players[0];
const player2 = players[1];


//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();



// sets up the game
function setup() {

    //let the starting player be selected at random
    let randomPlayer = Math.floor(Math.random() *2 );
    if (randomPlayer == 0){
        currentPlayer = player1;
        alert('Player 1 starts the game !')
    }else {
        currentPlayer = player2;
        alert('Player 2 starts the game !')
    };

    function calculatePos () {
        // checks for click position
        canvas.addEventListener('click', event => {

            // get the position of the board relative to the page
            let {left, top} = canvas.getBoundingClientRect();

            // get the position of the click relative to the page
            let mouseX = event.clientX - left;
            let mouseY = event.clientY - top;

            // calculate which square is being clicked 
            let newRow = Math.floor(mouseY / sq);
            let newCol = Math.floor(mouseX / sq);
            drawSymbol(newRow, newCol)
        })  
    }




calculatePos();
}
setup();
// listens for clicks on the canvas to draw the symbol
function drawSymbol (newRow, newCol) {
    let x = w * newRow + w/2;
    let y = h * newCol + h/2;
    let xr = w/4;
    if(currentPlayer == players[0]) {
        canvas.addEventListener('click', () => {
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.beginPath();
            ctx.moveTo(x-xr, y-xr);
            ctx.lineTo(x+xr, y+xr);
            ctx.moveTo(x+xr, y-xr);
            ctx.lineTo(x-xr, y+xr);
            ctx.stroke();
    }) 
    } else {
            canvas.addEventListener('click', () => {
                ctx.lineWidth = 5;
                ctx.strokeStyle = 'black';
                ctx.beginPath();
                ctx.arc(x , y, 40, 0, 2 * Math.PI);
                ctx.stroke();
    }
)}
}
drawSymbol(r, c);

【问题讨论】：

标签： javascript html css onclick tic-tac-toe

【解决方案1】：

目前看起来不错！实现此目的的一种方法是将事件侦听器添加到整个画布元素。添加它的适当位置是在您的 setup 函数中；这样，一旦设置了板，您的画布就会监听点击。

现在，如果整个画布都在监听点击，您将需要一种方法来确定点击了哪个方块。这不是太难，但有一些障碍。让我们想象一下尝试为“一维板”确定这一点：

"The board"
+---------+---------+---------+

假设某处发生了点击：

+---------+---------+---------+
             ^click
|------------| <-clickPos = the distance between the click and the edge of the board

我们如何确定它发生在哪个单元格中？如果我们知道每个单元格的大小，以及点击的位置，就可以用除法来完成：

const clickedCell = Math.floor(clickPos / cellSize);

我们将此值取底以产生一个整数值（第一个单元格为 0，第二个单元格为 1，依此类推）。

这里是“陷阱”出现的地方：当点击事件发生时，很容易提取点击的位置相对于页面，但这不一定是你想要的。

这是一个反映这一点的新“板”：

|            +---------+---------+---------+
^ edge                    ^click
of page                   |
|-------------------------| <-this distance is easy to extract from the event
             |------------| <-this is the distance you want
|------------| <-this is the distance between the edge of the board and the edge of the page

如图所示，我们关心的点击位置其实并不是事件中记录的那个。为了确定这一点，我们需要从棋盘左边缘的位置减去点击的位置。

这是 JavaScript 中的样子：

canvas.addEventListener('mouseup', event => {
  const { left, top } = canvas.getBoundingClientRect();
  //      ^^^^  ^^^ These give us the position of the board relative to the page
  const mouseX = event.clientX - left;
  const mouseY = event.clientY - top;
  //                   ^^^^^^^ These give us the position of the click relative to the page

  const row = Math.floor(mouseY / sq);
  const col = Math.floor(mouseX / sq);

  // Now draw your "X" or "O" here, using the `row` and `col` values
  // calculated above to determine where to place it
});

提醒一下，您只需添加该事件监听器一次；添加后，它会在每次点击时调用我们提供的函数。将位置计算工作分解为一个单独的函数等可能是有意义的，但您会在进行时弄清楚这一点。希望这可以帮助;继续加油！

【讨论】：

不客气！祝你好运，不要犹豫与我们联系。
好吧，你到了某个地方！如果您在控制台中看到正确的坐标，那么您就更近了一步。一种方法是这样的：将您的console.log 语句视为一种使用单元格坐标的“效果”；现在，绘制“X”或“O”只是另一种需要单元格坐标的“效果”。考虑尝试以下操作：将您的 drawSymbol 函数移动到“顶层”（在任何其他函数之外），并修改它以将行和列作为参数。然后，将现有的 console.log 语句替换为对该函数的调用。
让我知道这是否有意义，或者您是否需要更多继续。
您说得对：您的文本编辑器将参数显示为灰色，因为它们没有被使用。您的drawSymbol 函数需要利用此信息来绘制“O”或“X”（以适当的为准）。看起来您已经开始使用了，例如通过计算单元格的中心并将其坐标命名为 x 和 y；但是，此计算使用了两个名称 r 和 c，应将其替换为参数名称（row 和 column）。此外，您可以从此函数中删除 addEventListener 位（您已经处理过 >>
以下）。也许从在drawSymbol 函数中绘制一些非常简单的东西开始，比如矩形。然后，一旦你能做到这一点，你就会对你所做的任何改变充满信心，以便让它绘制更复杂的“X”和“O”。让我知道这是怎么回事！

【解决方案2】：

您似乎从未向画布本身添加事件侦听器？从这样的事件侦听器中，您可以获得单击的 X 和 Y 坐标以确定单击了哪个单元格。如果该单元格是空的，则为当前玩家画一个符号。

所以你需要让你的 drawSymbol 获取关于在哪个单元格中绘制的信息。

您创建了一个我不明白它的作用的点变量，然后在 drawSymbol 中添加了一个事件侦听器，但这可能不是一个元素？而且 drawSymbol 函数永远不会被调用，因此代码不会被执行，因此您也不会收到错误。

【讨论】：

啊抱歉，我正在尝试一些东西，却忘记了将它改回我的第一个“猜测”。假设没有 spot 变量，而不是 spot.addEventListener 它应该是 canvas.addEventListener :) 确实，我没有调用 drawSymbol 函数，但是，我经过数小时的头脑风暴思考如何编写它：PI稍后将尝试使用鼠标坐标进行绘制，看看效果如何，谢谢:)