diff --git a/index.html b/index.html index d52cef5..bc2f11e 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - + +

Knilch Out

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); @@ -67,7 +101,7 @@ function bodyLoad() { var c = document.getElementById("Game"); resizeCanvas(c); c.addEventListener("mousedown", function (e) { - drawPointOnCanvas(c, e, ctx); + handelClicks(c, e, gridsize, grid, ctx); }); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); diff --git a/main.ts b/main.ts index c600aa8..e692ed0 100644 --- a/main.ts +++ b/main.ts @@ -41,16 +41,26 @@ function drawGrid(gridsize: number, grid: boolean[][], c: HTMLCanvasElement, ctx for (var k: number = 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.rect( - (i * c.width) / gridsize, - (k * c.height) / gridsize, - c.width / gridsize, - c.height / gridsize - ); + + } @@ -73,6 +83,39 @@ function populateGrid (grid: boolean[][],gridsize):boolean[][]{ } return grid } +function togglebool(bool:boolean):boolean { + if (bool == true) { + return false + } + return true +} + +function handelClicks(c: HTMLCanvasElement,e: Event,gridsize: number,grid: boolean[][],ctx: CanvasRenderingContext2D){ + var pos = getCursorPositionOnCanvas(c,e) + for (var i: number = 0; i < gridsize; i++) { + for (var k: number = 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: number = 3; var grid : boolean[][] = initGrid(gridsize) @@ -82,9 +125,9 @@ function bodyLoad() { ) as HTMLCanvasElement; resizeCanvas(c); c.addEventListener("mousedown", function(e) { - drawPointOnCanvas(c, e, ctx); + handelClicks(c, e,gridsize,grid, ctx); }); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); drawGrid(gridsize,grid,c,ctx) -} +} \ No newline at end of file