commit f73e65a7f4562a8214ee80d1c1a12303f06f16ca Author: leopold Date: Thu Jan 9 13:30:25 2020 +0100 Initial Commit Grid Initialisation Grid Visualisation Grid Population diff --git a/index.html b/index.html new file mode 100644 index 0000000..d52cef5 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + +

+ + + + diff --git a/knilch.png b/knilch.png new file mode 100644 index 0000000..5099c5a Binary files /dev/null and b/knilch.png differ diff --git a/knilchoff.png b/knilchoff.png new file mode 100644 index 0000000..52d026d Binary files /dev/null and b/knilchoff.png differ diff --git a/main.js b/main.js new file mode 100644 index 0000000..2b034db --- /dev/null +++ b/main.js @@ -0,0 +1,75 @@ +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.drawImage(knilchon, (i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize); + } + else { + 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); + } + } + 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 bodyLoad() { + var gridsize = 3; + var grid = initGrid(gridsize); + grid = populateGrid(grid, gridsize); + var c = document.getElementById("Game"); + resizeCanvas(c); + c.addEventListener("mousedown", function (e) { + drawPointOnCanvas(c, e, ctx); + }); + var ctx = c.getContext("2d"); + ctx.moveTo(0, 0); + drawGrid(gridsize, grid, c, ctx); +} diff --git a/main.ts b/main.ts new file mode 100644 index 0000000..c600aa8 --- /dev/null +++ b/main.ts @@ -0,0 +1,90 @@ +function initGrid(gridsize: number): boolean[][] { + var grid: Array> = 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: HTMLCanvasElement, event: any) { + const rect = canvas.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + return { x, y }; +} +function drawPointOnCanvas( + canvas: HTMLCanvasElement, + event: any, + ctx: CanvasRenderingContext2D +) { + var pos = getCursorPositionOnCanvas(canvas, event); + ctx.moveTo(pos.x, pos.y); + ctx.lineTo(pos.x + 1, pos.y + 1); + ctx.stroke(); +} +function resizeCanvas(canvas: HTMLCanvasElement) { + canvas.width = (window.innerHeight / 100) * 90; + canvas.height = (window.innerHeight / 100) * 90; +} +function drawGrid(gridsize: number, grid: boolean[][], c: HTMLCanvasElement, ctx: CanvasRenderingContext2D){ + var knilchon : HTMLImageElement = new Image() + knilchon.src = 'knilch.png' + knilchon.onload = (e: Event) => { + var knilchoff : HTMLImageElement = new Image() + knilchoff.src = 'knilchoff.png' + knilchoff.onload = (e: Event) => { + for (var i: number = 0; i <= gridsize; i++) { + for (var k: number = 0; k <= gridsize; k++) { + + if (grid[i][k] == true) { + ctx.drawImage(knilchon,(i * c.width) / gridsize,(k * c.height) / gridsize,c.width / gridsize,c.height / gridsize); + } else { + 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 + ); + + + } + } + ctx.stroke(); + } + } + +} + +function populateGrid (grid: boolean[][],gridsize):boolean[][]{ + for (var i: number = 0; i < gridsize; i++) { + for (var k: number = 0; k < gridsize; k++) { + if (Math.random() > 0.5) { + grid[i][k] = true + } else { + grid[i][k] = false + } + } + } + return grid +} +function bodyLoad() { + var gridsize: number = 3; + var grid : boolean[][] = initGrid(gridsize) + grid = populateGrid(grid, gridsize) + var c: HTMLCanvasElement = document.getElementById( + "Game" + ) as HTMLCanvasElement; + resizeCanvas(c); + c.addEventListener("mousedown", function(e) { + drawPointOnCanvas(c, e, ctx); + }); + var ctx = c.getContext("2d"); + ctx.moveTo(0, 0); + drawGrid(gridsize,grid,c,ctx) +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..e69de29