个人中心
gpt4 book ai didi

javascript - 具有 2D 数组的 HTML/JavaScript Tic Tac Toe

转载 作者：行者123 更新时间：2023-11-28 01:11:39 25 4
gpt4 key购买 nike

我对 HTML5 和 JavaScript 相当陌生，我正在尝试学习游戏编程。所以我决定尝试制作一个 Tic Tac Toe 游戏，棋盘是从 2D 数组渲染的。我将其设置为使用 CSS:hover 更改颜色，但现在我只是尝试将每个框在单击时更改为红色，这就是我陷入困境的地方。

我并不是在寻找任何人来为我完成我的代码，只是我想放慢速度，我想自己解决这些问题。我的问题是如何让每个框在单击时改变颜色？目前，我让数组的每个元素创建一个，然后定位它们并向它们的类添加一个 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>

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

最佳答案

有一个简单的错误，您将点击处理程序绑定(bind)在循环之外。当您将其移动到循环内时，您需要将 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");
}

关于javascript - 具有 2D 数组的 HTML/JavaScript Tic Tac Toe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24350860/

25 4 0
文章推荐： javascript - 如何使用ajax和php登录用户？
文章推荐： javascript - 格式化日期 JavaScript
文章推荐： javascript - ReceiveMessage 事件显示数据未定义
文章推荐： javascript - HTML5 fileWriter.write 不写入本地文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com