Question

构建一个四连体游戏作为我的第一个js项目。我的游戏的背景图片是“连接四人”游戏板，顶部是一个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数组。我可以，但是如何使表“与数组通信？如果我将片段拖放到表中，如何将这些动作与数组联系起来？

algorithm connect four javascript

不是很复杂，但是对于最终结果，我只想将标记放到每列的顶部，然后像实际游戏中那样将它们放到最低可用位置。我只是提到这是为了防止影响第一个问题的答案。

谢谢！

Answer 1

沟通的方式是通过确保（就像提到的答案一样）表只是数据的可视表示形式，在这种情况下，该数据将存储在2D数组中。

因此，您应该对代码进行工程设计，以使代码不会流动

->从HTML到JS，但

->从JS到HTML

我的意思是说，不要思考汽车的外观，然后根据它来制造您的引擎，而是先弄清楚引擎将如何运转，然后再围绕它制造汽车。

在这种情况下，另一个Stack问题中的答案为此提供了一个很好的指针。

如果我想解决这个问题，我会（无特定顺序）：

创建一个允许用户“填充”特定位置的功能
检查特定地点是否被使用的功能
检查此新玩法是否为获胜组合的功能
用于将特定标记（红色或黄色）放置在给定插槽中的功能

可能还会有更多其他内容，但这仅是一个示例。您会看到这里发生的很多事情都是基于计算或算法的，它们都是在JS内部发生的，与实际DOM的交互很少。

我在这里列出的唯一一个就是添加令牌。您需要将与游戏有关的所有信息存储在2D阵列中，这些功能才能起作用。唯一是当您的应用需要对DOM进行物理修改时：“嘿，在该位置添加黄色令牌”，依此类推。

然后当然可以创建这些函数，这些函数可以通过附加事件处理程序等方式映射到DOM上，但是希望您能理解这一点。

Answer 2

虽然您可以执行某些操作来找出行中给定单元格的位置以及表中行的位置（例如，当您单击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]')直接获取元素。

Answer 3

每个@Alireza Fattahi请求

https://jsfiddle.net/lgehrig4/thg468ex/

到目前为止我的代码完成了什么 1.视觉效果（背景，游戏板，令牌） 2.抓住播放器名称（仅2个播放器。不与计算机相对） 3.随机选择一名玩家开始 4.可以将令牌拖放到板上

//SETUP
var button = document.getElementById("setStart");
var gameActive = false;


//GRAB PLAYER NAMES / CHOOSE FIRST MOVE /RESET BOARD
function setStart() {

	if (gameActive == false) {
		playerOne = prompt("Player One(yellow) please enter your name");
		playerTwo = prompt("Player Two(red) please enter your name");
		document.getElementById("yellowPlayer").innerHTML = playerOne;
		document.getElementById("redPlayer").innerHTML = playerTwo;
		gameActive = true;
	}
	players = [playerOne, playerTwo];

	if (gameActive == true) {
        first = Math.floor(Math.random() * 2);
        alert(players[first] + " you go first");
	}
}

//MOVE TOKENS TO BOARD

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();
    	}
	}
}

dragYellow.ondragstart = function(evt) {              
    evt.dataTransfer.setData('key', 'yellowToken1');  

dragRed.ondragstart = function(evt) {                 
    evt.dataTransfer.setData('key', 'redToken1');     
}

* {
	margin: 0;
	padding: 0;
}

body {
	background: url("img/table.jpg") no-repeat;
	background-size: cover;
	background-position: bottom;
}

#game {
	background: url("img/background1.png");
	position: relative;
	width: 700px;
	height: 700px;
	margin-left: 260px;
	margin-top: 120px;
	/*z-index: -1;*/
}

table {
	position: absolute;
	right: 117px;
	top: 120px;
	border-spacing: 0px;
	z-index: 2;
}

td {
	width: 66px;
	height: 59px;
	text-align: center;
}

#yellow {
	position: absolute;
	width: 50px;
	height: 50px;
	left: 220px;
	top: 520px;
	z-index: 3;
}

#red {
	position: absolute;
	width: 130px;
	height: 50px;
	left: 341px;
	top: 520px;
	z-index: 3;
}

.image {
    position: relative;
    width: 50px;
    height: 50px;
}

