W ramach ćwiczeń próbuje napisać prosty skrypt w javascripcie (póki co moje umiejętności programowania są bardzo nikłe). Po napisaniu kodu który wkleje poniżej pojawił się problem, którego nie mogę rozwiązać, a mianowicie po naciśnięciu przycisku "Clear" skrypt nie wykonuje się po raz drugi. Innymi słowy moge naciśnąc"start" tylko raz, później jeśli chcę uruchomić grę jeszcze raz muszę przeładować stronę. Dlaczego? I jak to zmienić? Rozwiązanie pewnie jest banalne, ale nie potrafie go zobaczyć, przez małą znajomość składni języka. Z poniższym kodem męcze się od wczoraj.
Html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas"></canvas>
<button id="startGame">Start!</button>
<button id="clear">Clear</button>
<script src="game.js" type="text/javascript"></script>
</body>
</html>
JS :
var c = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gridWidth = 100;
var gridHeight = 75;
var cellWidth = 9;
canvas.width = gridWidth * cellWidth;
canvas.height = gridHeight * cellWidth;
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;
var grid = [];
var newGen = [];
// fill grid randomly with given % of living cells
for (var i = 0; i < gridWidth; i++) {
grid[i] = []
newGen[i] = []
for (var j = 0; j < gridHeight; j++) {
grid[i][j] = [];
newGen[i][j] = []
var random = Math.random() * 100;
if (random > 33) {
grid[i][j] = 1;
}
}
}
//kills all living cells
//1. if dead cell has 3 living neighbours, it lives again;
//2. if living cell nas less than 2 living neighbours, it dies of loneliness;
//3. if living cell has more than 3 living neighbours, it dies of overpopulation;
//4. if living cell has exactly 3 or exactly 2 neighbours, it lives on;
function life() {
for (var i = 5; i < gridWidth - 5; i++) {
for (var j = 5; j < gridHeight - 5; j++) {
var count = countNeighbors(i, j);
if (grid[i][j] == 0) {
if (count == 3) {
newGen[i][j] = 1;
}
} else {
if (count < 2 || count > 3) {
newGen[i][j] = 0;
} else { newGen[i][j] = 1; }
}
}
}
grid = newGen;
}
// count neighbours
function countNeighbors(i, j) {
var count = 0;
counter(i - 1, j - 1);
counter(i - 1, j);
counter(i - 1, j + 1);
counter(i, j - 1);
counter(i, j + 1);
counter(i + 1, j - 1);
counter(i + 1, j);
counter(i + 1, j + 1);
function counter(i, j) {
if (i > 0 && i < gridWidth && j > 0 && j < gridHeight) {
if (grid[i][j] == 1) count++;
}
}
return count;
}
function update(dt) {
life();
draw();
}
function draw() {
// clear canvas
ctx.fillStyle = '#999';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < gridWidth; i++) {
for (var j = 0; j < gridHeight; j++) {
ctx.beginPath();
ctx.rect(i * cellWidth, j * cellWidth, cellWidth, cellWidth);
if (grid[i][j] == 1) {
ctx.fillStyle = "#40ff00"
ctx.fill();
} else { ctx.stroke(); }
}
}
}
var lastTime;
function gameLoop() {
var now = Date.now();
var dt = (now - lastTime) / 1000.0;
update(dt);
lastTime = now;
window.setTimeout(gameLoop, 50);
};
function clear() {
if (document.getElementById('clear').onclick) {
for (var i = 0; i < gridWidth; i++) {
for (var j = 0; j < gridHeight; j++) {
grid[i][j] = 0
}
}
}
}
document.getElementById('clear').onclick = clear;
document.getElementById('startGame').onclick = gameLoop;