我决定编写自己的Conway生命游戏实现，并选择了Javascript。它是纯DHTML。我已经整理了基础知识，但它似乎与正常的生命游戏行为不符。例如，滑翔机等模式不是“滑动”，振荡器不会振荡。我花了很多时间尝试各种逻辑，并完成了十多次重写。
所以，如果我制作了滑翔机模式，它将在一代之后变成方形静物。
以下是Javascript代码（对于未注释的代码感到抱歉）：
var chanceOfLiveCells = 0.1;
var gridReference = null;
var gridDimension = 15;
var cells = null;
var cellsAlive = 0;
var cellsDead = 0;
var currentGeneration = 0;
function init() {
gridReference = document.getElementById('grid');
cells = new Array();
drawGrid();
placeRandomCells();
nextGeneration();
}
function drawGrid() {
var gridArray = new Array();
var counter = 0;
for(var x = 0; x <= gridDimension - 1; x = x + 1) {
gridArray.push('<tr>');
for(var y = 0; y <= gridDimension - 1; y = y + 1) {
//gridArray.push('<td id="' + counter + '">' + x + ', ' + y + ' (' + counter + ')' + '</td>');
gridArray.push('<td id="' + counter + '"></td>');
cells.push(counter);
counter = counter + 1;
}
gridArray.push('</tr>');
}
grid = gridArray.join('');
gridReference.innerHTML = grid;
}
function nextGeneration() {
currentGeneration = currentGeneration + 1;
for(var x = 0; x <= gridDimension - 1; x = x + 1) {
for(var y = 0; y <= gridDimension - 1; y = y + 1) {
var neighbours = cellNeighbourCount(x, y);
if(isCellLive(x, y) == true) {
if(neighbours < 2) {
setDeadCell(x, y);
cellsDead = cellsDead + 1;
}
if(neighbours == 2 || neighbours == 3) {
setLiveCell(x, y);
cellsAlive = cellsAlive + 1;
}
if(neighbours > 3) {
setDeadCell(x, y);
cellsDead = cellsDead + 1;
}
}
else if(isCellLive(x, y) == false){
if(neighbours == 3) {
setLiveCell(x, y);
cellsAlive = cellsAlive + 1;
}
}
}
}
document.getElementById('currentGeneration').innerHTML = currentGeneration;
document.getElementById('cellsAlive').innerHTML = cellsAlive;
document.getElementById('cellsDead').innerHTML = cellsDead;
cellsAlive = 0;
cellsDead = 0;
setTimeout('nextGeneration()', 200);
}
function placeRandomCells() {
for(var x = 0; x <= gridDimension - 1; x = x + 1) {
for(var y = 0; y <= gridDimension - 1; y = y + 1) {
if(Math.random() < chanceOfLiveCells) {
setLiveCell(x, y);
}
else {
setDeadCell(x, y);
}
}
}
}
function setLiveCell(x, y) {
document.getElementById(getCell(x, y)).style.backgroundColor = 'red';
}
function setDeadCell(x, y) {
document.getElementById(getCell(x, y)).style.backgroundColor = 'maroon';
}
function cellNeighbourCount(x, y) {
var count = 0;
if(isCellLive(x - 1, y) == true) {
count = count + 1;
}
if(isCellLive(x - 1, y + 1) == true) {
count = count + 1;
}
if(isCellLive(x, y + 1) == true) {
count = count + 1;
}
if(isCellLive(x + 1, y + 1) == true) {
count = count + 1;
}
if(isCellLive(x + 1, y) == true) {
count = count + 1;
}
if(isCellLive(x + 1, y - 1) == true) {
count = count + 1;
}
if(isCellLive(x, y - 1) == true) {
count = count + 1;
}
if(isCellLive(x - 1, y - 1) == true) {
count = count + 1;
}
return count;
}
function isCellLive(x, y) {
if(document.getElementById(getCell(x, y)).style.backgroundColor == 'red') {
return true;
}
return false;
}
function getCell(x, y) {
if(x >= gridDimension) {
x = 0;
}
if(y >= gridDimension) {
y = 0;
}
if(x < 0) {
x = gridDimension - 1;
}
if(y < 0) {
y = gridDimension - 1;
}
return cells[x * gridDimension + y];
}
function createSquare() {
setLiveCell(4, 4);
setLiveCell(4, 5);
setLiveCell(4, 6);
setLiveCell(5, 6);
setLiveCell(6, 6);
setLiveCell(6, 5);
setLiveCell(6, 4);
setLiveCell(5, 4);
}
function createBlinker() {
setLiveCell(4, 5);
setLiveCell(5, 5);
setLiveCell(6, 5);
}
function createBeacon() {
setLiveCell(4, 4);
setLiveCell(4, 5);
setLiveCell(5, 4);
setLiveCell(5, 5);
setLiveCell(6, 6);
setLiveCell(6, 7);
setLiveCell(7, 6);
setLiveCell(7, 7);
}
答案 0 :(得分：1)
没有'renderNextGeneration（）'函数
setInterval（）对于你正在做的事情可能更合适和可维护。
Firefox的'错误控制台'在调试javascript错误方面有很大帮助。
<小时/> 用它修补应至少使它运行;它在我的系统上。
jcomeau@intrepid:~/stackoverflow/gameoflife$ bzr diff -r18 bad.js
=== modified file 'gameoflife/bad.js'
--- gameoflife/bad.js 2011-05-15 14:09:12 +0000
+++ gameoflife/bad.js 2011-05-16 04:14:40 +0000
@@ -1,10 +1,11 @@
-var chanceOfLiveCells = 0.1;
+var chanceOfLiveCells = 0.0;
var gridReference = null;
var gridDimension = 15;
var cells = null;
var cellsAlive = 0;
var cellsDead = 0;
var currentGeneration = 0;
+var timer = null;
function init() {
@@ -13,7 +14,8 @@
drawGrid();
placeRandomCells();
- nextGeneration();
+ createBlinker();
+ timer = setInterval(nextGeneration, 200);
}
@@ -45,7 +47,7 @@
}
function nextGeneration() {
-
+ alert("next generation");
currentGeneration = currentGeneration + 1;
for(var x = 0; x <= gridDimension - 1; x = x + 1) {
@@ -93,15 +95,16 @@
}
}
-
+
+ repaint();
document.getElementById('currentGeneration').innerHTML = currentGeneration;
document.getElementById('cellsAlive').innerHTML = cellsAlive;
document.getElementById('cellsDead').innerHTML = cellsDead;
+ if (cellsAlive == 0) clearInterval(timer);
cellsAlive = 0;
cellsDead = 0;
- setTimeout('nextGeneration()', 200);
}
@@ -127,17 +130,40 @@
}
+ repaint();
+
+}
+function repaint() {
+
+ for(var x = 0; x <= gridDimension - 1; x = x + 1) {
+
+ for(var y = 0; y <= gridDimension - 1; y = y + 1) {
+
+ repaintCell(x, y);
+
+ }
+
+ }
+
+}
+
+function repaintCell(x, y) {
+
+ cell = document.getElementById(getCell(x, y));
+ color = cell.style.color;
+ cell.style.backgroundColor = color;
+
}
function setLiveCell(x, y) {
- document.getElementById(getCell(x, y)).style.backgroundColor = 'red';
+ document.getElementById(getCell(x, y)).style.color = 'red';
}
function setDeadCell(x, y) {
- document.getElementById(getCell(x, y)).style.backgroundColor = 'maroon';
+ document.getElementById(getCell(x, y)).style.color = 'maroon';
}
@@ -249,7 +275,7 @@
setLiveCell(6, 5);
setLiveCell(6, 4);
setLiveCell(5, 4);
-
+ repaint()
}
function createBlinker() {
@@ -257,7 +283,7 @@
setLiveCell(4, 5);
setLiveCell(5, 5);
setLiveCell(6, 5);
-
+ repaint();
}
function createBeacon() {
@@ -270,5 +296,5 @@
setLiveCell(6, 7);
setLiveCell(7, 6);
setLiveCell(7, 7);
-
+ repaint();
}
你的逻辑错误是你在循环中杀死了细胞;当代码到达应该变为活着的死细胞时，你已经杀死了一个或多个邻居。