skrypt js dziala tylko raz

pytanie zadane 24 kwietnia 2017 w JavaScript przez wazon Nowicjusz (200 p.)

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;

1	komentarz 24 kwietnia 2017 przez rafal.budzis Szeryf (85,260 p.) Nigdzie nie zatrzymujesz funkcji window.setTimeout(gameLoop, 50); przez co cały czas wykonuje się co 50 milisekund.