From d3fe6ea993a4d2f1d61a19996054442b96286cf4 Mon Sep 17 00:00:00 2001 From: Gulum Date: Tue, 1 Aug 2023 21:18:18 +0200 Subject: [PATCH] Unlimited world --- script.js | 231 ++++++++++++++++++++++-------------------------------- 1 file changed, 94 insertions(+), 137 deletions(-) diff --git a/script.js b/script.js index 80ec49b..48a4d6b 100644 --- a/script.js +++ b/script.js @@ -1,56 +1,38 @@ -// Punktabstand für das Grid -const spacing = 32; - -let array = []; -array.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); -array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); - - window.addEventListener("load", () => { const canvas = document.getElementById("gridCanvas"); const ctx = canvas.getContext("2d"); - + // Canvas-Größe anpassen canvas.width = window.innerWidth; canvas.height = window.innerHeight; + // Punktabstand für das Grid + const spacing = 32; + + let sparseWorld = {}; + let isDragging = false; let startX, startY; - - function drawCell(ctx, x, y, spacing, code) - { + + function drawCell(ctx, x, y, spacing, code) { // Code = BL BR TR TL - switch(code) - { + switch (code) { case "1011": case "0100": var startX = x + spacing * 0.5; var startY = y + spacing; var endX = x + spacing; var endY = y + spacing * 0.5; - ctx.moveTo(startX,startY); - ctx.lineTo(endX,endY); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); break; case "1100": var startX = x; var startY = y + spacing * 0.5; var endX = x + spacing; var endY = y + spacing * 0.5; - ctx.moveTo(startX,startY); - ctx.lineTo(endX,endY); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); break; case "0111": case "1000": @@ -58,24 +40,24 @@ window.addEventListener("load", () => { var startY = y + spacing * 0.5; var endX = x + spacing * 0.5; var endY = y + spacing; - ctx.moveTo(startX,startY); - ctx.lineTo(endX,endY); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); break; case "0110": var startX = x + spacing * 0.5; var startY = y; var endX = x + spacing * 0.5; var endY = y + spacing; - ctx.moveTo(startX,startY); - ctx.lineTo(endX,endY); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); break; case "1001": var startX = x + spacing * 0.5; var startY = y; var endX = x + spacing * 0.5; var endY = y + spacing; - ctx.moveTo(startX,startY); - ctx.lineTo(endX,endY); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); break; case "1101": case "0010": @@ -83,16 +65,16 @@ window.addEventListener("load", () => { var startY = y; var endX = x + spacing; var endY = y + spacing * 0.5; - ctx.moveTo(startX,startY); - ctx.lineTo(endX,endY); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); break; case "0011": var startX = x; var startY = y + spacing * 0.5; var endX = x + spacing; var endY = y + spacing * 0.5; - ctx.moveTo(startX,startY); - ctx.lineTo(endX,endY); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); break; case "1110": case "0001": @@ -100,20 +82,20 @@ window.addEventListener("load", () => { var startY = y + spacing * 0.5; var endX = x + spacing * 0.5; var endY = y; - ctx.moveTo(startX,startY); - ctx.lineTo(endX,endY); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); break; case "0101": - ctx.moveTo(x,y + spacing * 0.5); - ctx.lineTo(x + spacing * 0.5,y); - ctx.moveTo(x + spacing * 0.5,y + spacing); - ctx.lineTo(x+ spacing,y+spacing*0.5); + ctx.moveTo(x, y + spacing * 0.5); + ctx.lineTo(x + spacing * 0.5, y); + ctx.moveTo(x + spacing * 0.5, y + spacing); + ctx.lineTo(x + spacing, y + spacing * 0.5); break; case "1010": - ctx.moveTo(x,y + spacing * 0.5); - ctx.lineTo(x + spacing * 0.5,y+spacing); - ctx.moveTo(x + spacing * 0.5,y); - ctx.lineTo(x + spacing, y+spacing*0.5); + ctx.moveTo(x, y + spacing * 0.5); + ctx.lineTo(x + spacing * 0.5, y + spacing); + ctx.moveTo(x + spacing * 0.5, y); + ctx.lineTo(x + spacing, y + spacing * 0.5); break; case "0000": @@ -128,42 +110,34 @@ window.addEventListener("load", () => { } function drawGrid(grid) { - ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.strokeStyle = "#888"; - ctx.lineWidth = 1; + ctx.strokeStyle = "#888"; + ctx.lineWidth = 1; - // Vertikale Linien zeichnen - //for (let x = spacing; x < canvas.width; x += spacing) { - // ctx.beginPath(); - // ctx.moveTo(x, 0); - // ctx.lineTo(x, canvas.height); - // ctx.stroke(); - //} - - // Horizontale Linien zeichnen - //for (let y = spacing; y < canvas.height; y += spacing) { - // ctx.beginPath(); - // ctx.moveTo(0, y); - // ctx.lineTo(canvas.width, y); - // ctx.stroke(); - //} - - // Punkte zeichnen + // Vertikale Linien zeichnen //for (let x = spacing; x < canvas.width; x += spacing) { - // for (let y = spacing; y < canvas.height; y += spacing) { - // drawPoint(ctx, x, y, "#000", 2); - // } + // ctx.beginPath(); + // ctx.moveTo(x, 0); + // ctx.lineTo(x, canvas.height); + // ctx.stroke(); //} + // Horizontale Linien zeichnen + //for (let y = spacing; y < canvas.height; y += spacing) { + // ctx.beginPath(); + // ctx.moveTo(0, y); + // ctx.lineTo(canvas.width, y); + // ctx.stroke(); + //} - for (let y2 = 0; y2 < grid.length; y2 += 1) - { - for (let x2 = 0; x2 < grid[y2].length; x2 += 1) - { + // Punkte zeichnen + var maxWidth = Math.floor(canvas.width / spacing); + var maxHeight = Math.floor(canvas.height / spacing); + for (let y2 = 0; y2 < maxHeight; y2 += 1) { + for (let x2 = 0; x2 < maxWidth; x2 += 1) { var color = "#000"; - if(grid[y2][x2]) - { + if (saveAccessArray(grid, y2, x2) === 1) { color = "#FF0000" } drawPoint(ctx, x2 * spacing, y2 * spacing, color, 2); @@ -171,96 +145,79 @@ window.addEventListener("load", () => { } ctx.beginPath(); - for (let y2 = 0; y2 < grid.length; y2 += 1) - { - for (let x2 = 0; x2 < grid[y2].length; x2 += 1) - { + for (let y2 = 0; y2 < maxHeight; y2 += 1) { + for (let x2 = 0; x2 < maxWidth; x2 += 1) { var tl = saveAccessArray(grid, y2, x2); - var tr = saveAccessArray(grid,y2,x2+1); - var bl = saveAccessArray(grid,y2+1,x2); - var br = saveAccessArray(grid,y2 + 1,x2+1); + var tr = saveAccessArray(grid, y2, x2 + 1); + var bl = saveAccessArray(grid, y2 + 1, x2); + var br = saveAccessArray(grid, y2 + 1, x2 + 1); var code = "" + bl + "" + br + "" + tr + "" + tl; - drawCell(ctx,x2 * spacing,y2 * spacing,spacing,code) + drawCell(ctx, x2 * spacing, y2 * spacing, spacing, code) } } ctx.stroke(); } - function saveAccessArray(array, indexA, indexB) - { - if(indexA >= array.length|| indexA < 0) - { + function saveAccessArray(sparseWorld, indexA, indexB) { + var accesor = "X" + indexA + "Y" + indexB; + var ret = sparseWorld[accesor]; + if (ret === undefined) { return 0; } - if(indexB >= array[indexA].length || indexB < 0) - { - return 0; - } - if(array[indexA][indexB]) - { - return 1; - } - return 0; + return 1; } - function saveSetArray(array, indexA, indexB, value) - { - if(indexA >= array.length|| indexA < 0) - { - return; - } - if(indexB >= array[indexA].length || indexB < 0) - { - return; - } - array[indexA][indexB] = value; - drawGrid(array); + function saveSetArray(sparseWorld, indexA, indexB, value) { + var accesor = "X" + indexA + "Y" + indexB; + sparseWorld[accesor] = value; + drawGrid(sparseWorld); } // Bei Größenänderungen des Fensters das Grid neu zeichnen window.addEventListener("resize", () => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - drawGrid(array); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + drawGrid(sparseWorld); }); //window.addEventListener("click", (event) => { // const x = Math.round(event.clientX / spacing); // const y = Math.round(event.clientY / spacing); - // saveSetArray(array, y,x, 1); + // saveSetArray(y,x, 1); // console.log(`Koordinaten: (${x}, ${y})`); //}); canvas.addEventListener("mousedown", (event) => { - isDragging = true; - startX = event.clientX; - startY = event.clientY; + isDragging = true; + startX = event.clientX; + startY = event.clientY; }); canvas.addEventListener("mousemove", (event) => { - if (isDragging) { - const currentX = event.clientX; - const currentY = event.clientY; + if (isDragging) { + const currentX = event.clientX; + const currentY = event.clientY; - const deltaX = currentX - startX; - const deltaY = currentY - startY; + const deltaX = currentX - startX; + const deltaY = currentY - startY; - // Verarbeite das Dragging hier (z. B. zeichne etwas in Canvas) - const x = Math.round(currentX / spacing); - const y = Math.round(currentY / spacing); - saveSetArray(array, y,x, 1); - - startX = currentX; - startY = currentY; - } + // Verarbeite das Dragging hier (z. B. zeichne etwas in Canvas) + const x = Math.round(currentX / spacing); + const y = Math.round(currentY / spacing); + console.log("Values: " + x + " " + y ) + saveSetArray(sparseWorld, y, x, 1); + + startX = currentX; + startY = currentY; + } }); canvas.addEventListener("mouseup", () => { - isDragging = false; + isDragging = false; }); - + // Grid beim Laden der Seite zeichnen - drawGrid(array); - }); + drawGrid(sparseWorld); +});