Question

所以最近我开始学习javascript，作为我的第一个项目的一部分，我想在画布上创建可点击的网格。

JS

   var c = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gridWidth = 64;
var gridHeight = 64;
var cellWidth = 5;

canvas.width = gridWidth * cellWidth;
canvas.height = gridHeight * cellWidth;
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;

var livingCellPercent = 30
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 > livingCellPercent) {
            grid[i][j] = 1;
        }
    }
}


function drawOnload() {
    ctx.fillStyle = '#f4f4f2';
    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);
            ctx.strokeStyle = "#999";
            ctx.lineWidth = 0.4;
            ctx.stroke();
        }
    }
}
drawOnload();

//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 gol() {
    for (var i = 1; i < gridWidth - 1; i++) {
        for (var j = 1; j < gridHeight - 1; 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;
}


// game update
function update(dt) {

    gol();
    draw();
}


function draw() {
    ctx.fillStyle = '#f4f4f2';
    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.strokeStyle = "#999";
                ctx.fillStyle = "#40ff00";
                ctx.fill();
                ctx.stroke();
            } else {
                ctx.strokeStyle = "#999";
                ctx.stroke();
            }
        }
    }

}


var lastTime;
var t;

function gameLoop() {
    var now = Date.now();
    var dt = (now - lastTime) / 1000.0;
    update(dt);
    lastTime = now;
    t = setTimeout(gameLoop, 50);
};


document.getElementById('startGame').addEventListener('click', gameLoop);

function stop() {
    if (t) {
        clearTimeout(t);
        t = 0;
    }
}
document.getElementById('clear').addEventListener('click', stop);

function clearGrid() {
    window.location.reload();
}
document.getElementById('clearGrid').addEventListener('click', clearGrid);

HTML：

<body>
    <canvas id="canvas"></canvas>
    <button id="startGame">Start!</button>
    <button id="clear">Pause</button>
    <button id="clearGrid">New game</button>
    <button id="glider">g</button>
    <script src="game.js" type="text/javascript"></script>


</body>

并且每个单元格的值都为0或1，但我真的不知道如何使每个单元格可点击，我想更改以前的点击值。我知道这是一个微不足道的问题，但是自从我几天前开始学习javascript以来，我从早上就开始苦苦思索。任何帮助赞赏。

使用javascript创建可点击的网格

0 个答案: