mirror of
https://git.cluster.stumblestore.de/llamprecht/KnilchWeb.git
synced 2025-12-12 23:11:19 +01:00
Added win state
Added gridsize changing Added Edit mode
This commit is contained in:
parent
18805dfaac
commit
eaec137887
8 changed files with 386 additions and 225 deletions
22
built/index.html
Normal file
22
built/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<html>
|
||||
<head>
|
||||
<script>
|
||||
</script>
|
||||
</head>
|
||||
<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"
|
||||
height="90vh"
|
||||
style="border:1px solid #000000; margin-bottom: 1em;"
|
||||
></canvas> <br>
|
||||
<button onclick="changeGridsize(-1)">-</button>
|
||||
<button onclick="repopulateGrid()">Restart</button>
|
||||
<button onclick="changeGridsize(1)">+</button>
|
||||
<br>
|
||||
<button onclick="toggleEditMode()" id="edittoggle">Toggle Edit Mode</button>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
172
built/main.js
Normal file
172
built/main.js
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
var gridsize = 3;
|
||||
var grid = initGrid(gridsize);
|
||||
grid = populateGrid(grid, gridsize);
|
||||
var c = document.getElementById("Game");
|
||||
var knilchoff = new Image();
|
||||
var knilchon = new Image();
|
||||
var ctx = c.getContext("2d");
|
||||
var scoring = true;
|
||||
var turns = 0;
|
||||
var edit = false;
|
||||
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) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = event.clientX - rect.left;
|
||||
const y = event.clientY - rect.top;
|
||||
return { x, 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) * 80;
|
||||
canvas.height = (window.innerHeight / 100) * 80;
|
||||
}
|
||||
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.stroke();
|
||||
}
|
||||
function repopulateGrid() {
|
||||
grid = populateGrid(grid, gridsize);
|
||||
edit = false;
|
||||
turns = 0;
|
||||
scoring = true;
|
||||
drawGrid(gridsize, grid, c, ctx);
|
||||
var bt = document.getElementById("edittoggle");
|
||||
bt.style.color = "black";
|
||||
}
|
||||
function changeGridsize(amount) {
|
||||
gridsize += amount;
|
||||
grid = initGrid(gridsize);
|
||||
grid = populateGrid(grid, gridsize);
|
||||
drawGrid(gridsize, grid, c, ctx);
|
||||
}
|
||||
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 (edit == false) {
|
||||
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);
|
||||
if (scoring == true) {
|
||||
turns++;
|
||||
var none = false;
|
||||
var all = false;
|
||||
if (grid[0][0] == false) {
|
||||
none = true;
|
||||
}
|
||||
else {
|
||||
all = true;
|
||||
}
|
||||
for (i = 0; i < gridsize; i++) {
|
||||
for (k = 0; k < gridsize; k++) {
|
||||
if (grid[i][k] == false) {
|
||||
all = false;
|
||||
}
|
||||
else {
|
||||
none = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (all == true || none == true) {
|
||||
Winscreen(c, ctx);
|
||||
console.log(`Won took ${turns} to win.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
function Winscreen(c, ctx) {
|
||||
ctx.fillStyle = "#fffff";
|
||||
ctx.font;
|
||||
ctx.fillText(`You won it took ${turns} Turns.`, 30, c.height / 2, c.width - 30);
|
||||
}
|
||||
function toggleEditMode() {
|
||||
edit = togglebool(edit);
|
||||
scoring = false;
|
||||
var bt = document.getElementById("edittoggle");
|
||||
if (edit == true) {
|
||||
bt.style.color = "red";
|
||||
}
|
||||
else {
|
||||
bt.style.color = "blue";
|
||||
}
|
||||
}
|
||||
function bodyLoad() {
|
||||
resizeCanvas(c);
|
||||
c.addEventListener("mousedown", function (e) {
|
||||
handelClicks(c, e, gridsize, grid, ctx);
|
||||
});
|
||||
knilchon.src = "knilch.png";
|
||||
knilchon.onload = (e) => {
|
||||
knilchoff.src = "knilchoff.png";
|
||||
knilchoff.onload = (e) => {
|
||||
ctx.moveTo(0, 0);
|
||||
drawGrid(gridsize, grid, c, ctx);
|
||||
};
|
||||
};
|
||||
}
|
||||
17
index.html
17
index.html
|
|
@ -1,17 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<script>
|
||||
</script>
|
||||
</head>
|
||||
<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"
|
||||
height="90vh"
|
||||
style="border:1px solid #000000;"
|
||||
></canvas>
|
||||
<img>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
109
main.js
109
main.js
|
|
@ -1,109 +0,0 @@
|
|||
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);
|
||||
}
|
||||
283
main.ts
283
main.ts
|
|
@ -1,12 +1,23 @@
|
|||
var gridsize: number = 3;
|
||||
var grid: boolean[][] = initGrid(gridsize);
|
||||
grid = populateGrid(grid, gridsize);
|
||||
var c: HTMLCanvasElement = document.getElementById("Game") as HTMLCanvasElement;
|
||||
var knilchoff: HTMLImageElement = new Image();
|
||||
var knilchon: HTMLImageElement = new Image();
|
||||
var ctx = c.getContext("2d");
|
||||
var scoring: boolean = true;
|
||||
var turns: number = 0;
|
||||
var edit: boolean = false;
|
||||
|
||||
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
|
||||
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);
|
||||
|
|
@ -27,107 +38,181 @@ function drawPointOnCanvas(
|
|||
ctx.stroke();
|
||||
}
|
||||
function resizeCanvas(canvas: HTMLCanvasElement) {
|
||||
canvas.width = (window.innerHeight / 100) * 90;
|
||||
canvas.height = (window.innerHeight / 100) * 90;
|
||||
canvas.width = (window.innerHeight / 100) * 80;
|
||||
canvas.height = (window.innerHeight / 100) * 80;
|
||||
}
|
||||
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.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 drawGrid(
|
||||
gridsize: number,
|
||||
grid: boolean[][],
|
||||
c: HTMLCanvasElement,
|
||||
ctx: CanvasRenderingContext2D
|
||||
) {
|
||||
for (var i: number = 0; i < gridsize; i++) {
|
||||
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.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 togglebool(bool:boolean):boolean {
|
||||
if (bool == true) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
function repopulateGrid() {
|
||||
grid = populateGrid(grid, gridsize);
|
||||
edit = false
|
||||
turns = 0;
|
||||
scoring = true;
|
||||
drawGrid(gridsize, grid, c, ctx);
|
||||
var bt = document.getElementById("edittoggle")
|
||||
bt.style.color = "black"
|
||||
}
|
||||
|
||||
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 changeGridsize(amount: number) {
|
||||
gridsize += amount;
|
||||
grid = initGrid(gridsize);
|
||||
grid = populateGrid(grid, gridsize);
|
||||
drawGrid(gridsize, grid, c, ctx);
|
||||
}
|
||||
|
||||
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 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 (edit == false) {
|
||||
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);
|
||||
if (scoring == true) {
|
||||
turns++;
|
||||
var none: boolean = false;
|
||||
var all: boolean = false;
|
||||
if (grid[0][0] == false) {
|
||||
none = true;
|
||||
} else {
|
||||
all = true;
|
||||
}
|
||||
for (i = 0; i < gridsize; i++) {
|
||||
for (k = 0; k < gridsize; k++) {
|
||||
if (grid[i][k] == false) {
|
||||
all = false;
|
||||
} else {
|
||||
none = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (all == true || none == true) {
|
||||
Winscreen(c,ctx)
|
||||
console.log(`Won took ${turns} to win.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Winscreen(c: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
|
||||
ctx.fillStyle = "#fffff"
|
||||
ctx.font
|
||||
ctx.fillText(`You won it took ${turns} Turns.`,30,c.height/2,c.width-30)
|
||||
}
|
||||
function toggleEditMode(){
|
||||
edit = togglebool(edit)
|
||||
scoring = false
|
||||
var bt = document.getElementById("edittoggle")
|
||||
if (edit == true) {
|
||||
bt.style.color = "red"
|
||||
} else {
|
||||
bt.style.color = "blue"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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) {
|
||||
handelClicks(c, e,gridsize,grid, ctx);
|
||||
handelClicks(c, e, gridsize, grid, ctx);
|
||||
});
|
||||
var ctx = c.getContext("2d");
|
||||
ctx.moveTo(0, 0);
|
||||
drawGrid(gridsize,grid,c,ctx)
|
||||
}
|
||||
|
||||
knilchon.src = "knilch.png";
|
||||
knilchon.onload = (e: Event) => {
|
||||
knilchoff.src = "knilchoff.png";
|
||||
knilchoff.onload = (e: Event) => {
|
||||
ctx.moveTo(0, 0);
|
||||
drawGrid(gridsize, grid, c, ctx);
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
|
|||
8
tsconfig.json
Normal file
8
tsconfig.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES6",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"outDir": "./built"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue