javascript - 如何在JavaScript的游戏回合之间隐藏元素？

我有一个基本的javascript / html桌游，由两个玩家在一个屏幕上玩。当玩家1结束转弯时，我希望隐藏他们的棋盘，并弹出警告消息，询问玩家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（）之后添加等待时间。

正确的方法是什么？

我也不允许将JQuery用于此FYI。

编辑：不是遍历元素，而是将其添加到displayBoard（）的开头：

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

这样的结果是，如果我消除else块，则该板在第一回合结束后便消失了。如果我将else块留在里面，似乎没有任何变化。因此，我怀疑它正在消失并很快返回，以至于我无法告诉，而不是消失并等待警报窗口，就像我想要的那样。有什么想法吗？

最佳答案

这样的结果是，如果我消除else块，则该板在第一回合结束后便消失了。如果我将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);

因此，基本上，这里发生的是当您调用Alert时，DOM尚未再次呈现，因此当警报触发并阻止其余代码执行时，您的面板仍然在那儿。

因此，当您单击“确定”时，可能会发生两件事。


它使电路板不可见，然后执行displayBoard使其立即再次变为可见。
它在渲染之前再次执行displayBoard，然后在下次渲染时将可见，因此什么也没有发生。


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