251 lines
8.2 KiB
JavaScript
251 lines
8.2 KiB
JavaScript
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) {
|
|
// Code = BL BR TR TL
|
|
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);
|
|
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);
|
|
break;
|
|
case "0111":
|
|
case "1000":
|
|
var startX = x;
|
|
var startY = y + spacing * 0.5;
|
|
var endX = x + spacing * 0.5;
|
|
var endY = y + spacing;
|
|
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);
|
|
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);
|
|
break;
|
|
case "1101":
|
|
case "0010":
|
|
var startX = x + spacing * 0.5;
|
|
var startY = y;
|
|
var endX = x + spacing;
|
|
var endY = y + spacing * 0.5;
|
|
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);
|
|
break;
|
|
case "1110":
|
|
case "0001":
|
|
var startX = x;
|
|
var startY = y + spacing * 0.5;
|
|
var endX = x + spacing * 0.5;
|
|
var endY = y;
|
|
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);
|
|
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);
|
|
|
|
break;
|
|
case "0000":
|
|
case "1111":
|
|
default: return;
|
|
}
|
|
}
|
|
|
|
function drawPoint(ctx, x, y, color = "#000", size = 1) {
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(x, y, size, size);
|
|
}
|
|
|
|
function drawGrid(grid) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
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
|
|
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 (saveAccessArray(grid, y2, x2) === 1) {
|
|
color = "#FF0000"
|
|
}
|
|
drawPoint(ctx, x2 * spacing, y2 * spacing, color, 2);
|
|
}
|
|
}
|
|
|
|
ctx.beginPath();
|
|
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 code = "" + bl + "" + br + "" + tr + "" + tl;
|
|
drawCell(ctx, x2 * spacing, y2 * spacing, spacing, code)
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
function saveAccessArray(sparseWorld, indexA, indexB) {
|
|
var accesor = "X" + indexA + "Y" + indexB;
|
|
var ret = sparseWorld[accesor];
|
|
if (ret === undefined) {
|
|
return 0;
|
|
}
|
|
return 1;
|
|
}
|
|
|
|
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(sparseWorld);
|
|
});
|
|
|
|
window.addEventListener("click", (event) => {
|
|
const x = Math.round(event.clientX / spacing);
|
|
const y = Math.round(event.clientY / spacing);
|
|
saveSetArray(sparseWorld, y, x, 1);
|
|
console.log(`Koordinaten: (${x}, ${y})`);
|
|
});
|
|
|
|
canvas.addEventListener("mousedown", (event) => {
|
|
isDragging = true;
|
|
startX = event.clientX;
|
|
startY = event.clientY;
|
|
});
|
|
|
|
canvas.addEventListener("mousemove", (event) => {
|
|
if (isDragging) {
|
|
const currentX = event.clientX;
|
|
const currentY = event.clientY;
|
|
|
|
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);
|
|
console.log("Values: " + x + " " + y)
|
|
saveSetArray(sparseWorld, y, x, 1);
|
|
|
|
startX = currentX;
|
|
startY = currentY;
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener("mouseup", () => {
|
|
isDragging = false;
|
|
});
|
|
|
|
canvas.addEventListener("mouseout", () => {
|
|
isDragging = false;
|
|
});
|
|
|
|
// Event Listener für das touchstart Event (Finger auf den Bildschirm legen)
|
|
canvas.addEventListener("touchstart", (event) => {
|
|
event.preventDefault(); // Verhindert Standardverhalten (z. B. Scrollen der Seite)
|
|
canvas.focus(); // Setzt den Fokus auf das Canvas
|
|
});
|
|
|
|
// Event Listener für das touchmove Event (Finger bewegen)
|
|
canvas.addEventListener("touchmove", (event) => {
|
|
event.preventDefault(); // Verhindert Standardverhalten (z. B. Scrollen der Seite)
|
|
|
|
const touch = event.touches[0]; // Erste Berührung (1 Finger)
|
|
const currentX = touch.clientX;
|
|
const currentY = touch.clientY;
|
|
|
|
// 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);
|
|
|
|
// Verarbeite die Koordinaten hier (z. B. zeichne etwas im Canvas)
|
|
});
|
|
|
|
// Grid beim Laden der Seite zeichnen
|
|
drawGrid(sparseWorld);
|
|
});
|
|
|
|
|