diff options
author | elioat <elioat@tilde.institute> | 2024-12-24 19:23:16 -0500 |
---|---|---|
committer | elioat <elioat@tilde.institute> | 2024-12-24 19:23:16 -0500 |
commit | c14408c56bdae4977392c0a4c94482fecf50e80a (patch) | |
tree | 78563fa391ac17cf6ec47361c15a4a72863c4c39 | |
parent | c462a88804170227c9eec9a75ce554dbbd59d84f (diff) | |
download | tour-c14408c56bdae4977392c0a4c94482fecf50e80a.tar.gz |
*
-rw-r--r-- | js/pixel-art/pixel/app.js | 20 |
1 files changed, 18 insertions, 2 deletions
diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js index 3e37db8..d3a0d28 100644 --- a/js/pixel-art/pixel/app.js +++ b/js/pixel-art/pixel/app.js @@ -68,9 +68,25 @@ function drawGrid() { ctx.strokeStyle = '#888888'; for (let x = 0; x < gridWidth; x++) { for (let y = 0; y < gridHeight; y++) { + const cellX = x * cellSize + offsetX; + const cellY = y * cellSize + offsetY; + + // Fill cell background ctx.fillStyle = grid[x][y] || '#f7f7f7'; - ctx.fillRect(x * cellSize + offsetX, y * cellSize + offsetY, cellSize, cellSize); - ctx.strokeRect(x * cellSize + offsetX, y * cellSize + offsetY, cellSize, cellSize); + ctx.fillRect(cellX, cellY, cellSize, cellSize); + + // Draw cell border + ctx.strokeRect(cellX, cellY, cellSize, cellSize); + + // Draw diagonal line for empty cells + if (!grid[x][y]) { + ctx.beginPath(); + ctx.strokeStyle = '#bfbfbf'; + ctx.moveTo(cellX, cellY); + ctx.lineTo(cellX + cellSize, cellY + cellSize); + ctx.stroke(); + ctx.strokeStyle = '#888888'; // Reset stroke style for borders + } } } } |