javascript - JavaScript 中的生命游戏 - 使用 Table

Question

我用 JavaScript 和 HTML 表完成了康威生命游戏的编码。
表格中的逻辑单元格将被分配唯一的id，并根据id进行操作(基于4条规则)。
您可以在 Codepen 找到工作代码或者我已将代码放在下面。
问题是它适用于任意数量的行和 9 列，如果给出的列超过 9 列，它们将不是唯一的id，因此它会以不期望的方式工作。
查询是我可以为整个表分配唯一ID的一种方式。
代码块tableInitialization是初始化部分。

(function(){
	$(document).ready(function(){
		var column = "", appendRow = "", inc = 1, selectedCells = [], toRemoveClass = [], toAddClass = [], maxValue;

		var tableInitialization = function(noOfRow, noOfColumn){
			for(var row=1; row<=noOfRow; row++){
				for(var col=1; col<=noOfColumn; col++){
					column += "<td  id =" + inc+col + ">  </td>";
				}
				appendRow += "<tr>"+column+"</tr>";
				column= "";
				inc++;
			}
				$(".table").append(appendRow);
		};

		$("#submit").click(function(data){
			var noOfRow = parseInt($("#rowNo").val());
			var noOfColumn = parseInt($("#columnNo").val());
			maxValue = parseInt(noOfRow.toString() + noOfColumn.toString());

			if(isNaN(noOfRow) || isNaN(noOfColumn)){
				alert("Please enter number");
			} else {
				tableInitialization(noOfRow, noOfColumn);
				$("#container").hide();
				$("td").click( function(data){
					selectedCells.push(parseInt(this.id));
					$(this).addClass("valid");
				});
			}	
		});

		

		var checkAgain = function(selectedCells){
			var check = 0, toBeReplaced = [], inArray = [], livingCell;
			var currentNumber = 0;
			var north, northEast, East, southEast, south, southWest, west, northWest;

			for(var i=0; i<selectedCells.length; i++){
				check = 0;
			    currentNumber = parseInt(selectedCells[i]);

			    if($("#"+(currentNumber)).hasClass("valid")){
					livingCell = true;
				} else {
					livingCell = false;
				}

			    if(currentNumber > 0 && currentNumber < maxValue){
				
					/*North*/
					if((currentNumber-10) > 0 && (currentNumber-10) < maxValue){	
						if($("#"+(currentNumber-10)).hasClass("valid")){
							check ++;
						}
					}

					/*North East*/
					if((currentNumber-9) > 0 && (currentNumber-9) < maxValue){	
						if($("#"+(currentNumber-9)).hasClass("valid")){
							check ++;
						}
					}

					/*East*/
					if((currentNumber+1) > 0 && (currentNumber+1) < maxValue){	
						if($("#"+(currentNumber+1)).hasClass("valid")){
							check ++;
						}
					}

					/*South East*/
					if((currentNumber+11) > 0 && (currentNumber+11) < maxValue){	
						if($("#"+(currentNumber+11)).hasClass("valid")){
							check ++;
						}
					}

					/*South*/
					if((currentNumber+10) > 0 && (currentNumber+10) < maxValue){	
						if($("#"+(currentNumber+10)).hasClass("valid")){
							check ++;
						}
					}

					/*South West*/
					if((currentNumber+9) > 0 && (currentNumber+9) < maxValue){	
						if($("#"+(currentNumber+9)).hasClass("valid")){
							check ++;
						}
					}

					/*West*/
					if((currentNumber-1) > 0 && (currentNumber-1) < maxValue){	
						if($("#"+(currentNumber-1)).hasClass("valid")){
							check ++;
						}
					}

					/*North West*/
					if((currentNumber-11) > 0 && (currentNumber-11) < maxValue){	
						if($("#"+(currentNumber-11)).hasClass("valid")){
							check ++;
						}
					}

					if(livingCell){
						if(check === 0 || check === 1 ){
							if(toRemoveClass.indexOf(currentNumber) == -1){
								toRemoveClass.push(currentNumber);
							}
						} 
						if(check == 4 || check == 5 || check == 6 || check == 7 || check == 8 ){
							if(toRemoveClass.indexOf(currentNumber) == -1){
								toRemoveClass.push(currentNumber);
							}
						} 
						if(check == 2 || check == 3){
							if(toAddClass.indexOf(currentNumber) == -1){
								toAddClass.push(currentNumber);
							}
						} 
					} else {
						if(check == 3){
							if(toAddClass.indexOf(currentNumber) == -1){
								toAddClass.push(currentNumber);
							}
						} 
					}

				}
			}
		};

		var gol = function(selectedCells){
			var check = 0, inArray = [];
			 var currentNumber = 0, livingCell;
			for(var i=0; i<selectedCells.length; i++){
					toBeReplaced = [];
					check = 0;
				    currentNumber = parseInt(selectedCells[i]);

				    if($("#"+(currentNumber)).hasClass("valid")){
						livingCell = true;
					} else {
						livingCell = false;
					}
				    
				    if(currentNumber > 0 && currentNumber < maxValue){
					
						/*North*/
						if((currentNumber-10) > 0 && (currentNumber-10) < maxValue){	
							if($("#"+(currentNumber-10)).hasClass("valid")){
								check ++;
							}
						
							if(toBeReplaced.indexOf((currentNumber-10)) == -1){
								toBeReplaced.push(currentNumber-10);
							}
						}

						/*North East*/
						if((currentNumber-9) > 0 && (currentNumber-9) < maxValue){	
							if($("#"+(currentNumber-9)).hasClass("valid")){
								check ++;
							}
						
							if(toBeReplaced.indexOf((currentNumber-9)) == -1){
								toBeReplaced.push(currentNumber-9);
							}
						}

						/*East*/
						if((currentNumber+1) > 0 && (currentNumber+1) < maxValue){	
							if($("#"+(currentNumber+1)).hasClass("valid")){
								check ++;
							}

							if(toBeReplaced.indexOf((currentNumber+1)) == -1){
								toBeReplaced.push(currentNumber+1);
							}
						}

						/*South East*/
						if((currentNumber+11) > 0 && (currentNumber+11) < maxValue){	
							if($("#"+(currentNumber+11)).hasClass("valid")){
								check ++;
							}

							if(toBeReplaced.indexOf((currentNumber+11)) == -1){
								toBeReplaced.push(currentNumber+11);
							}
						}

						/*South*/
						if((currentNumber+10) > 0 && (currentNumber+10) < maxValue){	
							if($("#"+(currentNumber+10)).hasClass("valid")){
								check ++;
							}

							if(toBeReplaced.indexOf((currentNumber+10)) == -1){
								toBeReplaced.push(currentNumber+10);
							}
						}

						/*South West*/
						if((currentNumber+9) > 0 && (currentNumber+9) < maxValue){	
							if($("#"+(currentNumber+9)).hasClass("valid")){
								check ++;
							}

							if(toBeReplaced.indexOf((currentNumber+9)) == -1){
								toBeReplaced.push(currentNumber+9);
							}
						}

						/*West*/
						if((currentNumber-1) > 0 && (currentNumber-1) < maxValue){	
							if($("#"+(currentNumber-1)).hasClass("valid")){
								check ++;
							}

							if(toBeReplaced.indexOf((currentNumber-1)) == -1){
								toBeReplaced.push(currentNumber-1);
							}
						}

						/*North West*/
						if((currentNumber-11) > 0 && (currentNumber-11) < maxValue){	
							if($("#"+(currentNumber-11)).hasClass("valid")){
								check ++;
							}

							if(toBeReplaced.indexOf((currentNumber-11)) == -1){
								toBeReplaced.push(currentNumber-11);
							}
						}

						if(livingCell){
							if(check == 0 || check == 1 ){
								if(toRemoveClass.indexOf(currentNumber) == -1){
									toRemoveClass.push(currentNumber);
								}
							} 
							if(check == 4 || check == 5 || check == 6 || check == 7 || check == 8 ){
								if(toRemoveClass.indexOf(currentNumber) == -1){
									toRemoveClass.push(currentNumber);
								}
							} 
							if(check == 2 || check == 3){
								if(toAddClass.indexOf(currentNumber) == -1){
									toAddClass.push(currentNumber);
								}
							} 
						} else {
							if(check == 3){
								if(toAddClass.indexOf(currentNumber) == -1){
									toAddClass.push(currentNumber);
								}
							} 
						}

					}
				checkAgain(toBeReplaced);
			}
			
			
			for(var i=0; i<toRemoveClass.length; i++){
				$("#"+toRemoveClass[i]).removeClass("valid");
			}
			
			for(var i=0; i<toAddClass.length; i++){
				$("#"+toAddClass[i]).addClass("valid");
			}
			
			toBeReplaced = toAddClass;	
			
			if(toAddClass.length == 0){
				//exit
				return;
			} else {
				setInterval(function(){
					gol($.unique(toBeReplaced));
				},1000);
			}
	
			selectedCells = [];
			toAddClass =[];
			toRemoveClass = [];
	
		};

		start = function(){
			if(selectedCells.length == 0){
				alert("select cell");
			} else {

				gol(selectedCells);

			}
		};

	});
})();

body{
  background: #BBDEFB ;
}
td {
    width: 20px;
    height: 20px;
    background: #eee;
}
table {
    cursor: default;
}
.valid {
    background: #00BFA5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
	<title>Conways Game of Life</title>
	<link rel="stylesheet" type="text/css" href="gameOfLife.css">
</head>
<body>

	<h1><code>Conway's game of life</code></h1>
	<div id="container">
		<h2><code>enter row * columns</code></h2>
		<form>
			<code>row &#9733; column : </code>
			<input id="rowNo" type="text"/> &#9733;
			<input id="columnNo" type="text"/>
		</form>
		<button id="submit"> Submit </button>
	    <br><br>
    </div>

	<table class="table"></table>
	<br><br>
	<button onClick="start()"> start </button>
	<br><br>
	<h2><code> Rules </code></h2>
	<code>1. Any live cell with fewer than two live neighbours dies, 
       as if caused by underpopulation.</code><br>
	<code>2. Any live cell with more than three live neighbours dies, 
	   as if by overcrowding.</code><br>
	<code>3. Any live cell with two or three live neighbours lives 
	   on to the next generation.</code><br>
	<code>4. Any dead cell with exactly three live neighbours becomes 
	   a live cell.</code>
	<script type="text/javascript" src="gameOfLife.js"></script>
</body>
</html>

Answer 1

无需深入研究您的代码。您可以使用 col 和 row 索引构建 ID，因此您会得到类似 11, 12, 13, 14, 15, ... 110, 111, 112 的内容。等等第一行。如果没有分隔符，第十一行第一个元素的 ID 也将为 111。一旦您使用像“_”这样的分隔符，您的 ID 就是唯一的:1_1, 1_2再次。

for(var row=1; row<=noOfRow; row++){
    for(var col=1; col<=noOfColumn; col++){
        column += "<td id =" + inc+"_"+col + ">  </td>";
        /* you also could add data attributes:
           data-row=\""+row+"\" data-col=\""+col+"\" 
        */
    }
    appendRow += "<tr>"+column+"</tr>";
    column= "";
    inc++;
}

查看您的代码，我认为您会遇到其他问题，因为有很多与“10”相关的代码。例如:if((currentNumber-9) > 0 && (currentNumber-9) < maxValue){ - 如果您的行数超过 9 行，则此方法不起作用。但解决这个问题将是整个游戏的重写版本。