带有二维数组的 HTML/JavaScript 井字游戏答案

【问题标题】：HTML/JavaScript Tic Tac Toe with a 2D array带有二维数组的 HTML/JavaScript 井字游戏
【发布时间】：2014-06-22 11:37:20
【问题描述】：

我对 HTML5 和 JavaScript 还很陌生，我正在尝试学习游戏编程。所以我决定尝试用二维数组渲染棋盘来制作井字游戏。我将其设置为使用 CSS:hover 更改颜色，但现在我只是想让每个框在单击时变为红色，这就是我被卡住的地方。

我不是在寻找任何人来为我完成我的代码，我只是想把事情放慢（ish），我想自己解决这些问题。我的问题是如何让每个框在单击时改变颜色？目前我让数组的每个元素都创建一个，然后我定位它们并将 addEventListener 添加到它们的类中。我的代码 KIND-OF 的工作原理是，当您单击最后一个元素时，它会改变颜色，但其他元素都不会。

这是我的代码。

<!doctype html>
<title>Tic Tac Toe</title>

<style>

#stage
{
    position: relative;
}

.cell
{
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: white;
}

.cell:hover
{
    background-color: blue;
}

</style>

<div id="stage"></div>

<script>

//get a reference to the stage
var stage = document.querySelector("#stage");

//the 2d array that defines the board
var board = 
[
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
];

//the size of each cell
var SIZE = 100;

//the space between each cell
var SPACE = 10;

//display the array
var ROWS = board.length;
var COLUMNS = board[0].length;

for(var row = 0; row < ROWS; row++)
{
    for(var column = 0; column < COLUMNS; column++)
    {
        //create a div HTML element called cell
        var cell = document.createElement("div");

        //set its CSS class to cell
        cell.setAttribute("class", "cell");

        //add the div HTML element to the stage
        stage.appendChild(cell);

        //position the cell
        cell.style.top = row * (SIZE + SPACE) + "px";
        cell.style.left = column * (SIZE + SPACE) + "px";
    }
}

cell.addEventListener("click", clickHandler, false);

function clickHandler()
{
    cell.style.backgroundColor = "red";
    console.log("worked");
}

</script>

任何帮助将不胜感激！谢谢！

【问题讨论】：

就个人而言，我不会使用二维数组。我只使用一个包含九个元素的数组来表示板。如果我感觉特别深奥，我可能会将棋盘表示为 0 到 19682 之间的整数，表示以三为底的游戏棋盘...
@NiettheDarkAbsol 是的，单个数组可能会更容易，但我很好奇是否可以制作二维数组。

标签： javascript html multidimensional-array

【解决方案1】：

有一个简单的错误，您将点击处理程序绑定在循环之外。当您将其移入循环时，您需要将cell.style 更改为this.style，因为cell 将引用循环后变量的最后一个值，而不是当前单元格。

还值得注意的是，由于 addEventListener 方法，您当前的代码与 Internet Explorer 8 及更低版本不兼容。建议如果您计划在页面上操作元素，则使用jQuery，这使得这些兼容性问题在某种程度上无关紧要（在这种情况下，您需要 v1.x.x 版本的 jquery，因为 v2.x.x 已经下降支持 IE 8)

var stage = document.querySelector("#stage");

//the 2d array that defines the board
var board = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
];

//the size of each cell
var SIZE = 100;

//the space between each cell
var SPACE = 10;

//display the array
var ROWS = board.length;
var COLUMNS = board[0].length;

for(var row = 0; row < ROWS; row++){
    for(var column = 0; column < COLUMNS; column++){
        //create a div HTML element called cell
        var cell = document.createElement("div");

        //set its CSS class to cell
        cell.setAttribute("class", "cell");

        //add the div HTML element to the stage
        stage.appendChild(cell);

        //position the cell
        cell.style.top = row * (SIZE + SPACE) + "px";
        cell.style.left = column * (SIZE + SPACE) + "px";

        //handle click
        cell.addEventListener("click", clickHandler, false);
    }
}

function clickHandler(){
    this.style.backgroundColor = "red";
    console.log("worked");
}

【讨论】：

太棒了！谢谢非常感谢！
另外，感谢关于 IE8 和 jQuery 的说明。我是 JavaScript 和一般编程的新手，所以我还没有掌握 jQuery，但我也会把它作为优先事项。谢谢！
@Iqbalhossain 该小提琴已被 JSFiddle 删除，我现在不知道里面有什么，所以我删除了链接。相关代码仍在答案中，小提琴只显示了 OP 的代码，我相信稍作修改。

【解决方案2】：

这里的解决方案很简单：

首先为每个元素注册事件（所以它在循环中）
在你的事件函数中使用参数event

所以我有这个：

//get a reference to the stage
var stage = document.querySelector("#stage");

//the 2d array that defines the board
var board = 
[
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
];

//the size of each cell
var SIZE = 100;

//the space between each cell
var SPACE = 10;

//display the array
var ROWS = board.length;
var COLUMNS = board[0].length;

for(var row = 0; row < ROWS; row++)
{
    for(var column = 0; column < COLUMNS; column++)
    {
        //create a div HTML element called cell
        var cell = document.createElement("div");

        //set its CSS class to cell
        cell.setAttribute("class", "cell");

        //add the div HTML element to the stage
        stage.appendChild(cell);

        //position the cell
        cell.style.top = row * (SIZE + SPACE) + "px";
        cell.style.left = column * (SIZE + SPACE) + "px";
        cell.addEventListener("click", clickHandler, false);
    }
}


function clickHandler(event)
{
    console.log(event);
    event.currentTarget.style.backgroundColor = "red";
    console.log("worked");
}

这是我的测试：http://jsfiddle.net/DSNLR/

【讨论】：

太棒了！谢谢非常感谢！

【解决方案3】：

我对 JavaScript 一无所知，但对 Java 有所了解。我认为

cell.addEventListener("click", clickHandler, false);

必须在这样的 for 循环内：

for(var row = 0; row < ROWS; row++)
{
  for(var column = 0; column < COLUMNS; column++)
  {
    //create a div HTML element called cell
    var cell = document.createElement("div");

    //do your stuff here

    //now the event listener
    cell.addEventListener("click", clickHandler, false);
  }
}

应该可以。您只将其添加到最后一个单元格。

【讨论】：

@brandonclay 没问题 :)

【解决方案4】：

最简单的方法： 1.放

cell.addEventListener("click", clickHandler, false);

进入循环，因为每个单元格都应该有自己的监听器。 2.处理程序应该与适当的单元格一起工作，但不能与一些通用的单元格一起工作

function clickHandler()
{
    this.style.backgroundColor = "red";
    console.log("worked");
}

如果你想提高性能，那么你应该监听父元素（包含所有单元格）和调度事件。

【讨论】：