Javascript 如何将div映射到二维数组Tictatcoe游戏

我有一个井字游戏，我想实现使用二维数组。现在我正在使用一个简单的数组，它工作得很好。但我认为使用二维数组更容易实现，所以在检查优胜者和其他东西时，我可以利用for循环

我的问题是，我可以找到一种方法，将单击的div映射到二维数组中的索引。例如，如果用户单击UI上第二行的第三个div，如何将其映射到

2Darray[1][2]

（第二个子数组索引2）？谢谢

希望我能解释清楚。对于那些对代码感兴趣的人，这里是我的tic tac toe代码笔：

var xPlayer=“X”；
var oPlayer=“O”；
var turn=“X”；
var板=新阵列（9）；
var message=document.getElementById（“消息”）；
$（文档）.ready（函数（）{
$（“.square”）。单击（函数（）{
var sqrId=$（this.attr（“id”）；
playerMove（sqrId）；
if（checkWinners（））{
message.innerHTML=“消息：“+turn+”获胜！”；
返回；
}
if（checkBoard（））{
message.innerthl=“message:“+turn+”move”；
}否则{
message.innerHTML=“message:这是一个平局！”；
}
转动=（转动='X'）？'O'：'X'；
});
$（“.resetGame”）。单击（函数（）{
$（“.square”）。文本（“”）；
$（“#消息”）。文本（“消息：”；
turn=“X”；
板=新阵列（9）；
});
});
//让用户移动并输出到电路板
函数playerMove（sqrId）{
log（“玩家移动：++$（'#'+sqrId）.attr（“id”）+“”+turn）；
如果（$（'#'+sqrId）.text（）==“”）{
$（'#'+sqrId）.text（回车）；
板[sqrId]=旋转；
}否则{
log（“错误！”）；
message.innerHTML=“消息：移动错误！…”
返回；
}
}
//检查中奖组合
函数checkWinners（）{
控制台日志（板[1]）；
//检查行
如果（线路板[0]！=未定义和线路板[0]==线路板[1]&线路板[1]==线路板[2]）{
返回true；
}else if（板[3]！=未定义和板[3]==板[4]&板[4]==板[5]）{
返回true；
}else if（板[6]！=未定义和板[6]==板[7]&板[7]==板[8]）{
返回true；
}
//检查列
否则如果（板[0]！=未定义和板[0]==板[3]&板[6]==板[8]）{
返回true；
}else if（板[1]！=未定义和板[1]==板[4]&板[4]==板[7]）{
返回true；
}else if（板[2]！=未定义和板[2]==板[5]&板[5]==板[8]）{
返回true；
}
//核对
else if（板[0]！=未定义和板[0]==板[4]&板[4]==板[8]）{
返回true；
}else if（线路板[2]！=未定义和线路板[2]==线路板[4]&线路板[4]==线路板[6]）{
返回true；
}否则{
返回false；
}
}
/*检查是否有更多的游戏空间，如果没有
那就平局了*/
功能检查板（）{
对于（变量i=0；i

正文{
背景色：#999；
字体系列：serif，verdana；
}
h1{
字体大小：50px；
}
氢{
边缘底部：30px；
}
.集装箱{
保证金：0自动；
文本对齐：居中；
}
.行>分区{
保证金：2倍；
边框：实心1px黑色；
显示：内联块；
字体大小：35px；
宽度：50px；
高度：50px；
文本对齐：居中；
填充：0px；
垂直对齐：顶部；
线高：50px；
}
#信息{
/*显示：内联块*/
文本对齐：居中；
}

井字棋
你在玩电脑游戏！
信息：
重置游戏要从1d索引转到2d坐标，可以使用以下“公式”：


row=Math.floor（索引/行大小）
col=索引%ROW\u SIZE
（使用）

要从行和列返回到一维索引，可以使用：


index=row*row\u SIZE+col


/*索引从左到右（行），行从上到下
[ 
0, 1, 2
3, 4, 5
6, 7, 8
]
*/
const ROW_SIZE=3；
const rowForIndex=函数（索引）{
返回数学楼层（索引/行大小）；
}
const columnForIndex=函数（索引）{
返回索引%行大小；
}
日志（[0,1,2,3,4,5,6,7,8]）。映射(
i=>`index:${i}，row:${rowForIndex（i）}，col:${columnForIndex（i）}`）
);对于您的DOM结构，应该可以：

var field = new Array(3).fill(new Array(3)), width = field.length;
function div2coords(div) {
    var id = parseInt(div.id);
    return {
        x: id % width,
        y: Math.floor(id / width)
    };
}
function coords2div(coords) {
    var id = coords.y * width + coords.x;
    return document.getElementById(id.toString());
}

如果你想变得现代、别致，你可以使用：

因此，您的标记将如下所示：

  <div class="ticTacToe">
    <div class="row">
      <div data-x="0" data-y="0" class="square"></div>
      <div data-x="1" data-y="0" class="square"></div>
      <div data-x="2" data-y="0" class="square"></div>
    </div>
    <div class="row">
      <div data-x="0" data-y="1" class="square"></div>
      <div data-x="1" data-y="1" class="square"></div>
      <div data-x="2" data-y="1" class="square"></div>
    </div>
    <div class="row">
      <div data-x="0" data-y="2" class="square"></div>
      <div data-x="1" data-y="2" class="square"></div>
      <div data-x="2" data-y="2" class="square"></div>
    </div>
  </div>

或者使用jQuery：

var x = $(this).data('x');

var x = $(this).data('x');