From cbae0a0d413eeda47f35e1b6f2e8844cb8782de3 Mon Sep 17 00:00:00 2001 From: Thibaud Date: Mon, 23 Sep 2024 23:40:31 +0200 Subject: [PATCH] add grid --- grid.html | 12 ++++++++ grid.js | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+) create mode 100644 grid.html create mode 100644 grid.js diff --git a/grid.html b/grid.html new file mode 100644 index 0000000..0eb8684 --- /dev/null +++ b/grid.html @@ -0,0 +1,12 @@ + + + + + + Document + + + + + + diff --git a/grid.js b/grid.js new file mode 100644 index 0000000..c94c2d3 --- /dev/null +++ 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(); +