使用纯 JavaScript 刷新井字游戏的最佳方法？答案

【问题标题】：Best way to refresh my tic tac toe game with pure JavaScript?使用纯 JavaScript 刷新井字游戏的最佳方法？
【发布时间】：2016-02-17 03:03:53
【问题描述】：

我已经完成了 95% 的玩家对玩家井字游戏。将来我会添加一个不错的 AI，并为某人获胜设定条件。

现在我只是在寻找无需在纯 JavaScript 中重新加载页面的最佳方式来刷新我的游戏。我的页面底部有一个按钮，基本上一旦点击它，我希望我的棋盘上的任何东西都被完全清除，游戏重新开始。

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

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

这是我目前为止的井字游戏，以防万一有人想查看它:)

努力成为真正擅长 HTML/CSS/JavaScript 的人 >

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

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");
            })
        });
    }
}

【问题讨论】：

你可以使用html画布
我的规则告诉我使用一张桌子 :( 我在看画布，它很酷

标签： javascript html css

【解决方案1】：

单击刷新按钮时，只需删除每个td 的背景图像。同时重置您的counter 和memoryMove。

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

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

 });

【讨论】：

【解决方案2】：

在纯javascript中更新：

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

【讨论】：

$("#field" + i).value = ""; 仅使用外部库...?????并且仍然使用value 而不是val()
jQuery 是一个非常轻量级的库，被大多数网站使用。它根本不会影响应用程序的性能。
请注意，如果 OP 不包含 jquery 标签，我不建议使用 jQuery 给出答案。 Eppseically 在这种情况下没有必要。因为你可以做document.getElementById(fieldId).value = ""。