feat: Initial version that can draw a basic map

2024-07-31 23:01:33 +02:00
commit f037563699
2 changed files with 80 additions and 0 deletions
--- a/3
+++ b/3
@@ -0,0 +1,3 @@
+:2015
+encode zstd gzip
+file_server
--- a/index.html
+++ b/index.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Hex Builder</title>
+        <style>
+         body {
+             margin: 0;
+             background-color: #fffffe;
+         }
+
+         #game-canvas {
+             position: absolute;
+             width: 100%;
+             height: 100%;
+         }
+        </style>
+    </head>
+    <body>
+        <canvas id="game-canvas" width="800" height="600"></canvas>
+        <script>
+         const canvas = document.getElementById("game-canvas");
+         const ctx = canvas.getContext("2d");
+
+         const hex_radius = 30;
+         const hex_height = Math.sqrt(3) * hex_radius;
+
+         canvas.width = document.documentElement.clientWidth;
+         canvas.height = document.documentElement.clientHeight;
+
+         ctx.fillStyle = "rgb(200 200 255)";
+         ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+         const draw_half_hex = (center_x, center_y) => {
+             var x0 = center_x - hex_radius;
+             var y0 = center_y;
+             var x1 = x0 + hex_radius / 2;
+             var y1 = y0 - hex_height / 2;
+             var x2 = x1 + hex_radius;
+             var y2 = y1;
+             var x3 = center_x + hex_radius;
+             var y3 = center_y;
+
+             ctx.beginPath();
+             ctx.moveTo(x0, y0);
+             ctx.lineTo(x1, y1);
+             ctx.lineTo(x2, y2);
+             ctx.lineTo(x3, y3);
+             ctx.stroke();
+         };
+
+         const draw_grid = (pan_x, pan_y) => {
+             var x = 0;
+             var y = 0;
+             var line = 0;
+
+             ctx.strokeStyle = "rgb(255 255 255)";
+
+             while (y < canvas.height) {
+                 x = (line % 2 == 0) ? 0 : 1.5 * hex_radius;
+
+                 while (x < canvas.width) {
+                     draw_half_hex(x, y);
+
+                     x += 3 * hex_radius;
+                 }
+
+                 y += hex_height / 2;
+                 line += 1;
+             }
+
+             console.log("Grid done");
+         };
+
+         draw_grid(0, 0);
+        </script>
+    </body>
+</html>