add grid

2024-09-23 23:40:31 +02:00 · 2024-09-23 23:40:31 +02:00 · cbae0a0d41
commit cbae0a0d41
parent 8c9ad7fdc3
2 changed files with 103 additions and 0 deletions
--- a/grid.html
+++ b/grid.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
+    <canvas id="canvas" width="800" height="600"></canvas>
+</body>
+<script src="grid.js"></script>
+</html>
--- a/grid.js
+++ b/grid.js
@ -0,0 +1,91 @@
+const cellSize = 150;
+const size = cellSize * 3;
+const margin = 10;
+
+let ctx = undefined;
+let initialPos = undefined;
+let circle = true;
+
+function resizeCanvas() {
+    ctx.canvas.width  = window.innerWidth;
+    ctx.canvas.height = window.innerHeight;
+}
+
+function drawGrid() {
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 5;
+    
+    for (let x = 1; x < 3; ++x) {
+        ctx.moveTo(initialPos.x + x * cellSize, 0 + initialPos.y);
+        ctx.lineTo(initialPos.x + x * cellSize, initialPos.y + size);
+    }
+
+    for (let y = 1; y < 3; ++y) {
+        ctx.moveTo(initialPos.x + 0, initialPos.y + y * cellSize);
+        ctx.lineTo(initialPos.x + size, initialPos.y + y * cellSize);
+    }
+
+    ctx.stroke();
+}
+
+
+function drawCircle(x, y) {
+  ctx.beginPath();
+  // arc(x, y, radius, startAngle, endAngle)
+  ctx.arc(x, y, 50, 0, Math.PI * 2);
+  ctx.stroke();
+}
+
+function drawCross(x, y) {
+    startPoint = { x: x-50, y: y-50 };
+    ctx.beginPath();
+    ctx.moveTo(startPoint.x, startPoint.y);
+    ctx.lineTo(startPoint.x + 100, startPoint.y + 100);
+    ctx.moveTo(startPoint.x + 100, startPoint.y);
+    ctx.lineTo(startPoint.x, startPoint.y + 100);
+    ctx.stroke();
+}
+
+function init() {
+    const canvas = document.getElementById("canvas");
+    if (canvas.getContext) {
+        ctx = canvas.getContext("2d");
+        resizeCanvas(ctx); // Init canvas
+        ctx.fillStyle = "red";
+
+        initialPos = { 
+            x: ctx.canvas.width / 2 - size / 2,
+            y: ctx.canvas.height / 2 - size / 2
+        };
+
+        ctx.fillRect(initialPos.x, initialPos.y, 5, 5); // origin of grid
+
+        canvas.addEventListener("click", (evt) => {
+            const {clientX, clientY} = evt;
+            // Coord relative to origin of the grid (initialPos)
+            const pt = { x: clientX - initialPos.x, y: clientY - initialPos.y };
+            const gridIndex = {
+                x: Math.floor(3 * pt.x / size),
+                y: Math.floor(3 * pt.y / size)
+            };
+            if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
+                ctx.fillStyle = "blue";
+                const center = {
+                    x: initialPos.x + gridIndex.x * cellSize + cellSize/2,
+                    y: initialPos.y + gridIndex.y * cellSize + cellSize/2
+                };
+                if (circle) drawCircle(center.x, center.y);
+                else drawCross(center.x, center.y);
+                circle = !circle;
+            }
+        });
+
+        //window.addEventListener('resize', () => resizeCanvas(ctx));
+        //window.requestAnimationFrame(time => update(ctx, time))
+        
+        drawGrid(ctx);
+    }
+}
+
+init();
+