gergely/hexbuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Initial version that can draw a basic map

Browse Source
This commit is contained in:
Gergely Polonkai 2024-07-31 23:01:33 +02:00
commit f037563699
2 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Caddyfile Normal file
View File

@ -0,0 +1,3 @@
:2015
encode zstd gzip
file_server

77
index.html Normal file
View File

@ -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>