Javascript 连接四个博弈逻辑

作为我的第一个js项目，构建一个connect-four游戏。我的游戏有一个连接四个游戏板的背景照片，顶部有一个HTML表格来存放代币。标记是我将拖到板上的图像

到目前为止，我有代码（如下），允许我将代币拖到游戏板上

var dragYellow=document.getElementById（'yellowToken1'）；
var dragRed=document.getElementById（'redToken1'）；
var-dropLoc=[]；
函数locOnDrop（e）{
e、 预防默认值（）；
e、 currentTarget.appendChild（
document.createElement（'img'））
).src=document.getElementById（
e、 dataTransfer.getData（'key'））
).src；
}
gameGrid=[[1,2,3,4,5,6,7]，
[8, 9, 10, 11, 12, 13, 14],
[15, 16, 17, 18, 19, 20, 21],
[22, 23, 24, 25, 26, 27, 28],
[29, 30, 31, 32, 33, 34, 35],
[36, 37, 38, 39, 40, 41, 42],
];
对于（var i=0；i}

您的沟通方式是确保（如前面提到的答案）您的表只是数据的可视表示，在本例中，这些数据将存储在2D数组中

所以你应该设计你的代码，这样它就不会流动了

->从HTML到JS但是

->从JS到HTML

我的意思是，与其考虑汽车的外观，然后根据它来制造发动机，不如先弄清楚发动机的性能，然后围绕它来制造汽车

在这个例子中，另一个堆栈问题中的答案给出了一个很好的指针

如果我试图解决这个问题，我会（不按特定顺序）：

• 创建一个允许用户“填充”某个点的函数
• 检查是否采取了特定点的功能
• 用于检查此新玩的移动是否为赢组合的功能
• 函数用于在给定插槽中放置红色或黄色的特定令牌

可能会出现更多的问题，但这只是给你一个例子。您可以看到，这里发生的很多事情都是基于计算或算法的，发生在JS内部，与实际DOM的交互很少

我在这里列出的唯一一个是添加令牌。您的2D阵列中存储了游戏所需的所有信息，以便这些功能正常工作。只有当某些东西需要进行物理修改时，应用程序才会对DOM说：“嘿，在这个位置添加一个黄色标记”，以此类推

---

当然，这些不同创建的函数可以通过附加事件处理程序等将这些函数映射到DOM。。。但希望您能理解这一点。

虽然您可以做一些事情来确定行中给定单元格的位置，以及行在表中的位置（例如，当您单击TD或类似内容时），但最简单的方法可能是将数据实际构建到表中

例如，如果您的HTML表如下所示：

<tr data-row='1'><td data-column='1'>&nbsp;</td><!-- rest of the cells --></tr>

使用jquery或类似工具查找映射到数组信息的正确位置变得非常简单。因此，如果每个单元格都有一个唯一的编号（如您的示例所示），您甚至可以让每个TD将该信息存储为

data position=“12”

或类似信息，从而使查询更加容易

---

在jquery中，您可以使用

$（'td[data position=12]'）

直接获取元素

per@Alireza Fattahi请求

到目前为止，我的代码完成了什么 1.视觉效果（背景、游戏板、代币） 2.抓取玩家姓名（仅限2名玩家，不得对着电脑） 3.随机选择一个玩家开始 4.可以将代币拖放到棋盘上

//设置
var按钮=document.getElementById（“setStart”）；
var gameActive=false；
//抓取玩家姓名/选择第一步/重置棋盘
函数setStart（）{
if（gameActive==false）{
playerOne=提示（“玩家一（黄色）请输入您的姓名”）；
playerTwo=提示（“玩家二（红色）请输入您的姓名”）；
document.getElementById（“yellowPlayer”）.innerHTML=playerOne；
document.getElementById（“redPlayer”）.innerHTML=playerTwo；
gameActive=true；
}
玩家=[playerOne，playerTwo]；
如果（gameActive==true）{
first=Math.floor（Math.random（）*2）；
警惕（玩家[第一名]+“你先走”）；
}
}
//将代币移到棋盘上
var dragYellow=document.getElementById（'yellowToken1'）；
var dragRed=document.getElementById（'redToken1'）；
var-dropLoc=[]；
函数locOnDrop（e）{
e、 预防默认值（）；
e、 currentTarget.appendChild（
document.createElement（'img'））
).src=document.getElementById（
e、 dataTransfer.getData（'key'））
).src；
}
gameGrid=[[1,2,3,4,5,6,7]，
[8, 9, 10, 11, 12, 13, 14],
[15, 16, 17, 18, 19, 20, 21],
[22, 23, 24, 25, 26, 27, 28],
[29, 30, 31, 32, 33, 34, 35],
[36, 37, 38, 39, 40, 41, 42],
];
对于（var i=0；i