button {
	position: relative;
	width: 200px;
	height: 50px;
	left: 1100px;
	top: 700px;
	border: 2px solid black;
	border-radius: 15px;
	background-color: green;
	color: white;
	font-family: monospace;
	font-weight: bold;
	font-size: 2em;
	text-transform: uppercase;
}

button:hover {
  background-color: lightgreen;
  color: black;
}

/*player one div*/
#playerOne {
	position: relative;
	width: 165px;
	height: 110px;
	left: 1120px;
	top: 475px;
}

/*player two div*/
#playerTwo {
	position: relative;
	width: 165px;
	height: 110px;
	left: 1120px;
	top: 510px;
}

/*player one name*/
#yellowPlayer {
	width: 160px;
	height: 25px;
	background-color: yellow;
	border: 2px solid black;
	border-radius: 15px;
	text-align: center;
	text-transform: uppercase;
	font-family: monospace;
	font-size: 15px;
}

/*player two name*/
#redPlayer {
	width: 160px;
	height: 25px;
	background-color: red;
	border: 2px solid black;
	border-radius: 15px;
	text-align: center;
	text-transform: uppercase;
	font-family: monospace;
	font-size: 15px;
}

h3	{
	text-align: center;
}

#playerOneWins {
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-radius: 50px;
	margin: auto;
}

#playerTwoWins {
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-radius: 50px;
	margin: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Connect Four</title>
	<link rel="stylesheet" type="text/css" href="connect.css">
</head>
<body>

	<!-- Banner -->
	<div id="banner">

	</div>

	<!-- Player One's name and score -->
	<div id="playerOne">
		<div id="yellowPlayer"></div>
		<!-- <input id="yellowPlayer" type="text" name="playerOneName" maxlength="15" value="Player One Name"> -->
		<h3>WINS</h3>
		<div id="playerOneWins">

		</div>
	</div>

	<!-- Player Two's name and score -->
	<div id="playerTwo">
		<div id="redPlayer"></div>
		<!-- <input id="redPlayer" type="text" name="playerTwoName" maxlength="15" value="Player Two Name"> -->
		<h3>WINS</h3>
		<div id="playerTwoWins">

		</div>
	</div>

	<!-- New Game /  -->
	<button id="btn" onclick="setStart()">New Game</button>


	<!--Main Board  -->
	<div id="game">
		<table id="gameBoard">
			<tr id="row1">
				<td id="1"></td>
				<td id="2"></td>
				<td id="3"></td>
				<td id="4"></td>
				<td id="5"></td>
				<td id="6"></td>
				<td id="7"></td>
			</tr>
			<tr id="row2">
				<td id="8"></td>
				<td id="9"></td>
				<td id="10"></td>
				<td id="11"></td>
				<td id="12"></td>
				<td id="13"></td>
				<td id="14"></td>
			</tr>
			<tr id="row3">
				<td id="15"></td>
				<td id="16"></td>
				<td id="17"></td>
				<td id="18"></td>
				<td id="19"></td>
				<td id="20"></td>
				<td id="21"></td>
			</tr>
			<tr id="row4">
				<td id="22"></td>
				<td id="23"></td>
				<td id="24"></td>
				<td id="25"></td>
				<td id="26"></td>
				<td id="27"></td>
				<td id="28"></td>
			</tr>
			<tr id="row5">
				<td id="29"></td>
				<td id="30"></td>
				<td id="31"></td>
				<td id="32"></td>
				<td id="33"></td>
				<td id="34"></td>
				<td id="35"></td>
			</tr>
			<tr id="row6">
				<td id="36"></td>
				<td id="37"></td>
				<td id="38"></td>
				<td id="39"></td>
				<td id="40"></td>
				<td id="41"></td>
				<td id="42"></td>
			</tr>
		</table>

		<!-- Mouse Down / Mouse Up event -->
		<div id="yellow">
			<img src="img/yellow.png" id="yellowToken1" class="image" draggable="true">
		</div>
		<div id="red">
			<img src="img/red.png" id="redToken1" class="image" draggable="true" >
		</div>
	</div>

	<!-- ondrop="dragDrop(event)" ondragover="allowDrop(event)" -->





<script src="connect.js"></script>

</body>
</html>

连接四个游戏逻辑

3 个答案: