Question

我正在建立一个井字游戏。

当电路板加载完毕后，我会为所有电路板的盒子创建事件监听器。它会听一声，然后会调用placePiece函数。

在placePiece函数中，如何定位右框？我可以使用'this'吗？

我首先需要检查盒子是否已经装满。如果不是，那么取决于currentPlayer是player1还是player2，它将填写x或0。

这是我的代码：

// Add programming, so that when the player clicks the start button the start screen disappears, the board appears, and the game begins.
function loadBoard() {
    document.body.innerHTML = originalHTML;

    player1 = new Player(player1);
    player2 = new Player(player2);

    var startingPlayerNum = Math.floor((Math.random() * 2) + 1);
    console.log(startingPlayerNum);

    if(startingPlayerNum === 1){
        player1.currentPlayer = true;
        currentPlayer = player1;
    } else {
        player2.currentPlayer === true;
        currentPlayer = player2
    }

    //Add clickhandlers for boxes
    var a1 = document.getElementById('a1').addEventListener("click", placePiece);
    var a2 = document.getElementById('a2').addEventListener("click", placePiece);
    var a3 = document.getElementById('a3').addEventListener("click", placePiece);
    var b1 = document.getElementById('b1').addEventListener("click", placePiece);
    var b2 = document.getElementById('b2').addEventListener("click", placePiece);
    var b3 = document.getElementById('b3').addEventListener("click", placePiece);
    var c1 = document.getElementById('c1').addEventListener("click", placePiece);
    var c2 = document.getElementById('c2').addEventListener("click", placePiece);
    var c3 = document.getElementById('c3').addEventListener("click", placePiece);

    currentPlayerFlag()
};

//按照这些规则添加游戏。 //在X和O之间交替播放。

    // The current player is indicated at the top of the page -- the box with the symbol O or X is highlighted for the current player. 
function currentPlayerFlag() {
    if(currentPlayer === player1){
        document.getElementById('player1').classList.add("active");
        document.getElementById('player2').className = "players";
    }
    if(currentPlayer === player2){
        document.getElementById('player2').classList.add("active");
        document.getElementById('player1').className = "players";
    }
};


// When the current player mouses over an empty square on the board, it's symbol the X or O should appear on the square.
    // You can do this using the x.svg or o.svg graphics (hint use JavaScript to set the background-image property for that box.) 
function placePiece() {


    // Players can only click on empty squares. When the player clicks on an empty square, attach the class box-filled-1 (for O) or box-filled-2 (for X) to the square.

    //How do I select the right tile?
    if(//SPACE IS NOT EMPTY ?) {
        if(currentPlayer === player1){

            player1.currentPlayer = false;
            player2.currentPlayer = true;
            currentPlayer = player2;
        }
        if(currentPlayer === player2){

            player2.currentPlayer = false;
            player1.currentPlayer = true;
            currentPlayer = player1;
        }

        gameState();
    }
};

谢谢！

Answer 1

尝试类似的东西

var a1 = document.getElementById('a1').addEventListener("click", function() {placePiece(this)});

并相应地调整placePiece：

function placePiece(x) {
    ...

如何将我的元素带入事件处理函数？

1 个答案: