Format

script.js

@@ -7,7 +7,7 @@ window.addEventListener("load", () => {
     canvas.height = window.innerHeight;
 
     // Punktabstand für das Grid
-    const spacing = 32;
+    const spacing = 16;
 
     let sparseWorld = {};
 
@@ -180,12 +180,12 @@ window.addEventListener("load", () => {
         drawGrid(sparseWorld);
     });
 
-    //window.addEventListener("click", (event) => {
-    //    const x = Math.round(event.clientX / spacing);
-    //    const y = Math.round(event.clientY / spacing);
-    //    saveSetArray(y,x, 1);
-    //    console.log(`Koordinaten: (${x}, ${y})`);
-    //});
+    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;
@@ -204,7 +204,7 @@ 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);
-            console.log("Values: " + x + " " + y )
+            console.log("Values: " + x + " " + y)
             saveSetArray(sparseWorld, y, x, 1);
 
             startX = currentX;
@@ -216,6 +216,33 @@ window.addEventListener("load", () => {
         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);
 });