KnilchWeb/main.js

function initGrid(gridsize) {
    var grid = new Array(gridsize);
    for (var i = 0; i < gridsize; i++) {
        grid[i] = new Array(gridsize);
        for (var k = 0; k < gridsize; k++) {
            grid[i][k] = false;
        }
    }
    return grid;
}
//ctx.rect(0,0,c.width/gridsize, c.height/gridsize);
function getCursorPositionOnCanvas(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    return { x: x, y: y };
}
function drawPointOnCanvas(canvas, event, ctx) {
    var pos = getCursorPositionOnCanvas(canvas, event);
    ctx.moveTo(pos.x, pos.y);
    ctx.lineTo(pos.x + 1, pos.y + 1);
    ctx.stroke();
}
function resizeCanvas(canvas) {
    canvas.width = (window.innerHeight / 100) * 90;
    canvas.height = (window.innerHeight / 100) * 90;
}
function drawGrid(gridsize, grid, c, ctx) {
    var knilchon = new Image();
    knilchon.src = 'knilch.png';
    knilchon.onload = function (e) {
        var knilchoff = new Image();
        knilchoff.src = 'knilchoff.png';
        knilchoff.onload = function (e) {
            for (var i = 0; i <= gridsize; i++) {
                for (var k = 0; k <= gridsize; k++) {
                    if (grid[i][k] == true) {
                        ctx.fillStyle = "#50C88C";
                        ctx.fillRect((i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
                        ctx.drawImage(knilchon, (i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
                    }
                    else {
                        ctx.fillStyle = "#C85050";
                        ctx.fillRect((i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
                        ctx.drawImage(knilchoff, (i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
                    }
                }
            }
            ctx.stroke();
        };
    };
}
function populateGrid(grid, gridsize) {
    for (var i = 0; i < gridsize; i++) {
        for (var k = 0; k < gridsize; k++) {
            if (Math.random() > 0.5) {
                grid[i][k] = true;
            }
            else {
                grid[i][k] = false;
            }
        }
    }
    return grid;
}
function togglebool(bool) {
    if (bool == true) {
        return false;
    }
    return true;
}
function handelClicks(c, e, gridsize, grid, ctx) {
    var pos = getCursorPositionOnCanvas(c, e);
    for (var i = 0; i < gridsize; i++) {
        for (var k = 0; k < gridsize; k++) {
            if (pos.x > i * c.width / gridsize && pos.x < i * c.width / gridsize + c.width / gridsize) {
                if (pos.y > k * c.height / gridsize && pos.y < k * c.height / gridsize + c.width / gridsize) {
                    grid[i][k] = togglebool(grid[i][k]);
                    if (i != 0) {
                        grid[i - 1][k] = togglebool(grid[i - 1][k]);
                    }
                    if (k != 0) {
                        grid[i][k - 1] = togglebool(grid[i][k - 1]);
                    }
                    if (i != gridsize - 1) {
                        grid[i + 1][k] = togglebool(grid[i + 1][k]);
                    }
                    if (k != gridsize - 1) {
                        grid[i][k + 1] = togglebool(grid[i][k + 1]);
                    }
                }
            }
        }
    }
    drawGrid(gridsize, grid, c, ctx);
}
function bodyLoad() {
    var gridsize = 3;
    var grid = initGrid(gridsize);
    grid = populateGrid(grid, gridsize);
    var c = document.getElementById("Game");
    resizeCanvas(c);
    c.addEventListener("mousedown", function (e) {
        handelClicks(c, e, gridsize, grid, ctx);
    });
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    drawGrid(gridsize, grid, c, ctx);
}