class Gun { constructor(scene) { this.scene = scene; this.bullets = scene.physics.add.group({ defaultKey: 'bullet', maxSize: 10, allowGravity: false }); this.fireRate = 500; // milliseconds between shots this.lastFired = 0; } fire(x, y, angle) { const currentTime = this.scene.time.now; if (currentTime - this.lastFired > this.fireRate) { const bullet = this.bullets.create(x, y, 'bullet'); if (bullet.body) { bullet.setData('creationTime', currentTime); bullet.setAngle(Phaser.Math.RadToDeg(angle)); this.scene.physics.velocityFromRotation(angle, 500, bullet.body.velocity); this.lastFired = currentTime; } else { console.error('Bullet body is not initialized'); bullet.destroy(); } } } update() { const currentTime = this.scene.time.now; this.bullets.children.each((bullet) => { if (currentTime - bullet.getData('creationTime') > 2000) { bullet.destroy(); } }); } } class Sector { constructor(id, x0, y0, x1, y1) { this.id = id; this.x0 = x0; this.y0 = y0; this.x1 = x1; this.y1 = y1; this.walls = []; this.floorHeight = 0; this.ceilingHeight = 1; this.floorPoints = []; this.ceilingPoints = []; } addWall(wall) { this.walls.push(wall); } addFloorPoint(point) { this.floorPoints.push(point); } addCeilingPoint(point) { this.ceilingPoints.push(point); } } class Example extends Phaser.Scene { constructor() { super(); this.cameraX = 0; // Camera X position in map coordinates this.cameraY = 0; // Camera Y position in map coordinates this.sectors = []; this.mapData = [ [{ wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.2 }, { wall: 1, absorbance: 0.3 }, { wall: 2, absorbance: 0.4 }, { wall: 1, absorbance: 0.5 }, { wall: 1, absorbance: 0.6 }, { wall: 1, absorbance: 0.7 }, { wall: 0, absorbance: 0 }], [{ wall: 1, absorbance: 0.1 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.8 }], [{ wall: 1, absorbance: 0.2 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.3 }, { wall: 1, absorbance: 0.4 }, { wall: 1, absorbance: 0.5 }, { wall: 1, absorbance: 0.6 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.9 }], [{ wall: 1, absorbance: 0.3 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.4 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.7 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 1.0 }], [{ wall: 1, absorbance: 0.4 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.5 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.8 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.9 }], [{ wall: 1, absorbance: 0.5 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.6 }, { wall: 1, absorbance: 0.7 }, { wall: 1, absorbance: 0.8 }, { wall: 1, absorbance: 0.9 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.8 }], [{ wall: 1, absorbance: 0.6 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.7 }], [{ wall: 0, absorbance: 0 }, { wall: 1, absorbance: 0.7 }, { wall: 1, absorbance: 0.8 }, { wall: 1, absorbance: 0.9 }, { wall: 1, absorbance: 1.0 }, { wall: 1, absorbance: 0.9 }, { wall: 1, absorbance: 0.8 }, { wall: 0, absorbance: 0 }] ]; } initializeSectors() { let sectorId = 0; for (let y = 0; y < this.mapData.length; y++) { for (let x = 0; x < this.mapData[y].length; x++) { const sector = new Sector(sectorId, x, y, x + 1, y + 1); sector.floorHeight = Math.random() * 0.5; sector.ceilingHeight = 1 + Math.random() * 0.5; // Determine if this sector is a portal const isPortal = this.mapData[y][x].wall === 2; // Generate 12 vertices for the dodecagon const centerX = x + 0.5; const centerY = y + 0.5; const radius = 0.5; const vertices = []; for (let i = 0; i < 12; i++) { const angle = (Math.PI * 2 * i) / 12; const vertexX = centerX + radius * Math.cos(angle); const vertexY = centerY + radius * Math.sin(angle); vertices.push({ x: vertexX, y: vertexY }); // Add floor and ceiling points sector.addFloorPoint({ x: vertexX, y: vertexY, z: sector.floorHeight }); sector.addCeilingPoint({ x: vertexX, y: vertexY, z: sector.ceilingHeight }); } // Create walls from the vertices for (let i = 0; i < 12; i++) { const v1 = vertices[i]; const v2 = vertices[(i + 1) % 12]; sector.addWall({ x0: v1.x, y0: v1.y, x1: v2.x, y1: v2.y, isPortal: isPortal }); } this.sectors.push(sector); sectorId++; } } } preload() { this.load.plugin('rexvirtualjoystickplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvirtualjoystickplugin.min.js', true); this.load.image('bullet', 'bullet-9g4D'); } create() { // Set the background color to black this.cameras.main.setBackgroundColor('#000000'); // Set up player position and direction this.playerX = 3.5; this.playerY = 3.5; this.playerAngle = 0; // Create a graphics object for ray casting this.rayCastGraphics = this.add.graphics(); // Set up keyboard controls this.keyW = this.input.keyboard.addKey('W'); this.keyS = this.input.keyboard.addKey('S'); this.keyA = this.input.keyboard.addKey('A'); this.keyD = this.input.keyboard.addKey('D'); this.keySpace = this.input.keyboard.addKey('SPACE'); // Initialize sectors this.initializeSectors(); // Initialize gun this.gun = new Gun(this); // Set bullet properties this.gun.bullets.children.entries.forEach((bullet) => { bullet.setBodySize(8, 8); }); this.gun.bullets.runChildUpdate = true; // Make sure update is called on bullet sprites } update() { const moveSpeed = 0.05; const rotSpeed = 0.05; if (this.keyW.isDown) { this.playerX += Math.cos(this.playerAngle) * moveSpeed; this.playerY += Math.sin(this.playerAngle) * moveSpeed; } if (this.keyS.isDown) { this.playerX -= Math.cos(this.playerAngle) * moveSpeed; this.playerY -= Math.sin(this.playerAngle) * moveSpeed; } if (this.keyA.isDown) { this.playerAngle -= rotSpeed; } if (this.keyD.isDown) { this.playerAngle += rotSpeed; } // Handle shooting if (this.keySpace.isDown) { this.gun.fire(this.playerX, this.playerY, this.playerAngle); } // Update gun (handle bullet lifetime) this.gun.update(); // Clear previous frame this.rayCastGraphics.clear(); // Cast rays const numRays = 320; const fov = Math.PI / 3; for (let x = 0; x < numRays; x++) { const rayAngle = this.playerAngle - fov / 2 + (x / numRays) * fov; const { distance, absorbance, sector, wallX, side, isPortal } = this.castRay(this.playerX, this.playerY, rayAngle); // Calculate wall height and Y scale const perspectiveCorrection = Math.cos(rayAngle - this.playerAngle); const wallDistance = distance * perspectiveCorrection; const wallHeight = (this.cameras.main.height / wallDistance) * 50; // Calculate Y scale for left and right edges of the wall slice const leftEdgeDistance = wallDistance; const rightEdgeDistance = wallDistance + (this.cameras.main.width / numRays) / (this.cameras.main.width / 2) * wallDistance; const leftYScale = this.cameras.main.height / leftEdgeDistance; const rightYScale = this.cameras.main.height / rightEdgeDistance; // Calculate color based on absorbance and portal status let color; if (isPortal) { color = Phaser.Display.Color.GetColor(128, 128, 128); // Gray for portals } else { color = Phaser.Display.Color.GetColor( 255 * (1 - absorbance), 255 * (1 - absorbance), 255 * (1 - absorbance) ); } // Calculate floor and ceiling positions const leftFloorY = (this.cameras.main.height / 2) * (1 + 1 / leftEdgeDistance) + (sector.floorHeight * leftYScale); const leftCeilingY = (this.cameras.main.height / 2) * (1 - 1 / leftEdgeDistance) - (sector.ceilingHeight * leftYScale); const rightFloorY = (this.cameras.main.height / 2) * (1 + 1 / rightEdgeDistance) + (sector.floorHeight * rightYScale); const rightCeilingY = (this.cameras.main.height / 2) * (1 - 1 / rightEdgeDistance) - (sector.ceilingHeight * rightYScale); // Draw wall slice this.rayCastGraphics.fillStyle(color, 1 - distance / 8); this.rayCastGraphics.beginPath(); this.rayCastGraphics.moveTo(x * (this.cameras.main.width / numRays), leftCeilingY); this.rayCastGraphics.lineTo((x + 1) * (this.cameras.main.width / numRays), rightCeilingY); this.rayCastGraphics.lineTo((x + 1) * (this.cameras.main.width / numRays), rightFloorY); this.rayCastGraphics.lineTo(x * (this.cameras.main.width / numRays), leftFloorY); this.rayCastGraphics.closePath(); this.rayCastGraphics.fill(); // Draw wall endpoints as horizontal green lines const lineLength = this.cameras.main.width / numRays * 1.5; // Make lines slightly longer const xPosition = x * (this.cameras.main.width / numRays); this.rayCastGraphics.lineStyle(2, 0x00FF00); // Green color // Draw ceiling endpoint this.rayCastGraphics.beginPath(); this.rayCastGraphics.moveTo(xPosition - lineLength / 2, leftCeilingY); this.rayCastGraphics.lineTo(xPosition + lineLength / 2, rightCeilingY); this.rayCastGraphics.strokePath(); // Draw floor endpoint this.rayCastGraphics.beginPath(); this.rayCastGraphics.moveTo(xPosition - lineLength / 2, leftFloorY); this.rayCastGraphics.lineTo(xPosition + lineLength / 2, rightFloorY); this.rayCastGraphics.strokePath(); } } castRay(startX, startY, angle) { const rayDirX = Math.cos(angle); const rayDirY = Math.sin(angle); let mapX = Math.floor(startX); let mapY = Math.floor(startY); const deltaDistX = Math.abs(1 / rayDirX); const deltaDistY = Math.abs(1 / rayDirY); let sideDistX, sideDistY, stepX, stepY; if (rayDirX < 0) { stepX = -1; sideDistX = (startX - mapX) * deltaDistX; } else { stepX = 1; sideDistX = (mapX + 1 - startX) * deltaDistX; } if (rayDirY < 0) { stepY = -1; sideDistY = (startY - mapY) * deltaDistY; } else { stepY = 1; sideDistY = (mapY + 1 - startY) * deltaDistY; } let hit = 0; let side; let currentSector = this.getSectorAt(mapX, mapY); let isPortal = false; while (hit === 0 && currentSector) { if (sideDistX < sideDistY) { sideDistX += deltaDistX; mapX += stepX; side = 0; } else { sideDistY += deltaDistY; mapY += stepY; side = 1; } const nextSector = this.getSectorAt(mapX, mapY); if (!nextSector) { hit = 1; break; } if (nextSector !== currentSector) { for (const wall of currentSector.walls) { if ((side === 0 && wall.x0 === mapX && wall.x1 === mapX) || (side === 1 && wall.y0 === mapY && wall.y1 === mapY)) { hit = 1; isPortal = wall.isPortal; break; } } if (hit === 1) break; currentSector = nextSector; } } let distance, wallX; if (side === 0) { distance = Math.abs((mapX - startX + (1 - stepX) / 2) / rayDirX); wallX = startY + distance * rayDirY; } else { distance = Math.abs((mapY - startY + (1 - stepY) / 2) / rayDirY); wallX = startX + distance * rayDirX; } wallX -= Math.floor(wallX); let absorbance = 0; if (this.isValidMapPosition(mapX, mapY) && currentSector) { absorbance = this.mapData[mapY][mapX].absorbance; } return { distance, absorbance, sector: currentSector || this.getDefaultSector(), wallX, side, isPortal }; } isValidMapPosition(x, y) { return x >= 0 && x < this.mapData[0].length && y >= 0 && y < this.mapData.length; } getSectorAt(x, y) { if (x < 0 || x >= this.mapData[0].length || y < 0 || y >= this.mapData.length) { return null; } return this.sectors[y * this.mapData[0].length + x]; } getDefaultSector() { return { floorHeight: 0, ceilingHeight: 1, walls: [] }; } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, scene: Example, physics: { default: 'arcade', arcade: { debug: false } } }; window.phaserGame = new Phaser.Game(config);