llamprecht/KnilchWeb
1
0
Fork 0
mirror of https://git.cluster.stumblestore.de/llamprecht/KnilchWeb.git synced 2025-12-15 00:51:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial Commit

Browse source 
Grid Initialisation
Grid Visualisation
Grid Population
This commit is contained in:
leopold 2020-01-09 13:30:25 +01:00
commit f73e65a7f4
6 changed files with 181 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html Normal file
View file

@ -0,0 +1,16 @@
<html>
<head>
<script>
</script>
</head>
<body onload="bodyLoad()">
<canvas
id="Game"
width="90vh"
height="90vh"
style="border:1px solid #000000;"
></canvas>
<img>
<script src="main.js"></script>
</body>
</html>

BIN
knilch.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
knilchoff.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

75
main.js Normal file
View file

@ -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);
}

90
main.ts Normal file
View file

@ -0,0 +1,90 @@
function initGrid(gridsize: number): boolean[][] {
var grid: Array<Array<boolean>> = 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)
}

0
readme.md Normal file
View file