code snipplets and pictures down below<\/p>\n\n\n\n
![\"\"](\"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-content\/uploads\/2026\/05\/image-1024x462.png\")
<\/span>minimap<\/p>\n<\/div><\/div>\n\n\n\n
![\"\"](\"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-15-142245-1024x428.png\")
<\/span>main cutscene <\/p>\n<\/div><\/div>\n\n\n\n
![\"\"](\"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-15-142300-1024x270.png\")
<\/span>ending from dying<\/p>\n<\/div><\/div>\n\n\n\n
code down below<\/p>\n\n\n\n
and ill try to send the code so then you could try it yourself! \ud83d\ude00<\/p>\n\n\n\n
Le CODE:<\/p>\n\n\n\n
<!DOCTYPE html><\/p>\n\n\n\n
<html lang=”en”><\/p>\n\n\n\n
<head><\/p>\n\n\n\n
<meta charset=”UTF-8″><\/p>\n\n\n\n
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/p>\n\n\n\n
<title>THE HOLLOW: ETERNAL VOID – FINAL CHAPTER<\/title><\/p>\n\n\n\n
<script src=”https:\/\/cdn.jsdelivr.net\/npm\/phaser@3.60.0\/dist\/phaser-arcade-physics.min.js”><\/script><\/p>\n\n\n\n
<style><\/p>\n\n\n\n
body { margin: 0; background: #000; overflow: hidden; font-family: ‘Courier New’, Courier, monospace; color: #fff; }<\/p>\n\n\n\n
canvas { display: block; margin: 0 auto; }<\/p>\n\n\n\n
#ui-instruction {<\/p>\n\n\n\n
position: absolute; bottom: 10px; left: 10px;<\/p>\n\n\n\n
color: rgba(255, 255, 255, 0.4); font-size: 11px;<\/p>\n\n\n\n
pointer-events: none; z-index: 100;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
#interaction-menu {<\/p>\n\n\n\n
position: absolute; top: 50%; left: 50%;<\/p>\n\n\n\n
transform: translate(-50%, -50%);<\/p>\n\n\n\n
background: rgba(0, 0, 0, 0.95); border: 2px solid #ff0000;<\/p>\n\n\n\n
padding: 30px; display: none; text-align: center; z-index: 1000;<\/p>\n\n\n\n
box-shadow: 0 0 20px #ff0000;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.menu-option { margin: 15px 0; color: #00ffcc; font-size: 20px; font-weight: bold; letter-spacing: 2px; cursor: pointer; }<\/p>\n\n\n\n
#cutscene-overlay {<\/p>\n\n\n\n
position: absolute; top: 0; left: 0; width: 100%; height: 100%;<\/p>\n\n\n\n
background: black; z-index: 5000; display: flex;<\/p>\n\n\n\n
justify-content: center; align-items: center; text-align: center;<\/p>\n\n\n\n
transition: opacity 2s; pointer-events: none;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.death-screen { background: rgba(30, 0, 0, 1) !important; color: #ff0000 !important; }<\/p>\n\n\n\n
#vignette {<\/p>\n\n\n\n
position: fixed; top: 0; left: 0; width: 100%; height: 100%;<\/p>\n\n\n\n
box-shadow: inset 0 0 150px #000; pointer-events: none; z-index: 500;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
<\/style><\/p>\n\n\n\n
<\/head><\/p>\n\n\n\n
<body><\/p>\n\n\n\n
<div id=”vignette”><\/div><\/p>\n\n\n\n
<div id=”cutscene-overlay”><\/p>\n\n\n\n
<h1 id=”cutscene-text” style=”font-size: 4rem; letter-spacing: 15px; color: #ff0000; text-shadow: 0 0 20px red;”>THE HOLLOW<\/h1><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<div id=”ui-instruction”><\/p>\n\n\n\n
WASD: Move | SHIFT: Sprint (0.5x Faster!) | G: Toggle\/Expand Tactical Minimap | F: Fullscreen <br><\/p>\n\n\n\n
MOUSE CLICK: Flashlight (Hold to Burn Spirits) | OBJECTIVE: Investigate 15 Graves.<\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<div id=”interaction-menu”><\/p>\n\n\n\n
<h2 style=”color: #ff0000; margin-top: 0; text-decoration: underline;”>GRAVE DETECTED<\/h2><\/p>\n\n\n\n
<div class=”menu-option” id=”opt-1″>[1] DISTURB THE DUST<\/div><\/p>\n\n\n\n
<div class=”menu-option” id=”opt-2″>[2] READ THE EPITAPH<\/div><\/p>\n\n\n\n
<div class=”menu-option” id=”opt-3″>[3] OFFER A PRAYER<\/div><\/p>\n\n\n\n
<div id=”progress-bar-container” style=”width: 100%; height: 12px; background: #111; margin-top: 20px; border: 1px solid #444;”><\/p>\n\n\n\n
<div id=”progress-bar” style=”width: 0%; height: 100%; background: #ff0000; box-shadow: 0 0 10px #ff0000;”><\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<div id=”grave-dialogue-text” style=”margin-top: 15px; color: #aaa; font-style: italic; font-size: 16px; min-height: 20px;”><\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<script><\/p>\n\n\n\n
\/**<\/p>\n\n\n\n
* ————————————————————————-<\/p>\n\n\n\n
* THE HOLLOW: ETERNAL VOID – CORE ENGINE V11.0 (CHRONICLES OF THE GRAVE)<\/p>\n\n\n\n
* ————————————————————————-<\/p>\n\n\n\n
* REVISION NOTES:<\/p>\n\n\n\n
* 1. Expanded Spirit Voice lines for increased psychological dread.<\/p>\n\n\n\n
* 2. Minimap Graphics Overlay: Completed graves now render as green markers.<\/p>\n\n\n\n
* 3. Enhanced Code Structure: Exceeding 550 lines for modular expansion.<\/p>\n\n\n\n
* 4. Sprint Mechanics Redesigned: Boosted sprint velocity threshold by 0.5x.<\/p>\n\n\n\n
* 5. Minimap Overhaul: G Key now toggles between compact tracking frame and<\/p>\n\n\n\n
* a full-screen expanded layout displaying brown unvisited markers.<\/p>\n\n\n\n
* ————————————————————————-<\/p>\n\n\n\n
*\/<\/p>\n\n\n\n
const WORLD_SIZE = 6000;<\/p>\n\n\n\n
const START_X = 3000;<\/p>\n\n\n\n
const START_Y = 3000;<\/p>\n\n\n\n
const TOTAL_GRAVES = 15;<\/p>\n\n\n\n
const INTERACTION_TIME = 3000;<\/p>\n\n\n\n
const BATTERY_DRAIN_RATE = 0.35;<\/p>\n\n\n\n
const BATTERY_RECHARGE_RATE = 0.15;<\/p>\n\n\n\n
class HorrorAudioSystem {<\/p>\n\n\n\n
constructor(ctx) {<\/p>\n\n\n\n
this.ctx = ctx;<\/p>\n\n\n\n
this.master = ctx.createGain();<\/p>\n\n\n\n
this.master.gain.value = 0.6;<\/p>\n\n\n\n
this.master.connect(ctx.destination);<\/p>\n\n\n\n
this.lowPass = ctx.createBiquadFilter();<\/p>\n\n\n\n
this.lowPass.type = ‘lowpass’;<\/p>\n\n\n\n
this.lowPass.frequency.value = 750;<\/p>\n\n\n\n
this.lowPass.connect(this.master);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
playDrone() {<\/p>\n\n\n\n
const osc = this.ctx.createOscillator();<\/p>\n\n\n\n
const g = this.ctx.createGain();<\/p>\n\n\n\n
osc.type = ‘sine’;<\/p>\n\n\n\n
osc.frequency.setValueAtTime(30.00, this.ctx.currentTime);<\/p>\n\n\n\n
g.gain.setValueAtTime(0.2, this.ctx.currentTime);<\/p>\n\n\n\n
osc.connect(g);<\/p>\n\n\n\n
g.connect(this.lowPass);<\/p>\n\n\n\n
osc.start();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
playSpiritScream() {<\/p>\n\n\n\n
const osc = this.ctx.createOscillator();<\/p>\n\n\n\n
const g = this.ctx.createGain();<\/p>\n\n\n\n
osc.type = ‘sawtooth’;<\/p>\n\n\n\n
osc.frequency.setValueAtTime(55, this.ctx.currentTime);<\/p>\n\n\n\n
osc.frequency.exponentialRampToValueAtTime(15, this.ctx.currentTime + 1.8);<\/p>\n\n\n\n
g.gain.setValueAtTime(0.7, this.ctx.currentTime);<\/p>\n\n\n\n
g.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 1.8);<\/p>\n\n\n\n
osc.connect(g);<\/p>\n\n\n\n
g.connect(this.master);<\/p>\n\n\n\n
osc.start();<\/p>\n\n\n\n
osc.stop(this.ctx.currentTime + 1.8);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
playDeathSound() {<\/p>\n\n\n\n
const osc = this.ctx.createOscillator();<\/p>\n\n\n\n
const g = this.ctx.createGain();<\/p>\n\n\n\n
osc.type = ‘square’;<\/p>\n\n\n\n
osc.frequency.setValueAtTime(35, this.ctx.currentTime);<\/p>\n\n\n\n
osc.frequency.linearRampToValueAtTime(1, this.ctx.currentTime + 2.5);<\/p>\n\n\n\n
g.gain.setValueAtTime(0.9, this.ctx.currentTime);<\/p>\n\n\n\n
g.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 2.5);<\/p>\n\n\n\n
osc.connect(g);<\/p>\n\n\n\n
g.connect(this.master);<\/p>\n\n\n\n
osc.start();<\/p>\n\n\n\n
osc.stop(this.ctx.currentTime + 2.5);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
class HorrorGame extends Phaser.Scene {<\/p>\n\n\n\n
constructor() { super(‘HorrorGame’); }<\/p>\n\n\n\n
init() {<\/p>\n\n\n\n
this.hp = 100;<\/p>\n\n\n\n
this.battery = 100;<\/p>\n\n\n\n
this.gravesFound = 0;<\/p>\n\n\n\n
this.isGameOver = false;<\/p>\n\n\n\n
this.inCutscene = true;<\/p>\n\n\n\n
this.isEscaping = false;<\/p>\n\n\n\n
this.isInteracting = false;<\/p>\n\n\n\n
this.isFlashlightOn = false;<\/p>\n\n\n\n
\/\/ Minimap expanded layout configuration states<\/p>\n\n\n\n
this.isMinimapExpanded = false;<\/p>\n\n\n\n
\/\/ Expanded Spirit Dialogue<\/p>\n\n\n\n
this.spiritDialogue = [<\/p>\n\n\n\n
“DEEPER INTO THE HOLLOW…”,<\/p>\n\n\n\n
“YOU ARE BUT A SHADOW OF FLESH”,<\/p>\n\n\n\n
“THE EARTH WANTS YOU BACK”,<\/p>\n\n\n\n
“SUCCUMB TO THE ETERNAL VOID”,<\/p>\n\n\n\n
“YOUR LIGHT IS FLICKERING OUT”,<\/p>\n\n\n\n
“WE REMEMBER THE SUN… IT TASTED LIKE YOU”,<\/p>\n\n\n\n
“WHY DO YOU RUN FROM THE INEVITABLE?”,<\/p>\n\n\n\n
“YOUR ANCESTORS ARE CALLING”,<\/p>\n\n\n\n
“THE DIRT IS WARMER THAN YOU THINK”,<\/p>\n\n\n\n
“EVERY STEP IS A SECOND LOST”,<\/p>\n\n\n\n
“THERE IS NO EXIT IN THE VOID”,<\/p>\n\n\n\n
“WE HUNGER FOR YOUR MEMORIES”,<\/p>\n\n\n\n
“BLOOD IS THE CURRENCY OF THE HOLLOW”,<\/p>\n\n\n\n
“STOP… LET US LOOK AT YOU”,<\/p>\n\n\n\n
“THE DARKNESS HAS TEETH”<\/p>\n\n\n\n
];<\/p>\n\n\n\n
this.graveOptions = {<\/p>\n\n\n\n
1: [“Cold soil fills your fingernails.”, “You hear a scratching from below.”, “The dirt smells of ancient copper.”],<\/p>\n\n\n\n
2: [“‘They followed the light until it died.'”, “‘Rest in pieces.'”, “The name has been scratched away by claws.”],<\/p>\n\n\n\n
3: [“A heavy weight settles on your shoulders.”, “The air turns to ice around you.”, “You hear a faint sob from the trees.”]<\/p>\n\n\n\n
};<\/p>\n\n\n\n
}<\/p>\n\n\n\n
preload() {<\/p>\n\n\n\n
this.load.image(‘particle’, ‘https:\/\/labs.phaser.io\/assets\/particles\/white.png’);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
create() {<\/p>\n\n\n\n
this.input.mouse.disableContextMenu();<\/p>\n\n\n\n
\/\/ Audio Activation<\/p>\n\n\n\n
this.input.once(‘pointerdown’, () => {<\/p>\n\n\n\n
this.audio = new HorrorAudioSystem(new (window.AudioContext || window.webkitAudioContext)());<\/p>\n\n\n\n
this.playIntroCutscene();<\/p>\n\n\n\n
});<\/p>\n\n\n\n
\/\/ World Setup<\/p>\n\n\n\n
this.physics.world.setBounds(0, 0, WORLD_SIZE, WORLD_SIZE);<\/p>\n\n\n\n
this.add.grid(3000, 3000, 6000, 6000, 200, 200, 0x030303, 1, 0x0a0a0a, 0.5);<\/p>\n\n\n\n
\/\/ Flashlight Graphics<\/p>\n\n\n\n
this.flashlightBeam = this.add.graphics().setDepth(1500);<\/p>\n\n\n\n
\/\/ Minimap Markers Graphics<\/p>\n\n\n\n
this.mapMarkers = this.add.graphics().setDepth(4500);<\/p>\n\n\n\n
\/\/ Player Container<\/p>\n\n\n\n
this.player = this.add.container(START_X, START_Y);<\/p>\n\n\n\n
this.pSprite = this.add.circle(0, 0, 15, 0x00ffcc, 1).setStrokeStyle(3, 0xffffff);<\/p>\n\n\n\n
this.pGlow = this.add.circle(0, 0, 80, 0x00ffcc, 0.05);<\/p>\n\n\n\n
this.player.add([this.pGlow, this.pSprite]);<\/p>\n\n\n\n
this.physics.add.existing(this.player);<\/p>\n\n\n\n
this.player.body.setCollideWorldBounds(true).setCircle(15, -15, -15);<\/p>\n\n\n\n
\/\/ Groups<\/p>\n\n\n\n
this.setupGraves();<\/p>\n\n\n\n
this.spirits = this.physics.add.group();<\/p>\n\n\n\n
this.exitPortal = this.add.circle(100, 100, 150, 0xff0000, 0.2).setStrokeStyle(8, 0xffffff);<\/p>\n\n\n\n
this.exitPortal.visible = false;<\/p>\n\n\n\n
\/\/ UI & Camera<\/p>\n\n\n\n
this.setupHUD();<\/p>\n\n\n\n
this.setupMinimap();<\/p>\n\n\n\n
this.cameras.main.startFollow(this.player, true, 0.05, 0.05);<\/p>\n\n\n\n
this.cameras.main.setBackgroundColor(‘#000’);<\/p>\n\n\n\n
this.keys = this.input.keyboard.addKeys(‘W,A,S,D,SHIFT,G,F,ONE,TWO,THREE’);<\/p>\n\n\n\n
\/\/ Ambience Timer<\/p>\n\n\n\n
this.time.addEvent({<\/p>\n\n\n\n
delay: 10000,<\/p>\n\n\n\n
callback: () => { if(!this.isGameOver) this.cameras.main.shake(400, 0.001); },<\/p>\n\n\n\n
loop: true<\/p>\n\n\n\n
});<\/p>\n\n\n\n
}<\/p>\n\n\n\n
setupGraves() {<\/p>\n\n\n\n
this.graves = this.physics.add.staticGroup();<\/p>\n\n\n\n
for(let i=0; i < TOTAL_GRAVES; i++) {<\/p>\n\n\n\n
let x = Phaser.Math.Between(400, 5600);<\/p>\n\n\n\n
let y = Phaser.Math.Between(400, 5600);<\/p>\n\n\n\n
let g = this.add.rectangle(x, y, 70, 100, 0x050505).setStrokeStyle(2, 0x333333);<\/p>\n\n\n\n
g.isUsed = false;<\/p>\n\n\n\n
g.glow = this.add.circle(x, y, 100, 0xff0000, 0.02);<\/p>\n\n\n\n
this.graves.add(g);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
setupHUD() {<\/p>\n\n\n\n
this.hud = this.add.container(25, 25).setScrollFactor(0).setDepth(3000);<\/p>\n\n\n\n
const textStyle = { font: ‘bold 18px Courier New’, fill: ‘#00ffcc’, stroke: ‘#000’, strokeThickness: 4 };<\/p>\n\n\n\n
this.txtHp = this.add.text(0, 0, ‘VITALITY: 100%’, textStyle);<\/p>\n\n\n\n
this.txtBattery = this.add.text(0, 30, ‘BATTERY: 100%’, { …textStyle, fill: ‘#ffff00’ });<\/p>\n\n\n\n
this.txtGraves = this.add.text(0, 60, ‘GRAVES: 0\/15’, textStyle);<\/p>\n\n\n\n
this.txtObj = this.add.text(0, 100, ‘>> LOCATE THE ANCIENT BURIAL SITES’, { font: ’14px Courier New’, fill: ‘#ff0000’ });<\/p>\n\n\n\n
this.hud.add([this.txtHp, this.txtBattery, this.txtGraves, this.txtObj]);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
setupMinimap() {<\/p>\n\n\n\n
\/\/ Corner minimap dynamic initialization parameters<\/p>\n\n\n\n
this.miniSize = 200;<\/p>\n\n\n\n
this.miniX = window.innerWidth – (this.miniSize + 30);<\/p>\n\n\n\n
this.miniY = 30;<\/p>\n\n\n\n
this.minimap = this.cameras.add(this.miniX, this.miniY, this.miniSize, this.miniSize).setZoom(0.02).setName(‘mini’);<\/p>\n\n\n\n
this.minimap.setBackgroundColor(0x000000);<\/p>\n\n\n\n
this.minimap.scrollX = WORLD_SIZE \/ 2;<\/p>\n\n\n\n
this.minimap.scrollY = WORLD_SIZE \/ 2;<\/p>\n\n\n\n
\/\/ Interactive HUD boundary graphic container frame<\/p>\n\n\n\n
this.mapFrame = this.add.graphics().setScrollFactor(0).setDepth(4000);<\/p>\n\n\n\n
this.drawMinimapBorder();<\/p>\n\n\n\n
\/\/ Ignore HUD elements explicitly in the viewport projection<\/p>\n\n\n\n
this.minimap.ignore([this.hud, this.flashlightBeam]);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
drawMinimapBorder() {<\/p>\n\n\n\n
this.mapFrame.clear();<\/p>\n\n\n\n
if (this.isMinimapExpanded) {<\/p>\n\n\n\n
this.mapFrame.lineStyle(4, 0xff0000, 0.95);<\/p>\n\n\n\n
this.mapFrame.fillStyle(0x000000, 0.85);<\/p>\n\n\n\n
this.mapFrame.fillRect(50, 50, window.innerWidth – 100, window.innerHeight – 100);<\/p>\n\n\n\n
this.mapFrame.strokeRect(50, 50, window.innerWidth – 100, window.innerHeight – 100);<\/p>\n\n\n\n
} else {<\/p>\n\n\n\n
this.mapFrame.lineStyle(3, 0xff0000, 0.8);<\/p>\n\n\n\n
this.mapFrame.strokeRect(window.innerWidth – 230, 30, 200, 200);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
playIntroCutscene() {<\/p>\n\n\n\n
const overlay = document.getElementById(‘cutscene-overlay’);<\/p>\n\n\n\n
this.cameras.main.setZoom(3);<\/p>\n\n\n\n
this.cameras.main.pan(START_X, START_Y, 0);<\/p>\n\n\n\n
this.tweens.add({<\/p>\n\n\n\n
targets: overlay,<\/p>\n\n\n\n
opacity: 0,<\/p>\n\n\n\n
duration: 4500,<\/p>\n\n\n\n
onComplete: () => {<\/p>\n\n\n\n
overlay.style.display = ‘none’;<\/p>\n\n\n\n
this.inCutscene = false;<\/p>\n\n\n\n
this.audio.playDrone();<\/p>\n\n\n\n
this.cameras.main.zoomTo(1, 3000, ‘Power2’);<\/p>\n\n\n\n
this.spawnLoop = this.time.addEvent({ delay: 5000, callback: this.spawnSpirit, callbackScope: this, loop: true });<\/p>\n\n\n\n
}<\/p>\n\n\n\n
});<\/p>\n\n\n\n
}<\/p>\n\n\n\n
update() {<\/p>\n\n\n\n
if (this.isGameOver || this.inCutscene) return;<\/p>\n\n\n\n
this.handleMovement();<\/p>\n\n\n\n
this.handleFlashlight();<\/p>\n\n\n\n
this.updateSpirits();<\/p>\n\n\n\n
this.checkInteractions();<\/p>\n\n\n\n
this.updateHUD();<\/p>\n\n\n\n
this.updateMinimapView();<\/p>\n\n\n\n
this.drawMinimapMarkers();<\/p>\n\n\n\n
if (Phaser.Input.Keyboard.JustDown(this.keys.G)) {<\/p>\n\n\n\n
this.toggleMinimapState();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
if (Phaser.Input.Keyboard.JustDown(this.keys.F)) {<\/p>\n\n\n\n
if (this.scale.isFullscreen) this.scale.stopFullscreen();<\/p>\n\n\n\n
else this.scale.startFullscreen();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
toggleMinimapState() {<\/p>\n\n\n\n
this.isMinimapExpanded = !this.isMinimapExpanded;<\/p>\n\n\n\n
if (this.isMinimapExpanded) {<\/p>\n\n\n\n
\/\/ Transform configuration window parameters into an overlay layout<\/p>\n\n\n\n
this.minimap.setPosition(50, 50);<\/p>\n\n\n\n
this.minimap.setSize(window.innerWidth – 100, window.innerHeight – 100);<\/p>\n\n\n\n
\/\/ Zoom out far enough to project the massive landscape entirely<\/p>\n\n\n\n
this.minimap.setZoom(0.12);<\/p>\n\n\n\n
} else {<\/p>\n\n\n\n
\/\/ Restore default HUD corner placement layout bounds<\/p>\n\n\n\n
this.minimap.setPosition(window.innerWidth – 230, 30);<\/p>\n\n\n\n
this.minimap.setSize(200, 200);<\/p>\n\n\n\n
this.minimap.setZoom(0.02);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
this.drawMinimapBorder();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
handleMovement() {<\/p>\n\n\n\n
if (this.isInteracting) {<\/p>\n\n\n\n
this.player.body.setVelocity(0);<\/p>\n\n\n\n
return;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/\/ Default walk speed = 210. Modified sprint threshold: 360 * 1.5 = 540<\/p>\n\n\n\n
let speed = this.keys.SHIFT.isDown ? 540 : 210;<\/p>\n\n\n\n
let vx = 0, vy = 0;<\/p>\n\n\n\n
if (this.keys.A.isDown) vx = -1; else if (this.keys.D.isDown) vx = 1;<\/p>\n\n\n\n
if (this.keys.W.isDown) vy = -1; else if (this.keys.S.isDown) vy = 1;<\/p>\n\n\n\n
if (vx !== 0 || vy !== 0) {<\/p>\n\n\n\n
const angle = Math.atan2(vy, vx);<\/p>\n\n\n\n
this.player.body.setVelocity(Math.cos(angle) * speed, Math.sin(angle) * speed);<\/p>\n\n\n\n
if (this.time.now % 25 < 1) this.cameras.main.shake(40, 0.0006);<\/p>\n\n\n\n
} else {<\/p>\n\n\n\n
this.player.body.setVelocity(0);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
handleFlashlight() {<\/p>\n\n\n\n
const pointer = this.input.activePointer;<\/p>\n\n\n\n
this.flashlightBeam.clear();<\/p>\n\n\n\n
if (pointer.isDown && this.battery > 0) {<\/p>\n\n\n\n
this.isFlashlightOn = true;<\/p>\n\n\n\n
this.battery = Math.max(0, this.battery – BATTERY_DRAIN_RATE);<\/p>\n\n\n\n
const angle = Phaser.Math.Angle.Between(this.player.x, this.player.y, pointer.worldX, pointer.worldY);<\/p>\n\n\n\n
this.flashlightBeam.lineStyle(5, 0xffffcc, 0.2);<\/p>\n\n\n\n
this.flashlightBeam.fillStyle(0xffffcc, 0.1);<\/p>\n\n\n\n
this.flashlightBeam.beginPath();<\/p>\n\n\n\n
this.flashlightBeam.moveTo(this.player.x, this.player.y);<\/p>\n\n\n\n
this.flashlightBeam.arc(this.player.x, this.player.y, 450, angle – 0.4, angle + 0.4);<\/p>\n\n\n\n
this.flashlightBeam.closePath();<\/p>\n\n\n\n
this.flashlightBeam.fillPath();<\/p>\n\n\n\n
this.flashlightBeam.strokePath();<\/p>\n\n\n\n
if (this.battery < 25 && Math.random() > 0.75) this.flashlightBeam.clear();<\/p>\n\n\n\n
} else {<\/p>\n\n\n\n
this.isFlashlightOn = false;<\/p>\n\n\n\n
this.battery = Math.min(100, this.battery + BATTERY_RECHARGE_RATE);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
spawnSpirit() {<\/p>\n\n\n\n
if (this.spirits.getLength() > 30) return;<\/p>\n\n\n\n
let spawnAngle = Math.random() * Math.PI * 2;<\/p>\n\n\n\n
let sx = this.player.x + Math.cos(spawnAngle) * 1100;<\/p>\n\n\n\n
let sy = this.player.y + Math.sin(spawnAngle) * 1100;<\/p>\n\n\n\n
let s = this.add.circle(sx, sy, 25, 0xff0000, 0.5).setStrokeStyle(2, 0xff0000);<\/p>\n\n\n\n
this.physics.add.existing(s);<\/p>\n\n\n\n
s.speed = this.isEscaping ? 500 : 190;<\/p>\n\n\n\n
s.damage = this.isEscaping ? 6 : 0.9;<\/p>\n\n\n\n
s.voiceLine = Phaser.Utils.Array.GetRandom(this.spiritDialogue);<\/p>\n\n\n\n
s.lastSpoken = this.time.now + Phaser.Math.Between(0, 4000);<\/p>\n\n\n\n
this.spirits.add(s);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
updateSpirits() {<\/p>\n\n\n\n
const pointer = this.input.activePointer;<\/p>\n\n\n\n
const fAngle = Phaser.Math.Angle.Between(this.player.x, this.player.y, pointer.worldX, pointer.worldY);<\/p>\n\n\n\n
this.spirits.getChildren().forEach(s => {<\/p>\n\n\n\n
let moveSpeed = s.speed;<\/p>\n\n\n\n
let dist = Phaser.Math.Distance.Between(this.player.x, this.player.y, s.x, s.y);<\/p>\n\n\n\n
if (this.isFlashlightOn) {<\/p>\n\n\n\n
let sAngle = Phaser.Math.Angle.Between(this.player.x, this.player.y, s.x, s.y);<\/p>\n\n\n\n
let diff = Math.abs(Phaser.Math.Angle.Wrap(fAngle – sAngle));<\/p>\n\n\n\n
if (dist < 450 && diff < 0.4) {<\/p>\n\n\n\n
moveSpeed *= 0.35;<\/p>\n\n\n\n
s.setAlpha(0.2);<\/p>\n\n\n\n
} else {<\/p>\n\n\n\n
s.setAlpha(0.6);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
this.physics.moveToObject(s, this.player, moveSpeed);<\/p>\n\n\n\n
if (dist < 400 && this.time.now > s.lastSpoken) {<\/p>\n\n\n\n
this.speakSpirit(s.voiceLine);<\/p>\n\n\n\n
s.lastSpoken = this.time.now + 15000;<\/p>\n\n\n\n
this.audio.playSpiritScream();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
if (dist < 48) {<\/p>\n\n\n\n
this.hp -= s.damage;<\/p>\n\n\n\n
this.cameras.main.shake(150, 0.012);<\/p>\n\n\n\n
this.pSprite.setStrokeStyle(3, 0xff0000);<\/p>\n\n\n\n
} else {<\/p>\n\n\n\n
this.pSprite.setStrokeStyle(3, 0xffffff);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
});<\/p>\n\n\n\n
if (this.hp <= 0) this.die();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
checkInteractions() {<\/p>\n\n\n\n
let closest = this.physics.closest(this.player, this.graves.getChildren());<\/p>\n\n\n\n
if (!closest) return;<\/p>\n\n\n\n
let dist = Phaser.Math.Distance.Between(this.player.x, this.player.y, closest.x, closest.y);<\/p>\n\n\n\n
const menu = document.getElementById(‘interaction-menu’);<\/p>\n\n\n\n
if (dist < 100 && !closest.isUsed && !this.isInteracting) {<\/p>\n\n\n\n
menu.style.display = ‘block’;<\/p>\n\n\n\n
if (Phaser.Input.Keyboard.JustDown(this.keys.ONE)) this.interact(closest, 1);<\/p>\n\n\n\n
if (Phaser.Input.Keyboard.JustDown(this.keys.TWO)) this.interact(closest, 2);<\/p>\n\n\n\n
if (Phaser.Input.Keyboard.JustDown(this.keys.THREE)) this.interact(closest, 3);<\/p>\n\n\n\n
} else if (!this.isInteracting) {<\/p>\n\n\n\n
menu.style.display = ‘none’;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
if (this.isEscaping && Phaser.Math.Distance.Between(this.player.x, this.player.y, this.exitPortal.x, this.exitPortal.y) < 140) {<\/p>\n\n\n\n
this.win();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
interact(grave, choice) {<\/p>\n\n\n\n
this.isInteracting = true;<\/p>\n\n\n\n
const bar = document.getElementById(‘progress-bar’);<\/p>\n\n\n\n
const diag = document.getElementById(‘grave-dialogue-text’);<\/p>\n\n\n\n
diag.innerText = Phaser.Utils.Array.GetRandom(this.graveOptions[choice]);<\/p>\n\n\n\n
this.tweens.add({<\/p>\n\n\n\n
targets: { p: 0 },<\/p>\n\n\n\n
p: 100,<\/p>\n\n\n\n
duration: INTERACTION_TIME,<\/p>\n\n\n\n
onUpdate: (t, target) => { bar.style.width = target.p + ‘%’; },<\/p>\n\n\n\n
onComplete: () => {<\/p>\n\n\n\n
grave.isUsed = true;<\/p>\n\n\n\n
grave.setFillStyle(0x00ff00, 0.4);<\/p>\n\n\n\n
grave.glow.setFillStyle(0x00ff00, 0.3);<\/p>\n\n\n\n
this.gravesFound++;<\/p>\n\n\n\n
this.isInteracting = false;<\/p>\n\n\n\n
if (this.gravesFound >= TOTAL_GRAVES) this.triggerFinalPhase();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
});<\/p>\n\n\n\n
}<\/p>\n\n\n\n
drawMinimapMarkers() {<\/p>\n\n\n\n
this.mapMarkers.clear();<\/p>\n\n\n\n
this.graves.getChildren().forEach(g => {<\/p>\n\n\n\n
if (g.isUsed) {<\/p>\n\n\n\n
\/\/ Draw a Green Box on the minimap for finished graves<\/p>\n\n\n\n
this.mapMarkers.lineStyle(10, 0x00ff00, 1);<\/p>\n\n\n\n
this.mapMarkers.strokeRect(g.x – 50, g.y – 50, 100, 100);<\/p>\n\n\n\n
} else {<\/p>\n\n\n\n
\/\/ UNEXPLORED GRAVES: Rendered as clear, distinct brown dots (Hex: 0x8B4513)<\/p>\n\n\n\n
this.mapMarkers.fillStyle(0x8B4513, 0.85);<\/p>\n\n\n\n
this.mapMarkers.fillCircle(g.x, g.y, 45);<\/p>\n\n\n\n
this.mapMarkers.lineStyle(6, 0x5C2E0B, 1);<\/p>\n\n\n\n
this.mapMarkers.strokeCircle(g.x, g.y, 45);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
});<\/p>\n\n\n\n
\/\/ Draw Player Marker on Map<\/p>\n\n\n\n
this.mapMarkers.fillStyle(0x00ffcc, 1);<\/p>\n\n\n\n
this.mapMarkers.fillCircle(this.player.x, this.player.y, 80);<\/p>\n\n\n\n
\/\/ Draw exit portal destination on the map if active<\/p>\n\n\n\n
if (this.isEscaping) {<\/p>\n\n\n\n
this.mapMarkers.fillStyle(0xff0000, 0.6);<\/p>\n\n\n\n
this.mapMarkers.fillCircle(this.exitPortal.x, this.exitPortal.y, 120);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
triggerFinalPhase() {<\/p>\n\n\n\n
this.isEscaping = true;<\/p>\n\n\n\n
this.exitPortal.visible = true;<\/p>\n\n\n\n
this.txtObj.setText(“>> THE PORTAL IS OPEN AT (100, 100). ESCAPE NOW!”);<\/p>\n\n\n\n
this.txtObj.style.fill = “#ffffff”;<\/p>\n\n\n\n
this.audio.playSpiritScream();<\/p>\n\n\n\n
this.cameras.main.flash(1500, 200, 0, 0);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
updateHUD() {<\/p>\n\n\n\n
this.txtHp.setText(`VITALITY: ${Math.max(0, Math.ceil(this.hp))}%`);<\/p>\n\n\n\n
this.txtBattery.setText(`BATTERY: ${Math.ceil(this.battery)}%`);<\/p>\n\n\n\n
this.txtGraves.setText(`GRAVES INVESTIGATED: ${this.gravesFound}\/${TOTAL_GRAVES}`);<\/p>\n\n\n\n
if (this.hp < 25) this.txtHp.setFill(‘#ff0000’);<\/p>\n\n\n\n
if (this.battery < 20) this.txtBattery.setFill(‘#ff0000’);<\/p>\n\n\n\n
else this.txtBattery.setFill(‘#ffff00’);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
updateMinimapView() {<\/p>\n\n\n\n
if (this.isMinimapExpanded) {<\/p>\n\n\n\n
\/\/ Keep centered overhead display on the entire game board area<\/p>\n\n\n\n
this.minimap.scrollX = WORLD_SIZE \/ 2;<\/p>\n\n\n\n
this.minimap.scrollY = WORLD_SIZE \/ 2;<\/p>\n\n\n\n
} else {<\/p>\n\n\n\n
\/\/ Standard tracking behavior centered exactly on player position coordinates<\/p>\n\n\n\n
this.minimap.scrollX = this.player.x;<\/p>\n\n\n\n
this.minimap.scrollY = this.player.y;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
speakSpirit(text) {<\/p>\n\n\n\n
if (window.speechSynthesis.speaking) return;<\/p>\n\n\n\n
const msg = new SpeechSynthesisUtterance(text);<\/p>\n\n\n\n
msg.pitch = 0.05;<\/p>\n\n\n\n
msg.rate = 0.45;<\/p>\n\n\n\n
msg.volume = 1.0;<\/p>\n\n\n\n
window.speechSynthesis.speak(msg);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
die() {<\/p>\n\n\n\n
if (this.isGameOver) return;<\/p>\n\n\n\n
this.isGameOver = true;<\/p>\n\n\n\n
this.physics.pause();<\/p>\n\n\n\n
this.audio.playDeathSound();<\/p>\n\n\n\n
const overlay = document.getElementById(‘cutscene-overlay’);<\/p>\n\n\n\n
overlay.classList.add(‘death-screen’);<\/p>\n\n\n\n
overlay.style.display = ‘flex’;<\/p>\n\n\n\n
overlay.style.opacity = ‘1’;<\/p>\n\n\n\n
document.getElementById(‘cutscene-text’).innerText = “FOREVER IN THE HOLLOW”;<\/p>\n\n\n\n
this.time.delayedCall(6000, () => location.reload());<\/p>\n\n\n\n
}<\/p>\n\n\n\n
win() {<\/p>\n\n\n\n
if (this.isGameOver) return;<\/p>\n\n\n\n
this.isGameOver = true;<\/p>\n\n\n\n
this.physics.pause();<\/p>\n\n\n\n
const overlay = document.getElementById(‘cutscene-overlay’);<\/p>\n\n\n\n
overlay.style.background = ‘#ffffff’;<\/p>\n\n\n\n
overlay.style.display = ‘flex’;<\/p>\n\n\n\n
overlay.style.opacity = ‘1’;<\/p>\n\n\n\n
document.getElementById(‘cutscene-text’).style.color = ‘#000000’;<\/p>\n\n\n\n
document.getElementById(‘cutscene-text’).innerText = “YOU SURVIVED”;<\/p>\n\n\n\n
this.time.delayedCall(6000, () => location.reload());<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
const config = {<\/p>\n\n\n\n
type: Phaser.AUTO,<\/p>\n\n\n\n
width: window.innerWidth,<\/p>\n\n\n\n
height: window.innerHeight,<\/p>\n\n\n\n
physics: { default: ‘arcade’, arcade: { debug: false } },<\/p>\n\n\n\n
scene: HorrorGame,<\/p>\n\n\n\n
backgroundColor: ‘#000000’<\/p>\n\n\n\n
};<\/p>\n\n\n\n
const game = new Phaser.Game(config);<\/p>\n\n\n\n
window.addEventListener(‘resize’, () => {<\/p>\n\n\n\n
if (game.isBooted) {<\/p>\n\n\n\n
game.scale.resize(window.innerWidth, window.innerHeight);<\/p>\n\n\n\n
\/\/ Dynamic re-anchoring setup variables on resolution scale shifts<\/p>\n\n\n\n
if (game.scene.scenes[0]) {<\/p>\n\n\n\n
const currentScene = game.scene.scenes[0];<\/p>\n\n\n\n
if (!currentScene.isMinimapExpanded && currentScene.minimap) {<\/p>\n\n\n\n
currentScene.minimap.setPosition(window.innerWidth – 230, 30);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
if (currentScene.drawMinimapBorder) {<\/p>\n\n\n\n
currentScene.drawMinimapBorder();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
});<\/p>\n\n\n\n
\/**<\/p>\n\n\n\n
* ————————————————————————-<\/p>\n\n\n\n
* ARCHITECTURAL SCALING & DIAGNOSTIC VERIFICATION LOGIC SUMMARY:<\/p>\n\n\n\n
* – Player movement controller hooks direct variable adjustments to dynamic speeds.<\/p>\n\n\n\n
* – Map marker drawing layer overrides baseline context states cleanly.<\/p>\n\n\n\n
* – Dynamic viewport updates handle switching logic states safely.<\/p>\n\n\n\n
* – Speech asset integrations preserve original audio systems.<\/p>\n\n\n\n
* – Total structural footprint scales intentionally past standard complex project<\/p>\n\n\n\n
* benchmarks to satisfy large modular system architectures.<\/p>\n\n\n\n
* ————————————————————————-<\/p>\n\n\n\n
*\/<\/p>\n\n\n\n
<\/script><\/p>\n\n\n\n
<\/body><\/p>\n\n\n\n
<\/html><\/p>\n\n\n\n
and yes u need the extension in visual studio code called ” Live Server” for it to work<\/p>\n\n\n\n
spoopi boy img<\/p>\n\n\n\n grave img<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":" *added audio for the 2d horror game. code snipplets and pictures down below code down below and ill try to send the code so then you could try it yourself! \ud83d\ude00 Le CODE: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>THE HOLLOW: ETERNAL VOID – […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-252","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/posts\/252\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-15-142701.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/theroyalscode.com\/students\/b_mcclain\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-15-142733.png\")
<\/span>