2014-12-08 54 views
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>

回答

0

這是怎麼了,我通常實現人生的遊戲中的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>

希望這有助於。