时间戳

首页 > 解决方案 > 连接四个游戏逻辑

javascript - 连接四个游戏逻辑

问题描述

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

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

var dragYellow = document.getElementById('yellowToken1');
var dragRed = document.getElementById('redToken1');
var dropLoc = [];

function locOnDrop(e) {                 
	e.preventDefault();            
	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],
			       ];

for(var i = 0; i < gameGrid.length; i++){           
     for(var j = 0; j < gameGrid[i].length; j++){        

	    dropLoc[gameGrid[i][j]] = document.getElementById(gameGrid[i][j].toString());
	    dropLoc[gameGrid[i][j]].ondrop = locOnDrop;          
	                                                             
	    dropLoc[gameGrid[i][j]].ondragover = function(e) {       
	        e.preventDefault();
    	}
	}
}

有许多“检查获胜者”示例，但它们都是基于使用数组而不是表格的游戏。我发现的最接近的是 2012 年提出的这个问题（见下文）。建议的最佳答案是不要使用 DOM 横向，而是使用 2D 数组。我对此没意见，但是如何让我的表“与阵列通信？如果我将这些碎片拖放到表中，我将如何将这些移动与阵列连接起来？

算法连接四个javascript

不要使事情复杂化，但为了最终结果，我只想将标记放在每列的顶部，让它们像在真实游戏中一样下降到最低的可用位置。我只是在影响我第一个问题的答案的情况下提到这一点。

谢谢！

标签： javascriptarraysmultidimensional-array

解决方案

虽然您可以做一些事情来确定给定单元格在行中的位置，以及行在表格中的位置（例如，当您单击 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]')抓取元素。

推荐阅读