SCP:SL Style Level Generator

I'll create a level generation system similar to SCP: Secret Laboratory's procedural level generation. This will generate a facility with rooms connected in a grid-like pattern. SCP:SL Style Level Generator

Seed: Size:

class LevelGenerator { constructor(seed, size) { this.seed = seed; this.size = size; this.grid = []; this.rooms = []; this.roomTypes = ['LCZ', 'HCZ', 'EZ', 'Entrance', 'Pocket']; } generate() { this._initializeGrid(); this._generateMainPath(); this._generateBranches(); this._assignRoomTypes(); return this.rooms; } _initializeGrid() { this.grid = Array(this.size).fill().map(() => Array(this.size).fill(0)); } _generateMainPath() { // Start from center let x = Math.floor(this.size / 2); let y = Math.floor(this.size / 2); this.grid[y][x] = 1; this.rooms.push({x, y, type: 'Entrance', connections: []}); // Generate path in random direction const directions = [[0,1], [1,0], [0,-1], [-1,0]]; let steps = Math.floor(this.size * 1.5); while (steps > 0) { const [dx, dy] = directions[Math.floor(Math.random() * directions.length)]; const nx = x + dx; const ny = y + dy; if (nx >= 0 && nx < this.size && ny >= 0 && ny < this.size) { if (this.grid[ny][nx] === 0) { this.grid[ny][nx] = 1; this.rooms.push({x: nx, y: ny, type: '', connections: []}); this._connectRooms(x, y, nx, ny); } x = nx; y = ny; steps--; } } } _generateBranches() { const mainRooms = [...this.rooms]; const directions = [[0,1], [1,0], [0,-1], [-1,0]]; mainRooms.forEach(room => { if (Math.random() > 0.7) { const branchLength = Math.floor(Math.random() * 3) + 1; let x = room.x; let y = room.y; for (let i = 0; i < branchLength; i++) { const [dx, dy] = directions[Math.floor(Math.random() * directions.length)]; const nx = x + dx; const ny = y + dy; if (nx >= 0 && nx < this.size && ny >= 0 && ny < this.size && this.grid[ny][nx] === 0) { this.grid[ny][nx] = 1; this.rooms.push({x: nx, y: ny, type: '', connections: []}); this._connectRooms(x, y, nx, ny); x = nx; y = ny; } } } }); } _connectRooms(x1, y1, x2, y2) { const room1 = this.rooms.find(r => r.x === x1 && r.y === y1); const room2 = this.rooms.find(r => r.x === x2 && r.y === y2); if (room1 && room2) { room1.connections.push({x: x2, y: y2}); room2.connections.push({x: x1, y: y1}); } } _assignRoomTypes() { // Assign types based on distance from entrance const entrance = this.rooms.find(r => r.type === 'Entrance'); this.rooms.forEach(room => { if (room.type === 'Entrance') return; const dx = room.x - entrance.x; const dy = room.y - entrance.y; const distance = Math.sqrt(dx*dx + dy*dy); const normalized = distance / (this.size / 2); if (normalized < 0.3) { room.type = 'LCZ'; } else if (normalized < 0.7) { room.type = 'HCZ'; } else { room.type = 'EZ'; } // Randomly assign some rooms as pockets if (Math.random() < 0.1) { room.type = 'Pocket'; } }); } } // Rendering const canvas = document.getElementById('level'); const ctx = canvas.getContext('2d'); const roomSize = 40; const padding = 10; function renderLevel(rooms) { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw connections first rooms.forEach(room => { room.connections.forEach(conn => { const target = rooms.find(r => r.x === conn.x && r.y === conn.y); if (target) { drawConnection(room, target); } }); }); // Then draw rooms rooms.forEach(room => { drawRoom(room); }); } function drawRoom(room) { const x = room.x * (roomSize + padding) + roomSize; const y = room.y * (roomSize + padding) + roomSize; // Room color based on type let color; switch(room.type) { case 'LCZ': color = '#3498db'; break; case 'HCZ': color = '#e74c3c'; break; case 'EZ': color = '#2ecc71'; break; case 'Entrance': color = '#f1c40f'; break; case 'Pocket': color = '#9b59b6'; break; default: color = '#95a5a6'; } ctx.fillStyle = color; ctx.fillRect(x - roomSize/2, y - roomSize/2, roomSize, roomSize); // Room label ctx.fillStyle = '#fff'; ctx.font = '10px Arial'; ctx.textAlign = 'center'; ctx.fillText(room.type, x, y + 3); } function drawConnection(room1, room2) { const x1 = room1.x * (roomSize + padding) + roomSize; const y1 = room1.y * (roomSize + padding) + roomSize; const x2 = room2.x * (roomSize + padding) + roomSize; const y2 = room2.y * (roomSize + padding) + roomSize; ctx.strokeStyle = '#7f8c8d'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } // UI Controls document.getElementById('generate').addEventListener('click', () => { const seed = document.getElementById('seed').value; const size = parseInt(document.getElementById('size').value); Math.seedrandom(seed); const generator = new LevelGenerator(seed, size); const level = generator.generate(); renderLevel(level); }); // Initial generation document.getElementById('generate').click(); // A seedable random number generator (function(f){function g(a,d,b,e){var c=0;b=(a?a+"":"")+(d?d+"":"")+(b?b+"":"")+(e?e+"": "");a=0;for(d=b.length;a>5]|=128<>9<<4)+14]=d;for(var b=0;b>>7|O<<25)^(O>>>18|O<<14)^O>>>3)+A[N-16]+((P>>>17|P<<15)^(P>>>19|P<<13)^P>>> 10)+A[N-7]|0}var Q=((B>>>6|B<<26)^(B>>>11|B<<21)^(B>>>25|B<<7))+(B&C^~B&D)+E+A[N]+( N<20?1518500249:N<40?1859775393:N<60?-1894007588:-899497514);var R=((x>>>2|x<<30)^(x >>>13|x<<19)^(x>>>22|x<<10))+(x&y^x&z^y&z);E=D;D=C;C=B<<30|B>>>2;B=A;A=Q+R|0;x=M;M=L; L=K;K=J;J=I;I=H;H=G;G=F;F=Q}var S=a[b],T=a[b+1],U=a[b+2],V=a[b+3],W=a[b+4],X=a[b+5], Y=a[b+6],Z=a[b+7];a[b]=S+A|0;a[b+1]=T+B|0;a[b+2]=U+C|0;a[b+3]=V+D|0;a[b+4]=W+E|0;a[b+ 5]=X+F|0;a[b+6]=Y+G|0;a[b+7]=Z+H|0}}function n(a,d,b,e){b=b||0;e=e||a.length-b;d=d||[ ];var c;for(c=0;c