class Tile { constructor(x, y, type = 'floor') { this.x = x; this.y = y; this.type = type; } } class Room { constructor(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.tiles = []; this.edgeTiles = { top: { tiles: {}, taken: false }, right: { tiles: {}, taken: false }, bottom: { tiles: {}, taken: false }, left: { tiles: {}, taken: false } }; this.generateTiles(); } generateTiles() { for (let y = 0; y < this.height; y++) { this.tiles[y] = []; for (let x = 0; x < this.width; x++) { let tile = new Tile(this.x + x, this.y + y); this.tiles[y][x] = tile; if (y === 0 && x !== 0 && x !== this.width - 1) this.edgeTiles.top.tiles[x] = tile; if (y === this.height - 1 && x !== 0 && x !== this.width - 1) this.edgeTiles.bottom.tiles[x] = tile; if (x === 0 && y !== 0 && y !== this.height - 1) this.edgeTiles.left.tiles[y] = tile; if (x === this.width - 1 && y !== 0 && y !== this.height - 1) this.edgeTiles.right.tiles[y] = tile; } } } markEdgeAsTaken(edge) { this.edgeTiles[edge].taken = true; } } class Corridor { constructor(startX, startY, endX, endY) { this.startX = startX; this.startY = startY; this.endX = endX; this.endY = endY; this.tiles = []; this.wallTiles = { left: [], right: [] }; this.generateTiles(); } generateTiles() { let x = this.startX; let y = this.startY; let dx = this.endX > this.startX ? 1 : (this.endX < this.startX ? -1 : 0); let dy = this.endY > this.startY ? 1 : (this.endY < this.startY ? -1 : 0); // Decide if the corridor will have a bend let hasBend = Math.random() < 0.7; // 70% chance of bend let bendX, bendY; if (hasBend) { // Choose a random point for the bend let distanceX = Math.abs(this.endX - this.startX); let distanceY = Math.abs(this.endY - this.startY); bendX = this.startX + Math.floor(Math.random() * (distanceX - 1) + 1) * Math.sign(dx); bendY = this.startY + Math.floor(Math.random() * (distanceY - 1) + 1) * Math.sign(dy); } // Generate tiles to the bend point or end point while ((hasBend && (x !== bendX || y !== bendY)) || (!hasBend && (x !== this.endX || y !== this.endY))) { this.addTile(x, y, dx, dy); if (x !== bendX && hasBend) x += dx; if (y !== bendY && hasBend) y += dy; if (!hasBend) { if (x !== this.endX) x += dx; if (y !== this.endY) y += dy; } } // If there's a bend, generate tiles from bend to end if (hasBend) { dx = this.endX > bendX ? 1 : (this.endX < bendX ? -1 : 0); dy = this.endY > bendY ? 1 : (this.endY < bendY ? -1 : 0); while (x !== this.endX || y !== this.endY) { this.addTile(x, y, dx, dy); if (x !== this.endX) x += dx; if (y !== this.endY) y += dy; } } // Add the final tile this.addTile(this.endX, this.endY, dx, dy); } addTile(x, y, dx, dy) { this.tiles.push(new Tile(x, y, 'corridor')); this.wallTiles.left.push(new Tile(x - dy, y + dx, 'wall')); this.wallTiles.right.push(new Tile(x + dy, y - dx, 'wall')); } } class Game extends Phaser.Scene { constructor() { super(); this.rooms = []; this.corridors = []; this.tileSize = 4; this.targetRoomCount = 33; this.generationComplete = false; this.graphics = null; this.vueApp = null; } preload() { this.load.script('vue', 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.37/vue.global.min.js'); } create() { this.graphics = this.add.graphics(); this.setupVueUI(); this.generateRootRoom(); } setupVueUI() { const self = this; const app = Vue.createApp({ data() { return { roomCount: 1, generationComplete: false, generating: false, activeTab: 'room', roomSettings: { minWidth: 5, maxWidth: 10, minHeight: 5, maxHeight: 10 }, corridorSettings: { minLength: 3, maxLength: 8 }, targetRoomCount: self.targetRoomCount }; }, methods: { generateDungeon() { if (!this.generating) { this.generating = true; self.targetRoomCount = this.targetRoomCount; self.clearDungeon(); self.generateRootRoom(); self.generateDungeonStep(); } }, setActiveTab(tab) { this.activeTab = tab; } }, template: `

Dungeon Generator

Rooms: {{ roomCount }} / {{ targetRoomCount }}

Target Room Count:

Generating...

Generation Complete!

Room Settings

Min Width:
Max Width:
Min Height:
Max Height:

Corridor Settings

Min Length:
Max Length:

` }); // Mount the Vue app to a new div that we'll create and append to the game container const uiContainer = document.createElement('div'); uiContainer.id = 'uiContainer'; this.game.canvas.parentNode.appendChild(uiContainer); this.vueApp = app.mount('#uiContainer'); } clearDungeon() { this.rooms = []; this.corridors = []; this.graphics.clear(); this.generationComplete = false; if (this.vueApp) { this.vueApp.roomCount = 0; this.vueApp.generationComplete = false; } } generateRootRoom() { const screenCenterX = Math.floor(this.game.config.width / (2 * this.tileSize)); const screenCenterY = Math.floor(this.game.config.height / (2 * this.tileSize)); const rootRoomWidth = 5; const rootRoomHeight = 5; let rootRoom = new Room( screenCenterX - Math.floor(rootRoomWidth / 2), screenCenterY - Math.floor(rootRoomHeight / 2), rootRoomWidth, rootRoomHeight ); this.rooms.push(rootRoom); this.drawRoom(rootRoom); if (this.vueApp) { this.vueApp.roomCount = 1; } } generateDungeonStep() { if (this.rooms.length >= this.targetRoomCount || this.generationComplete) { this.generationComplete = true; if (this.vueApp) { this.vueApp.generating = false; this.vueApp.generationComplete = true; } return; } this.generateNextRoom(); if (this.vueApp) { this.vueApp.roomCount = this.rooms.length; } setTimeout(() => { this.generateDungeonStep(); }, 30); } generateNextRoom() { let room = this.rooms[Math.floor(Math.random() * this.rooms.length)]; let availableEdges = Object.keys(room.edgeTiles).filter(edge => !room.edgeTiles[edge].taken); if (availableEdges.length === 0) return; let edge = availableEdges[Math.floor(Math.random() * availableEdges.length)]; let edgeTiles = Object.values(room.edgeTiles[edge].tiles); let startTile = edgeTiles[Math.floor(Math.random() * edgeTiles.length)]; let corridorLength = Math.floor(Math.random() * (this.vueApp.corridorSettings.maxLength - this.vueApp.corridorSettings.minLength + 1)) + this.vueApp.corridorSettings.minLength; let startX, startY, endX, endY; switch (edge) { case 'top': startX = startTile.x; startY = startTile.y - 1; endX = startX; endY = startY - corridorLength; break; case 'right': startX = startTile.x + 1; startY = startTile.y; endX = startX + corridorLength; endY = startY; break; case 'bottom': startX = startTile.x; startY = startTile.y + 1; endX = startX; endY = startY + corridorLength; break; case 'left': startX = startTile.x - 1; startY = startTile.y; endX = startX - corridorLength; endY = startY; break; } let corridor = new Corridor(startX, startY, endX, endY); if (this.checkCorridorCollision(corridor, room)) return; let newRoomWidth = Math.floor(Math.random() * (this.vueApp.roomSettings.maxWidth - this.vueApp.roomSettings.minWidth + 1)) + this.vueApp.roomSettings.minWidth; let newRoomHeight = Math.floor(Math.random() * (this.vueApp.roomSettings.maxHeight - this.vueApp.roomSettings.minHeight + 1)) + this.vueApp.roomSettings.minHeight; let newRoomX, newRoomY; switch (edge) { case 'top': newRoomX = endX - Math.floor(newRoomWidth / 2); newRoomY = endY - newRoomHeight + 1; break; case 'right': newRoomX = endX; newRoomY = endY - Math.floor(newRoomHeight / 2); break; case 'bottom': newRoomX = endX - Math.floor(newRoomWidth / 2); newRoomY = endY; break; case 'left': newRoomX = endX - newRoomWidth + 1; newRoomY = endY - Math.floor(newRoomHeight / 2); break; } let newRoom = new Room(newRoomX, newRoomY, newRoomWidth, newRoomHeight); if (this.checkRoomCollision(newRoom, room)) return; this.corridors.push(corridor); room.markEdgeAsTaken(edge); this.drawCorridor(corridor); let oppositeEdge = { 'top': 'bottom', 'right': 'left', 'bottom': 'top', 'left': 'right' }[edge]; newRoom.markEdgeAsTaken(oppositeEdge); this.rooms.push(newRoom); this.drawRoom(newRoom); } checkCorridorCollision(corridor, originRoom) { const buffer = 1; // Add a buffer zone around corridors // Check collision with rooms for (let room of this.rooms) { if (room === originRoom) continue; for (let tile of [...corridor.tiles, ...corridor.wallTiles.left, ...corridor.wallTiles.right]) { if (tile.x >= room.x - buffer && tile.x < room.x + room.width + buffer && tile.y >= room.y - buffer && tile.y < room.y + room.height + buffer) { return true; // Collision detected } } } // Check collision with existing corridors for (let existingCorridor of this.corridors) { for (let tile of [...corridor.tiles, ...corridor.wallTiles.left, ...corridor.wallTiles.right]) { if (existingCorridor.tiles.some(t => Math.abs(t.x - tile.x) <= buffer && Math.abs(t.y - tile.y) <= buffer) || existingCorridor.wallTiles.left.some(t => Math.abs(t.x - tile.x) <= buffer && Math.abs(t.y - tile.y) <= buffer) || existingCorridor.wallTiles.right.some(t => Math.abs(t.x - tile.x) <= buffer && Math.abs(t.y - tile.y) <= buffer)) { return true; // Collision detected } } } return false; // No collision } checkRoomCollision(newRoom, originRoom) { const buffer = 1; // Add a buffer zone around rooms for (let room of this.rooms) { if (room === originRoom) continue; if (newRoom.x - buffer < room.x + room.width && newRoom.x + newRoom.width + buffer > room.x && newRoom.y - buffer < room.y + room.height && newRoom.y + newRoom.height + buffer > room.y) { return true; // Collision detected } } return false; // No collision } drawRoom(room) { const colors = { floor: 0xcccccc, top: 0xff0000, right: 0x00ff00, bottom: 0x0000ff, left: 0xffff00 }; this.graphics.fillStyle(colors.floor); this.graphics.fillRect(room.x * this.tileSize, room.y * this.tileSize, room.width * this.tileSize, room.height * this.tileSize); for (let edge in room.edgeTiles) { this.graphics.fillStyle(colors[edge]); for (let tile of Object.values(room.edgeTiles[edge].tiles)) { this.graphics.fillRect(tile.x * this.tileSize, tile.y * this.tileSize, this.tileSize, this.tileSize); } } } drawCorridor(corridor) { const floorColor = 0x999999; const wallColor = 0x666666; this.graphics.fillStyle(floorColor); for (let tile of corridor.tiles) { this.graphics.fillRect(tile.x * this.tileSize, tile.y * this.tileSize, this.tileSize, this.tileSize); } this.graphics.fillStyle(wallColor); for (let wallTile of [...corridor.wallTiles.left, ...corridor.wallTiles.right]) { this.graphics.fillRect(wallTile.x * this.tileSize, wallTile.y * this.tileSize, this.tileSize, this.tileSize); } } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.WebGLRenderer, parent: 'renderDiv', pixelArt: true, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, scene: Game }; window.phaserGame = new Phaser.Game(config);