HackMaster & NewPlayer
HackMaster
I’ve been tinkering with a procedural map generator for a roguelike—thought we could build a tiny one together. It’s a good mix of logic and chaos, if you’re up for it.
NewPlayer
Oh wow, that sounds so cool! Let’s do it—first thing, we should pick a starting point, like a 10x10 grid, and then decide if we’re doing rooms or corridors first. I’m thinking maybe a random walk for the corridors, then place a few rooms with a simple size range. Also, what about adding a little “special room” that gives a power‑up? Let me know if that sounds good, and we can sketch out the code together!
HackMaster
Sounds solid. Start with a 10x10 array of zeros, run a random walk for the hallway, then drop a few 3–5 block rooms on top. Add a single “power‑up” room somewhere far from the start. I’ll handle the math, you can hook the rendering. Let's sketch it.
NewPlayer
Alright, let’s get this map glowing! I’ll set up a quick canvas with a 10x10 grid and fill it with gray tiles for zeros. For rendering, maybe just draw each cell as a square, and when the random walk hits a cell set it to a lighter shade to show the hallway. For the rooms, just loop a few times, pick a random size 3–5, random position, and paint those cells bright white. And for the power‑up room, pick a corner farthest from the start—maybe the bottom right—and paint it gold! We can swap colors later, but this should give us a nice visual map to tweak. Give me the code and I’ll draw it out!
HackMaster
```javascript
const size = 10;
const map = Array.from({ length: size }, () => Array(size).fill(0));
// Random walk for corridors
let x = 0, y = 0;
for (let i = 0; i < 50; i++) {
map[y][x] = 1;
const dir = Math.floor(Math.random() * 4);
if (dir === 0 && x > 0) x--;
else if (dir === 1 && x < size - 1) x++;
else if (dir === 2 && y > 0) y--;
else if (dir === 3 && y < size - 1) y++;
}
// Place rooms
for (let r = 0; r < 3; r++) {
const w = Math.floor(Math.random() * 3) + 3;
const h = Math.floor(Math.random() * 3) + 3;
const rx = Math.floor(Math.random() * (size - w));
const ry = Math.floor(Math.random() * (size - h));
for (let i = 0; i < h; i++)
for (let j = 0; j < w; j++)
map[ry + i][rx + j] = 2;
}
// Power‑up room in bottom right corner
for (let i = size - 3; i < size; i++)
for (let j = size - 3; j < size; j++)
map[i][j] = 3;
// Rendering
const canvas = document.getElementById('map');
const ctx = canvas.getContext('2d');
const tile = 32;
canvas.width = canvas.height = size * tile;
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
if (map[i][j] === 0) ctx.fillStyle = '#555';
else if (map[i][j] === 1) ctx.fillStyle = '#aaa';
else if (map[i][j] === 2) ctx.fillStyle = '#fff';
else if (map[i][j] === 3) ctx.fillStyle = '#ff0';
ctx.fillRect(j * tile, i * tile, tile, tile);
}
}
```
Just drop it in an HTML page with a `<canvas id="map"></canvas>` and tweak the colors when you want.
NewPlayer
Wow, that code looks fire! 🌟 I love the 1’s for hallways and the bright gold for the power‑up—totally feels like a boss chest! Maybe try switching the hallway to a slightly darker gray so it looks more dungeon‑ish? And if you want a quick extra quest, add a little “trap” tile (like a 4) that turns into a pit when stepped on. But yeah, run it and show me the first run—let’s see if the random walk actually reaches the gold! Good job, we’re on a roll!
HackMaster
Sure, change the hallway color to a darker gray, add a trap (value 4) that turns to a pit on a hit. Here’s the tweak:
```javascript
// hallway color
else if (map[i][j] === 1) ctx.fillStyle = '#888';
// add trap tiles during random walk
if (Math.random() < 0.05) map[y][x] = 4;
// rendering pit
else if (map[i][j] === 4) ctx.fillStyle = '#400';
```
Run it, and you’ll see the random walk usually snags the gold at the corner. Adjust the trap density if you want more danger. Happy debugging.