生命游戏延续问题
Game of Life Continuation Issues
我的《生命游戏》代码有问题。它似乎只显示了死/活细胞的第一个模式，但没有继续将其他细胞变成死细胞或活细胞，而是将它们全部变成死细胞，然后在最左上角有一个活细胞，然后再次全部死亡。我怎样才能使细胞正常地变成死细胞或活细胞？
"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();
}
}
}
}<!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>这就是我通常在 JavaScript 中实现生命游戏的方式：
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;
}canvas {
border: 1px solid #000000;
}<canvas id="universe" width="559" height="179"></canvas>希望这有帮助。
相关文章：
- 在指令控制器中使用$attrs时出现问题
- 将PHP变量传递给jQuery时遇到问题
- Canvas Html5绘图应用程序，移动画布会导致重大问题
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画(）问题
- 我的jQuery插件参数没有正确启动，遇到了问题
- Phonegap-(安卓/iphone）多个图像的图像库出现问题
- TableExport jquery插件:文件名和扩展名问题
- JavaScript Pub/Sub属性访问问题
- JavaScript异步问题
- 如何解决Yii中的页面刷新问题
- Safari(Mac OS）上的jQuery平滑滚动问题
- jqGrid树网格问题
- 使用正则表达式评估电子邮件地址时出现性能问题
- 如何消除代码中的未定义和其他问题
- JavaScript代码问题:我正在将对象转换为数组
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 由于iframe导致的问题
- 生命游戏延续问题
- 修复验证表单中的输入错误和延续问题
