用纯JavaScript刷新我的tic tac脚趾游戏的最佳方式?

I have 95% completed my Player vs Player tic tac toe game. In the future I will add a nice AI and will set conditions for when someone wins.

我已经完成了95%的玩家对玩家tic tac脚趾的游戏。在未来，我将添加一个漂亮的人工智能，并将为某人获胜设定条件。

Right now I'm just looking for the best way to refresh my game without having the page reload in pure JavaScript. I have a button at the bottom of my page and basically once it clicks I want whatever is on my board to be totally cleared and the game starts over.

现在我正在寻找最好的方法来刷新我的游戏，而不需要用纯JavaScript重载页面。我的页面底部有一个按钮，一旦它点击，我想让我的黑板上的东西被完全清除，游戏就开始了。

They would click on this at the bottom of my HTML

他们会在我的HTML底部点击这个

<center><div id="refresh" class="fa fa-refresh faa-spin animated-hover fa-5x"></div></center>

Here's my tic tac toe game so far in case anyone wants to look over it :)

这是我的tic tac脚趾游戏到目前为止，以防有人想看它:)

Trying really hard to become really good at HTML/CSS/JavaScript >< So hard!

非常努力地想要在HTML/CSS/JavaScript >上变得真正优秀!

HTML

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tic-Tac-Toe</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-awesome-animation.min.css">
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>

<header>
    <h1>Tic-Tac-Toe </h1>
</header>

<body>
<!--Table for Tic Tac Toe-->
<table id="mytable" class="grid">
    <tr>
        <td id="field1" class="square"></td>
        <td id="field2" class="square v"></td>
        <td id="field3" class="square"></td>
    </tr>
    <tr>
        <td id="field3" class="square h"></td>
        <td id="field4" class="square v h"></td>
        <td id="field5" class="square h"></td>
    </tr>
    <tr>
        <td id="field4" class="square"></td>
        <td id="field5" class="square v"></td>
        <td id="field6" class="square"></td>
    </tr>
</table>
<!--Refresh Icon/Start Game Over-->
<div id="refreshIcon">
    <center><div id="refresh" class="fa fa-refresh faa-spin animated-hover fa-5x"></div></center>
</div>

</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JavaScript

JavaScript

var xTick = "../images/x-tick.png";
var oTick = "../images/o-tick.png";
var bg = null;
var counter = 0;
var memoryMove = [];
var refreshButton = document.getElementById('refresh');

var listRows = document.getElementById("mytable").rows;
/** detecting rows */
for(var i = 0; i < listRows.length;i++){
    /** detecting cells */
    for(var x = 0; x < listRows[i].cells.length; x++){
        listRows[i].cells[x].setAttribute("data-cell",i.toString()+x.toString());
        listRows[i].cells[x].addEventListener("click",function(){
            var move = this.getAttribute("data-cell");
            console.log(move);
            if (memoryMove.indexOf(move) === -1){
                memoryMove.push(move);
                if (counter === 0){
                    bg = xTick;
                } else {
                    if(counter % 2 === 0){
                        bg = xTick;
                    } else {
                        bg = oTick;
                    }
                }
                counter++;
                this.style.background="url('./images/"+bg+"') center center no-repeat";
            } else {
                alert('Stop trying to cheat!');
            }
            /** Start a new game */
            refreshButton.addEventListener('click', function() {

                // alert("Refresh Results");
            })
        });
    }
}

2 个解决方案

#1

on clicking the refresh button just remove the background image of each td. Also reset your counter and memoryMove.

单击刷新按钮，只需删除每个td的背景图像。还可以重置计数器和内存移动。

refreshButton.addEventListener('click', function() {

    for (var i = 1;i <= 9;i++) {
        document.getElementById("field"+i).style.background="none";
        counter = 0;
        memoryMove = [];
    }

 });

#2

Updated in pure javascript:

在纯javascript更新:

for (var i = 1;i <= 9;i++) {
    var fieldId = "field" + i; //ex 'field1'
    document.getElementById(fieldId).value = "";
}

#1