Question

我的生命游戏代码存在问题。它似乎只显示死亡/活着细胞的第一种模式，但不会继续将其他细胞变成死亡或活着的细胞，而是将它们全部变为死亡，然后一只活在左上角，然后全部死亡。我怎样才能使细胞正常死亡或活着？

＆＃13;

"use strict";

window.onload=function()
{
	var gameBoardArray;
	var i;
	var j;
	var tempArray;

	gameBoardArray=create2dArray(10, 10, getDeadValue());
	tempArray=copy2dArray(gameBoardArray);
	createGameBoard(document.getElementById("gameBoard"), gameBoardArray);
	createFirstGeneration(gameBoardArray);

	for(i = 0; i < gameBoardArray.length; i++)
	{
		for(j = 0; j < gameBoardArray[i].length; j++)
		{
			if(gameBoardArray[i][j] === getLiveValue())
			{

				document.getElementById('r' + i + 'c' + j).style.backgroundColor = getLiveColor();

			}

			else
			{

				document.getElementById('r' + i + 'c' + j).style.backgroundColor = getDeadColor();
			}
		}
	}
	window.setInterval( function()
	{
		applyRules(gameBoardArray, tempArray);
	}, 1000);
};

function trim(data)
{
	var start;
	var whitespace;
	var end;
	var result;

	if(typeof data==="string")
		{
			whitespace=" \n\r\t\f";
			start=0;
	}

	else
	{
		result=data;
	}

	while((start<data.length)&&(whitespace.indexOf(data.charAt(start))))
	{
		start=start+1;
	};
	end=data.length-1;

	while((end>=0)&&(whitespace.indexOf(data.charAt(end))))
	{
		end=end-1;
	};

	if(end<start)
	{
		result="";
	}
	else
	{
		result=data.substring(1+start,end);
	}
		return result;
};

function createHTMLElement(elementType, id, classInfo, content)
{
	if(elementType===null)
	{
		elementType="";
	};

	trim(elementType);

	if(id===null)
	{
		id="";
	}

	trim(id);

	if(id.length>0)
	{
		id=" "+"id="+'"'+id+'"'+" ";
	};

	if(classInfo===null)
	{
		classInfo="";
	}

	trim(classInfo);

	if(classInfo.length>0)
	{
		classInfo=" "+ "class="+'"'+classInfo+'"';
	}

	if(content===null)
	{
		content="";
	};

	trim(content);

	return '<' +elementType +
	id + classInfo +
	'>' + content +
	'</' + elementType + '>';
};

function getDeadValue()
{
	return 0;
};

function getLiveValue()
{
	return 1;
};

function isAlive(cell)
{
	if(cell===getDeadValue())
	{
		return cell==getDeadValue();
	}

	else
	{
		return cell==getDeadValue();
	}
};

function getLiveColor()
{
	return "green";
}

function getDeadColor()
{
	return "red";
}

function isInArray(array2d, row, col)
{
	if(row >= 0 && row < array2d.length && col >= 0 && col < array2d.length)
	{
		return true;
	}
	else
	{
		return false;
	}
}

function create2dArray(rows, columns, initialValue)

{
	var array2d;
	var i;
	var j;

	array2d = new Array(rows);

	for(i = 0; i < array2d.length; i++)
	{
		array2d[i] = new Array(columns);
		for(j = 0; j < array2d[i].length; j++)
		{
			array2d[i][j] = initialValue;
		}

	}
	return array2d;
}

function copy2dArray(array)
{

	var i;
	var j;
	var result;

	result = new Array(array.length);

	for(i = 0; i < result.length; i++)

	{

		result[i] = new Array(array[i].length);

		for(j = 0; j < result[i].length; j++)
		{
			result[i][j] = array[i][j];
		}
	}
	return result;
}

function createGameBoard(containerElement, array2d)
{
	var classInfo;
	var count;
	var i;
	var innerHTML;
	var j;

	innerHTML = "";
	count = 0;

	for(i = 0; i < array2d.length; i++)
	{

		if(i === 0)
		{
			classInfo = 'cell firstRow newRow';
		}

		else
		{
			classInfo = 'cell newRow';
		}

		for(j = 0; j < array2d[i].length; j++)
		{
			if(i === 0 && j === array2d[i].length - 1)
			{
				classInfo = 'cell firstRow lastColumn';
			}

			if(i !== 0 && j === array2d[i].length - 1)
			{
				classInfo = 'cell lastColumn';
			}

			innerHTML = innerHTML + createHTMLElement('div', 'r' + i + 'c' + j, classInfo, null);

			if(i === 0)
			{
				classInfo = 'cell firstRow';
			}

			else
			{
				classInfo = 'cell';
			}

			count = count + 1;
		}
	}
	containerElement.innerHTML = innerHTML;
}

function createFirstGeneration(array2d)
{
	var i;
	var j;
	var k;
	var row;
	var col;

	for(i=0; i<array2d.length; i++)
	for(j=0; j<array2d[i].length; j++)
	{
		if(i===j||i==j||(i+j)%5===0)
		{
			array2d[i][j]=getLiveValue();
		}
	}
}

