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

Implemented the Click Handeling

Browse source 
Implemented Clicks effecting neigbours
This commit is contained in:
leopold 2020-01-09 16:11:08 +01:00
parent f73e65a7f4
commit 18805dfaac
3 changed files with 89 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -3,7 +3,8 @@
<script>
</script>
</head>
<body onload="bodyLoad()">
<body onload="bodyLoad()" style="text-align: center;background-color: #C8C850;">
<h1 style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">Knilch Out</h1>
<canvas
id="Game"
width="90vh"

38
main.js
View file

@ -35,12 +35,15 @@ function drawGrid(gridsize, grid, c, ctx) {
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.rect((i * c.width) / gridsize, (k * c.height) / gridsize, c.width / gridsize, c.height / gridsize);
}
}
ctx.stroke();
@ -60,6 +63,37 @@ function populateGrid(grid, gridsize) {
}
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);
@ -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);

59
main.ts
View file

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