2
我遇到了我的遊戲代碼問題。它似乎只顯示死/活細胞的第一種模式,但不會將其他細胞轉變成死細胞或活細胞,而是將所有細胞都變爲死亡,然後在最左上角活體存活,然後再次死亡。我該如何做到這樣才能使細胞死亡或活着?遊戲人生延續問題
"use strict";
window.onload=function()
{
\t var gameBoardArray;
\t var i;
\t var j;
\t var tempArray;
\t gameBoardArray=create2dArray(10, 10, getDeadValue());
\t tempArray=copy2dArray(gameBoardArray);
\t createGameBoard(document.getElementById("gameBoard"), gameBoardArray);
\t createFirstGeneration(gameBoardArray);
\t for(i = 0; i < gameBoardArray.length; i++)
\t {
\t \t for(j = 0; j < gameBoardArray[i].length; j++)
\t \t {
\t \t \t if(gameBoardArray[i][j] === getLiveValue())
\t \t \t {
\t \t \t \t document.getElementById('r' + i + 'c' + j).style.backgroundColor = getLiveColor();
\t \t \t }
\t \t \t else
\t \t \t {
\t \t \t \t document.getElementById('r' + i + 'c' + j).style.backgroundColor = getDeadColor();
\t \t \t }
\t \t }
\t }
\t window.setInterval(function()
\t {
\t \t applyRules(gameBoardArray, tempArray);
\t }, 1000);
};
function trim(data)
{
\t var start;
\t var whitespace;
\t var end;
\t var result;
\t if(typeof data==="string")
\t \t {
\t \t \t whitespace=" \n\r\t\f";
\t \t \t start=0;
\t }
\t else
\t {
\t \t result=data;
\t }
\t while((start<data.length)&&(whitespace.indexOf(data.charAt(start))))
\t {
\t \t start=start+1;
\t };
\t end=data.length-1;
\t while((end>=0)&&(whitespace.indexOf(data.charAt(end))))
\t {
\t \t end=end-1;
\t };
\t if(end<start)
\t {
\t \t result="";
\t }
\t else
\t {
\t \t result=data.substring(1+start,end);
\t }
\t \t return result;
};
function createHTMLElement(elementType, id, classInfo, content)
{
\t if(elementType===null)
\t {
\t \t elementType="";
\t };
\t trim(elementType);
\t if(id===null)
\t {
\t \t id="";
\t }
\t trim(id);
\t if(id.length>0)
\t {
\t \t id=" "+"id="+'"'+id+'"'+" ";
\t };
\t if(classInfo===null)
\t {
\t \t classInfo="";
\t }
\t trim(classInfo);
\t if(classInfo.length>0)
\t {
\t \t classInfo=" "+ "class="+'"'+classInfo+'"';
\t }
\t if(content===null)
\t {
\t \t content="";
\t };
\t trim(content);
\t return '<' +elementType +
\t id + classInfo +
\t '>' + content +
\t '</' + elementType + '>';
};
function getDeadValue()
{
\t return 0;
};
function getLiveValue()
{
\t return 1;
};
function isAlive(cell)
{
\t if(cell===getDeadValue())
\t {
\t \t return cell==getDeadValue();
\t }
\t else
\t {
\t \t return cell==getDeadValue();
\t }
};
function getLiveColor()
{
\t return "green";
}
function getDeadColor()
{
\t return "red";
}
function isInArray(array2d, row, col)
{
\t if(row >= 0 && row < array2d.length && col >= 0 && col < array2d.length)
\t {
\t \t return true;
\t }
\t else
\t {
\t \t return false;
\t }
}
function create2dArray(rows, columns, initialValue)
{
\t var array2d;
\t var i;
\t var j;
\t array2d = new Array(rows);
\t for(i = 0; i < array2d.length; i++)
\t {
\t \t array2d[i] = new Array(columns);
\t \t for(j = 0; j < array2d[i].length; j++)
\t \t {
\t \t \t array2d[i][j] = initialValue;
\t \t }
\t }
\t return array2d;
}
function copy2dArray(array)
{
\t var i;
\t var j;
\t var result;
\t result = new Array(array.length);
\t for(i = 0; i < result.length; i++)
\t {
\t \t result[i] = new Array(array[i].length);
\t \t for(j = 0; j < result[i].length; j++)
\t \t {
\t \t \t result[i][j] = array[i][j];
\t \t }
\t }
\t return result;
}
function createGameBoard(containerElement, array2d)
{
\t var classInfo;
\t var count;
\t var i;
\t var innerHTML;
\t var j;
\t innerHTML = "";
\t count = 0;
\t for(i = 0; i < array2d.length; i++)
\t {
\t \t if(i === 0)
\t \t {
\t \t \t classInfo = 'cell firstRow newRow';
\t \t }
\t \t else
\t \t {
\t \t \t classInfo = 'cell newRow';
\t \t }
\t \t for(j = 0; j < array2d[i].length; j++)
\t \t {
\t \t \t if(i === 0 && j === array2d[i].length - 1)
\t \t \t {
\t \t \t \t classInfo = 'cell firstRow lastColumn';
\t \t \t }
\t \t \t if(i !== 0 && j === array2d[i].length - 1)
\t \t \t {
\t \t \t \t classInfo = 'cell lastColumn';
\t \t \t }
\t \t \t innerHTML = innerHTML + createHTMLElement('div', 'r' + i + 'c' + j, classInfo, null);
\t \t \t if(i === 0)
\t \t \t {
\t \t \t \t classInfo = 'cell firstRow';
\t \t \t }
\t \t \t else
\t \t \t {
\t \t \t \t classInfo = 'cell';
\t \t \t }
\t \t \t count = count + 1;
\t \t }
\t }
\t containerElement.innerHTML = innerHTML;
}
function createFirstGeneration(array2d)
{
\t var i;
\t var j;
\t var k;
\t var row;
\t var col;
\t for(i=0; i<array2d.length; i++)
\t for(j=0; j<array2d[i].length; j++)
\t {
\t \t if(i===j||i==j||(i+j)%5===0)
\t \t {
\t \t \t array2d[i][j]=getLiveValue();
\t \t }
\t }
}
function countLivingNeighborsOf(array2d, row, col)
{
\t var count;
\t count = 0;
\t if(isInArray(array2d, row + 1, col) && isAlive(array2d[row + 1][col]))
\t {
\t \t count = count + 1;
\t }
\t if(isInArray(array2d, row - 1, col) && isAlive(array2d[row - 1][col]))
\t {
\t \t count = count + 1;
\t }
\t if(isInArray(array2d, row, col + 1) && isAlive(array2d[row][col + 1]))
\t {
\t \t count = count + 1;
\t }
\t if(isInArray(array2d, row, col - 1) && isAlive(array2d[row][col - 1]))
\t {
\t \t count = count + 1;
\t }
\t if(isInArray(array2d, row + 1, col + 1) && isAlive(array2d[row + 1][col + 1]))
\t {
\t \t count = count + 1;
\t }
\t if(isInArray(array2d, row - 1, col - 1) && isAlive(array2d[row - 1][col - 1]))
\t {
\t \t count = count + 1;
\t }
\t if(isInArray(array2d, row - 1, col + 1) && isAlive(array2d[row - 1][col + 1]))
\t {
\t \t count = count + 1;
\t }
\t if(isInArray(array2d, row + 1, col - 1) && isAlive(array2d[row + 1][col - 1]))
\t {
\t \t count = count + 1;
\t }
\t return count;
}
function applyRules(array2d, tmpArray)
{
\t var i;
\t var j;
\t for(i = 0; i < array2d.length; i++)
\t {
\t \t for(j = 0; j < array2d[i].length; j++)
\t \t {
\t \t \t tmpArray[i][j] = countLivingNeighborsOf(array2d, i, j);
\t \t }
\t }
\t for(i = 0; i < array2d.length; i++)
\t {
\t \t for(j = 0; j < array2d[i].length; j++)
\t \t {
\t \t \t if(tmpArray[i][j] < 2)
\t \t \t {
\t \t \t \t array2d[i][j] = 0;
\t \t \t }
\t \t \t if(tmpArray[i][j] > 3)
\t \t \t {
\t \t \t \t array2d[i][j] = 0;
\t \t \t }
\t \t \t if(tmpArray[i][j] === 3)
\t \t \t {
\t \t \t \t array2d[i][j] = 1;
\t \t \t }
\t \t \t if(tmpArray[i][j] === 1)
\t \t \t {
\t \t \t \t document.getElementById('r' + i + 'c' + j).style.backgroundColor = getLiveColor();
\t \t \t }
\t \t \t else
\t \t \t {
\t \t \t \t document.getElementById('r' + i + 'c' + j).style.backgroundColor = getDeadColor();
\t \t \t }
\t \t }
\t }
}
<!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 \t : \t 0;
margin \t : \t 0;
padding \t : \t 0;
}
body
{
font-family \t : \t "Times New Roman", serif;
font-size \t : \t 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>