function countLivingNeighborsOf(array2d, row, col)
{

	var count;

	count = 0;

	if(isInArray(array2d, row + 1, col) && isAlive(array2d[row + 1][col]))
	{
		count = count + 1;
	}

	if(isInArray(array2d, row - 1, col) && isAlive(array2d[row - 1][col]))
	{
		count = count + 1;
	}

	if(isInArray(array2d, row, col + 1) && isAlive(array2d[row][col + 1]))
	{
		count = count + 1;
	}

	if(isInArray(array2d, row, col - 1) && isAlive(array2d[row][col - 1]))
	{
		count = count + 1;
	}

	if(isInArray(array2d, row + 1, col + 1) && isAlive(array2d[row + 1][col + 1]))
	{
		count = count + 1;
	}

	if(isInArray(array2d, row - 1, col - 1) && isAlive(array2d[row - 1][col - 1]))
	{
		count = count + 1;
	}

	if(isInArray(array2d, row - 1, col + 1) && isAlive(array2d[row - 1][col + 1]))
	{
		count = count + 1;
	}

	if(isInArray(array2d, row + 1, col - 1) && isAlive(array2d[row + 1][col - 1]))
	{
		count = count + 1;
	}

	return count;
}

function applyRules(array2d, tmpArray)
{
	var i;
	var j;

	for(i = 0; i < array2d.length; i++)
	{
		for(j = 0; j < array2d[i].length; j++)
		{
			tmpArray[i][j] = countLivingNeighborsOf(array2d, i, j);
		}
	}

	for(i = 0; i < array2d.length; i++)
	{

		for(j = 0; j < array2d[i].length; j++)
		{
			if(tmpArray[i][j] < 2)
			{
				array2d[i][j] = 0;
			}

			if(tmpArray[i][j] > 3)
			{
				array2d[i][j] = 0;
			}

			if(tmpArray[i][j] === 3)
			{
				array2d[i][j] = 1;
			}

			if(tmpArray[i][j] === 1)
			{
				document.getElementById('r' + i + 'c' + j).style.backgroundColor = getLiveColor();
			}

			else
			{
				document.getElementById('r' + i + 'c' + j).style.backgroundColor = getDeadColor();
			}
		}
	}
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<title> Game of Life </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="GameOfLife.js" type="text/javascript"></script>
<style type="text/css">

{
border	:	0;
margin	:	0;
padding	:	0;
}

body
{
font-family	:	"Times New Roman", serif;
font-size	:	12pt;
}

#page
{
margin:auto;
}

.cell
{
border-left: 1px solid black;
border-bottom: 1px solid black;
float: left;
height: .5em;
width: .5em;
}

.newRow
{
border-left: 1px solid black;
clear: left;
}

.firstRow
{
border-top: 1px solid black;
}

.lastColumn
{
border-right: 1px solid black;
}

</style>
</head>
<body>
<div id="page">
<div id="gameBoard">
</div> <!-- gameBoard -->
</div> <!-- page -->
</body>
</html>

＆＃13;

Answer 1

这就是我通常用JavaScript实现游戏的方式：

＆＃13;

var canvas = document.getElementById("universe");
var context = canvas.getContext("2d");

var width = canvas.width;
var height = canvas.height;

var size = 2;
var cell = size - 1;

var rows = Math.floor(height / size);
var cols = Math.floor(width / size);

var bottom = rows - 1;
var right = cols - 1;

var universe = new Array(cols);

for (var x = 0; x < cols; x++) {
  var col = new Array(rows);
  for (var y = 0; y < rows; y++)
    col[y] = false;
  universe[x] = col;
}

var cx = Math.floor(cols / 2);
var cy = Math.floor(rows / 2);
var ct = cy - 1;

universe[cx][cy] = true;
universe[cx][ct] = true;
universe[cx][cy + 1] = true;
universe[cx - 1][cy] = true;
universe[cx + 1][ct] = true;

animate();

function drawCell(x, y) {
  context.fillRect(size * x + 1, size * y + 1, cell, cell);
}

function drawUniverse() {
  context.clearRect(0, 0, width, height);
  for (var x = 0; x < cols; x++)
    for (var y = 0; y < rows; y++)
      if (universe[x][y]) drawCell(x, y);
}

function animate() {
  setTimeout(animate, 125);
  drawUniverse();
  updateUniverse();
}

function updateUniverse() {
  var newUniverse = new Array(cols);

  for (var x = 0; x < cols; x++) {
    var col = new Array(rows);

    for (var y = 0; y < rows; y++) {
      var l = x > 0 ? x - 1 : right;
      var r = x < right ? x + 1 : 0;
      var t = y > 0 ? y - 1 : bottom;
      var b = y < bottom ? y + 1 : 0;

      var neighbors = [ universe[l][t], universe[x][t], universe[r][t]
                      , universe[l][y],                 universe[r][y]
                      , universe[l][b], universe[x][b], universe[r][b] ];

      var count = 0;
      for (var i = 0; i < 8; i++)
        if (neighbors[i]) count++;

      var self = universe[x][y];

      col[y] = count === 3 || self && count === 2;
    }

    newUniverse[x] = col;
  }

  universe = newUniverse;
}

＆＃13;

canvas {
  border: 1px solid #000000;
}

＆＃13;

<canvas id="universe" width="559" height="179"></canvas>

＆＃13;

希望这有帮助。

生命延续问题的游戏

1 个答案: