Question

我有一个基本的javascript / html桌面游戏，由两个玩家在一个屏幕上播放。当player1完成转弯时，我希望他们的棋盘被隐藏，并且当他们准备轮到他们时，会弹出一个警告要求玩家2。然后，player2的棋盘变得可见。我尝试了很多东西，无法让它发挥作用。

var hide = false;
displayBoard(player1);

function displayBoard(player){

for (i = 0; i < boardSize + 1; i++) {
    for (j = 0; j < boardSize + 1; j++) {

        var gameSquare = document.createElement("div");
        var squareText = document.createElement("span");
        squareText.textContent = boardArray[j][i];


        if(hide){
            gameSquare.style.visibility = 'hidden';
            squareText.style.visibility = 'hidden';
        }

        gameSquare.appendChild(squareText)
        boardContainer.appendChild(gameSquare);

        var topPosition = j * squareSize;
        var leftPosition = i * squareSize;          

        gameSquare.style.top = topPosition + 'px';
        gameSquare.style.left = leftPosition + 'px';
    }
}
function fire(){ //This happens when a player clicks on the board

    event = event || window.event;
    var source = event.target || event.srcElement;
    //a bunch of game logic, changing up arrays

    //end of player's turn
    hide = true; //I want to hide the board until the next player starts
    displayBoard(thisPlayer); //To update the board being hidden
    window.alert("press okay to begin " + nextPlayer + "'s turn");
    hide = false;
    displayBoard(nextPlayer);
}

当我这样做时，html DOM中的可见性不会改变。

我还尝试将可见性设置为fire（）函数中的隐藏，但这不起作用。我已经尝试将boardContainer的所有子项都设置为隐藏。我已经尝试在大量的displayBoard函数之前，期间和之后完成所有这些操作。我试过禁用缓存。我已经尝试将显示设置为无。我已经尝试在displayBoard（）之后添加等待时间。

这样做的正确方法是什么？

我也不允许在这个FYI上使用JQuery。

编辑：我没有迭代元素，而是将其添加到displayBoard（）的开头：

 if (hide){
    boardContainer.style.visibility = "hidden";
    opposingBoardContainer.style.visibility = "hidden";
} else{
    boardContainer.style.visibility = "visible";
    opposingBoardContainer.style.visibility = "visible";
}

这样做的结果是，如果我消除了else块，则在第一个转弯结束后，板会消失。如果我留下其他块，似乎没有任何变化。所以我怀疑它正在消失并且回来太快让我告诉而不是消失并等待警报窗口，就像我想要的那样。有什么想法吗？

Answer 1

这样做的结果是，如果我消除了else块，则在第一个转弯结束后，板会消失。如果我留下其他块，似乎没有任何变化。所以我怀疑它正在消失并且回来太快让我告诉而不是消失并等待警报窗口，就像我想要的那样。有什么想法吗？

hide = true; //I want to hide the board until the next player starts
displayBoard(thisPlayer); //To update the board being hidden
window.alert("press okay to begin " + nextPlayer + "'s turn");
hide = false;
displayBoard(nextPlayer);

所以基本上这里发生的是当你调用警报时DOM尚未再次呈现，所以当警报触发并阻止其余代码执行时，你的电路板仍然存在。

所以当你点击好的时候可能会发生两件事情。

它使棋盘不可见，然后执行displayBoard，再次立即显示它。
它在渲染之前再次执行displayBoard，然后在下次渲染时它会显示，所以没有任何反应。

无论哪种方式，您都需要更改处理转弯的方式，以便它不依赖警报来阻止执行。

如何在javascript中隐藏游戏轮次之间的元素？

1 个答案: