2
\$\begingroup\$

I finished coding Conway's Game of Life in JavaScript and HTML table.
logic cells in a table will be assigned with unique id's and based on the id operations(based 4 rules) take place.
You can find the working code at Codepen or i have put the code below.
The thing is it works well with any number of rows and 9 columns and if more than 9 columns are given their wont be unique id's so it works in undesired manner.
Query Is their a way where i can assign the whole table with unique id's.
Code block tableInitialization is the initialization part.

(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>

\$\endgroup\$
  • \$\begingroup\$ its complete code and works good, you can run and see the snippet. i wanted to know how i can assign unique numbers(id i my case) to each cell, after the 9th column, so that i would get to know how i can extend the functionality, with this working code \$\endgroup\$ – Sandeep kumar H R Mar 30 '15 at 5:26
  • \$\begingroup\$ if this does not fit here, where should i put this question. \$\endgroup\$ – Sandeep kumar H R Mar 30 '15 at 5:28
  • \$\begingroup\$ Try Stack Overflow. \$\endgroup\$ – Jamal Mar 30 '15 at 5:56
  • \$\begingroup\$ I think a working program with acknowledged limitations is on-topic. Reviewers may choose to address the limitation, but aren't obligated to fix it for you. \$\endgroup\$ – 200_success Mar 30 '15 at 7:23
  • \$\begingroup\$ I have kind of completed it for any number of rows and columns, the code at codepen.io/SrSandeepKumar/pen/bNZMyg but when i tried to get a Glider Gun it dint work as desired. \$\endgroup\$ – Sandeep kumar H R Apr 2 '15 at 8:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.