Unlimited world

This commit is contained in:
2023-08-01 21:18:18 +02:00
parent 72f912d7a4
commit d3fe6ea993

View File

@@ -1,24 +1,3 @@
// 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");
@@ -27,14 +6,17 @@ window.addEventListener("load", () => {
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;
@@ -150,20 +132,12 @@ window.addEventListener("load", () => {
//}
// Punkte 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);
// }
//}
for (let y2 = 0; y2 < grid.length; y2 += 1)
{
for (let x2 = 0; x2 < grid[y2].length; x2 += 1)
{
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,10 +145,8 @@ 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);
@@ -186,48 +158,32 @@ window.addEventListener("load", () => {
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;
}
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);
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})`);
//});
@@ -248,7 +204,8 @@ window.addEventListener("load", () => {
// 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);
console.log("Values: " + x + " " + y )
saveSetArray(sparseWorld, y, x, 1);
startX = currentX;
startY = currentY;
@@ -260,7 +217,7 @@ window.addEventListener("load", () => {
});
// Grid beim Laden der Seite zeichnen
drawGrid(array);
drawGrid(sparseWorld);
});