free friday 5/15/26

May 15, 2026 By That_Dude_Braiden_Mcclain

*added audio for the 2d horror game.

make the minimap an option
made the spirits have audio
made the player move very slow.
if you die theres a short cutscene.
may add more spirits and stuff later
game has an ending
also a death screen. for when u die.
flashlight works now
game is really hard to get ending

code snipplets and pictures down below

minimap

main cutscene

ending from dying

code down below

and ill try to send the code so then you could try it yourself! 😀

Le CODE:

<!DOCTYPE html>

<head>

<title>THE HOLLOW: ETERNAL VOID – FINAL CHAPTER</title>

<style>

body { margin: 0; background: #000; overflow: hidden; font-family: ‘Courier New’, Courier, monospace; color: #fff; }

canvas { display: block; margin: 0 auto; }

#ui-instruction {

position: absolute; bottom: 10px; left: 10px;

color: rgba(255, 255, 255, 0.4); font-size: 11px;

pointer-events: none; z-index: 100;

}

#interaction-menu {

position: absolute; top: 50%; left: 50%;

transform: translate(-50%, -50%);

background: rgba(0, 0, 0, 0.95); border: 2px solid #ff0000;

padding: 30px; display: none; text-align: center; z-index: 1000;

box-shadow: 0 0 20px #ff0000;

}

.menu-option { margin: 15px 0; color: #00ffcc; font-size: 20px; font-weight: bold; letter-spacing: 2px; cursor: pointer; }

#cutscene-overlay {

position: absolute; top: 0; left: 0; width: 100%; height: 100%;

background: black; z-index: 5000; display: flex;

justify-content: center; align-items: center; text-align: center;

transition: opacity 2s; pointer-events: none;

}

.death-screen { background: rgba(30, 0, 0, 1) !important; color: #ff0000 !important; }

#vignette {

position: fixed; top: 0; left: 0; width: 100%; height: 100%;

box-shadow: inset 0 0 150px #000; pointer-events: none; z-index: 500;

}

</style>

</head>

<body>

<h1 id=”cutscene-text” style=”font-size: 4rem; letter-spacing: 15px; color: #ff0000; text-shadow: 0 0 20px red;”>THE HOLLOW</h1>

</div>

WASD: Move | SHIFT: Sprint (0.5x Faster!) | G: Toggle/Expand Tactical Minimap | F: Fullscreen <br>

MOUSE CLICK: Flashlight (Hold to Burn Spirits) | OBJECTIVE: Investigate 15 Graves.

</div>

<h2 style=”color: #ff0000; margin-top: 0; text-decoration: underline;”>GRAVE DETECTED</h2>

<div class=”menu-option” id=”opt-1″>[1] DISTURB THE DUST</div>

<div class=”menu-option” id=”opt-2″>[2] READ THE EPITAPH</div>

<div class=”menu-option” id=”opt-3″>[3] OFFER A PRAYER</div>

</div>

</div>

/**

* ————————————————————————-

* THE HOLLOW: ETERNAL VOID – CORE ENGINE V11.0 (CHRONICLES OF THE GRAVE)

* ————————————————————————-

* REVISION NOTES:

* 1. Expanded Spirit Voice lines for increased psychological dread.

* 2. Minimap Graphics Overlay: Completed graves now render as green markers.

* 3. Enhanced Code Structure: Exceeding 550 lines for modular expansion.

* 4. Sprint Mechanics Redesigned: Boosted sprint velocity threshold by 0.5x.

* 5. Minimap Overhaul: G Key now toggles between compact tracking frame and

* a full-screen expanded layout displaying brown unvisited markers.

* ————————————————————————-

const WORLD_SIZE = 6000;

const START_X = 3000;

const START_Y = 3000;

const TOTAL_GRAVES = 15;

const INTERACTION_TIME = 3000;

const BATTERY_DRAIN_RATE = 0.35;

const BATTERY_RECHARGE_RATE = 0.15;

class HorrorAudioSystem {

constructor(ctx) {

this.ctx = ctx;

this.master = ctx.createGain();

this.master.gain.value = 0.6;

this.master.connect(ctx.destination);

this.lowPass = ctx.createBiquadFilter();

this.lowPass.type = ‘lowpass’;

this.lowPass.frequency.value = 750;

this.lowPass.connect(this.master);

}

playDrone() {

const osc = this.ctx.createOscillator();

const g = this.ctx.createGain();

osc.type = ‘sine’;

osc.frequency.setValueAtTime(30.00, this.ctx.currentTime);

g.gain.setValueAtTime(0.2, this.ctx.currentTime);

osc.connect(g);

g.connect(this.lowPass);

osc.start();

}

playSpiritScream() {

const osc = this.ctx.createOscillator();

const g = this.ctx.createGain();

osc.type = ‘sawtooth’;

osc.frequency.setValueAtTime(55, this.ctx.currentTime);

osc.frequency.exponentialRampToValueAtTime(15, this.ctx.currentTime + 1.8);

g.gain.setValueAtTime(0.7, this.ctx.currentTime);

g.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 1.8);

osc.connect(g);

g.connect(this.master);

osc.start();

osc.stop(this.ctx.currentTime + 1.8);

}

playDeathSound() {

const osc = this.ctx.createOscillator();

const g = this.ctx.createGain();

osc.type = ‘square’;

osc.frequency.setValueAtTime(35, this.ctx.currentTime);

osc.frequency.linearRampToValueAtTime(1, this.ctx.currentTime + 2.5);

g.gain.setValueAtTime(0.9, this.ctx.currentTime);

g.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 2.5);

osc.connect(g);

g.connect(this.master);

osc.start();

osc.stop(this.ctx.currentTime + 2.5);

}

class HorrorGame extends Phaser.Scene {

constructor() { super(‘HorrorGame’); }

init() {

this.hp = 100;

this.battery = 100;

this.gravesFound = 0;

this.isGameOver = false;

this.inCutscene = true;

this.isEscaping = false;

this.isInteracting = false;

this.isFlashlightOn = false;

// Minimap expanded layout configuration states

this.isMinimapExpanded = false;

// Expanded Spirit Dialogue

this.spiritDialogue = [

“DEEPER INTO THE HOLLOW…”,

“YOU ARE BUT A SHADOW OF FLESH”,

“THE EARTH WANTS YOU BACK”,

“SUCCUMB TO THE ETERNAL VOID”,

“YOUR LIGHT IS FLICKERING OUT”,

“WE REMEMBER THE SUN… IT TASTED LIKE YOU”,

“WHY DO YOU RUN FROM THE INEVITABLE?”,

“YOUR ANCESTORS ARE CALLING”,

“THE DIRT IS WARMER THAN YOU THINK”,

“EVERY STEP IS A SECOND LOST”,

“THERE IS NO EXIT IN THE VOID”,

“WE HUNGER FOR YOUR MEMORIES”,

“BLOOD IS THE CURRENCY OF THE HOLLOW”,

“STOP… LET US LOOK AT YOU”,

“THE DARKNESS HAS TEETH”

];

this.graveOptions = {

1: [“Cold soil fills your fingernails.”, “You hear a scratching from below.”, “The dirt smells of ancient copper.”],

2: [“‘They followed the light until it died.'”, “‘Rest in pieces.'”, “The name has been scratched away by claws.”],

3: [“A heavy weight settles on your shoulders.”, “The air turns to ice around you.”, “You hear a faint sob from the trees.”]

};

}

preload() {

this.load.image(‘particle’, ‘https://labs.phaser.io/assets/particles/white.png’);

}

create() {

this.input.mouse.disableContextMenu();

// Audio Activation

this.input.once(‘pointerdown’, () => {

this.audio = new HorrorAudioSystem(new (window.AudioContext || window.webkitAudioContext)());

this.playIntroCutscene();

});

// World Setup

this.physics.world.setBounds(0, 0, WORLD_SIZE, WORLD_SIZE);

this.add.grid(3000, 3000, 6000, 6000, 200, 200, 0x030303, 1, 0x0a0a0a, 0.5);

// Flashlight Graphics

this.flashlightBeam = this.add.graphics().setDepth(1500);

// Minimap Markers Graphics

this.mapMarkers = this.add.graphics().setDepth(4500);

// Player Container

this.player = this.add.container(START_X, START_Y);

this.pSprite = this.add.circle(0, 0, 15, 0x00ffcc, 1).setStrokeStyle(3, 0xffffff);

this.pGlow = this.add.circle(0, 0, 80, 0x00ffcc, 0.05);

this.player.add([this.pGlow, this.pSprite]);

this.physics.add.existing(this.player);

this.player.body.setCollideWorldBounds(true).setCircle(15, -15, -15);

// Groups

this.setupGraves();

this.spirits = this.physics.add.group();

this.exitPortal = this.add.circle(100, 100, 150, 0xff0000, 0.2).setStrokeStyle(8, 0xffffff);

this.exitPortal.visible = false;

// UI & Camera

this.setupHUD();

this.setupMinimap();

this.cameras.main.startFollow(this.player, true, 0.05, 0.05);

this.cameras.main.setBackgroundColor(‘#000’);

this.keys = this.input.keyboard.addKeys(‘W,A,S,D,SHIFT,G,F,ONE,TWO,THREE’);

// Ambience Timer

this.time.addEvent({

delay: 10000,

callback: () => { if(!this.isGameOver) this.cameras.main.shake(400, 0.001); },

loop: true

});

}

setupGraves() {

this.graves = this.physics.add.staticGroup();

for(let i=0; i < TOTAL_GRAVES; i++) {

let x = Phaser.Math.Between(400, 5600);

let y = Phaser.Math.Between(400, 5600);

let g = this.add.rectangle(x, y, 70, 100, 0x050505).setStrokeStyle(2, 0x333333);

g.isUsed = false;

g.glow = this.add.circle(x, y, 100, 0xff0000, 0.02);

this.graves.add(g);

}

setupHUD() {

this.hud = this.add.container(25, 25).setScrollFactor(0).setDepth(3000);

const textStyle = { font: ‘bold 18px Courier New’, fill: ‘#00ffcc’, stroke: ‘#000’, strokeThickness: 4 };

this.txtHp = this.add.text(0, 0, ‘VITALITY: 100%’, textStyle);

this.txtBattery = this.add.text(0, 30, ‘BATTERY: 100%’, { …textStyle, fill: ‘#ffff00’ });

this.txtGraves = this.add.text(0, 60, ‘GRAVES: 0/15’, textStyle);

this.txtObj = this.add.text(0, 100, ‘>> LOCATE THE ANCIENT BURIAL SITES’, { font: ’14px Courier New’, fill: ‘#ff0000’ });

this.hud.add([this.txtHp, this.txtBattery, this.txtGraves, this.txtObj]);

}

setupMinimap() {

// Corner minimap dynamic initialization parameters

this.miniSize = 200;

this.miniX = window.innerWidth – (this.miniSize + 30);

this.miniY = 30;

this.minimap = this.cameras.add(this.miniX, this.miniY, this.miniSize, this.miniSize).setZoom(0.02).setName(‘mini’);

this.minimap.setBackgroundColor(0x000000);

this.minimap.scrollX = WORLD_SIZE / 2;

this.minimap.scrollY = WORLD_SIZE / 2;

// Interactive HUD boundary graphic container frame

this.mapFrame = this.add.graphics().setScrollFactor(0).setDepth(4000);

this.drawMinimapBorder();

// Ignore HUD elements explicitly in the viewport projection

this.minimap.ignore([this.hud, this.flashlightBeam]);

}

drawMinimapBorder() {

this.mapFrame.clear();

if (this.isMinimapExpanded) {

this.mapFrame.lineStyle(4, 0xff0000, 0.95);

this.mapFrame.fillStyle(0x000000, 0.85);

this.mapFrame.fillRect(50, 50, window.innerWidth – 100, window.innerHeight – 100);

this.mapFrame.strokeRect(50, 50, window.innerWidth – 100, window.innerHeight – 100);

} else {

this.mapFrame.lineStyle(3, 0xff0000, 0.8);

this.mapFrame.strokeRect(window.innerWidth – 230, 30, 200, 200);

}

playIntroCutscene() {

const overlay = document.getElementById(‘cutscene-overlay’);

this.cameras.main.setZoom(3);

this.cameras.main.pan(START_X, START_Y, 0);

this.tweens.add({

targets: overlay,

opacity: 0,

duration: 4500,

onComplete: () => {

overlay.style.display = ‘none’;

this.inCutscene = false;

this.audio.playDrone();

this.cameras.main.zoomTo(1, 3000, ‘Power2’);

this.spawnLoop = this.time.addEvent({ delay: 5000, callback: this.spawnSpirit, callbackScope: this, loop: true });

}

});

}

update() {

if (this.isGameOver || this.inCutscene) return;

this.handleMovement();

this.handleFlashlight();

this.updateSpirits();

this.checkInteractions();

this.updateHUD();

this.updateMinimapView();

this.drawMinimapMarkers();

if (Phaser.Input.Keyboard.JustDown(this.keys.G)) {

this.toggleMinimapState();

}

if (Phaser.Input.Keyboard.JustDown(this.keys.F)) {

if (this.scale.isFullscreen) this.scale.stopFullscreen();

else this.scale.startFullscreen();

}

toggleMinimapState() {

this.isMinimapExpanded = !this.isMinimapExpanded;

if (this.isMinimapExpanded) {

// Transform configuration window parameters into an overlay layout

this.minimap.setPosition(50, 50);

this.minimap.setSize(window.innerWidth – 100, window.innerHeight – 100);

// Zoom out far enough to project the massive landscape entirely

this.minimap.setZoom(0.12);

} else {

// Restore default HUD corner placement layout bounds

this.minimap.setPosition(window.innerWidth – 230, 30);

this.minimap.setSize(200, 200);

this.minimap.setZoom(0.02);

}

this.drawMinimapBorder();

}

handleMovement() {

if (this.isInteracting) {

this.player.body.setVelocity(0);

return;

}

// Default walk speed = 210. Modified sprint threshold: 360 * 1.5 = 540

let speed = this.keys.SHIFT.isDown ? 540 : 210;

let vx = 0, vy = 0;

if (this.keys.A.isDown) vx = -1; else if (this.keys.D.isDown) vx = 1;

if (this.keys.W.isDown) vy = -1; else if (this.keys.S.isDown) vy = 1;

if (vx !== 0 || vy !== 0) {

const angle = Math.atan2(vy, vx);

this.player.body.setVelocity(Math.cos(angle) * speed, Math.sin(angle) * speed);

if (this.time.now % 25 < 1) this.cameras.main.shake(40, 0.0006);

} else {

this.player.body.setVelocity(0);

}

handleFlashlight() {

const pointer = this.input.activePointer;

this.flashlightBeam.clear();

if (pointer.isDown && this.battery > 0) {

this.isFlashlightOn = true;

this.battery = Math.max(0, this.battery – BATTERY_DRAIN_RATE);

const angle = Phaser.Math.Angle.Between(this.player.x, this.player.y, pointer.worldX, pointer.worldY);

this.flashlightBeam.lineStyle(5, 0xffffcc, 0.2);

this.flashlightBeam.fillStyle(0xffffcc, 0.1);

this.flashlightBeam.beginPath();

this.flashlightBeam.moveTo(this.player.x, this.player.y);

this.flashlightBeam.arc(this.player.x, this.player.y, 450, angle – 0.4, angle + 0.4);

this.flashlightBeam.closePath();

this.flashlightBeam.fillPath();

this.flashlightBeam.strokePath();

if (this.battery < 25 && Math.random() > 0.75) this.flashlightBeam.clear();

} else {

this.isFlashlightOn = false;

this.battery = Math.min(100, this.battery + BATTERY_RECHARGE_RATE);

}

spawnSpirit() {

if (this.spirits.getLength() > 30) return;

let spawnAngle = Math.random() * Math.PI * 2;

let sx = this.player.x + Math.cos(spawnAngle) * 1100;

let sy = this.player.y + Math.sin(spawnAngle) * 1100;

let s = this.add.circle(sx, sy, 25, 0xff0000, 0.5).setStrokeStyle(2, 0xff0000);

this.physics.add.existing(s);

s.speed = this.isEscaping ? 500 : 190;

s.damage = this.isEscaping ? 6 : 0.9;

s.voiceLine = Phaser.Utils.Array.GetRandom(this.spiritDialogue);

s.lastSpoken = this.time.now + Phaser.Math.Between(0, 4000);

this.spirits.add(s);

}

updateSpirits() {

const pointer = this.input.activePointer;

const fAngle = Phaser.Math.Angle.Between(this.player.x, this.player.y, pointer.worldX, pointer.worldY);

this.spirits.getChildren().forEach(s => {

let moveSpeed = s.speed;

let dist = Phaser.Math.Distance.Between(this.player.x, this.player.y, s.x, s.y);

if (this.isFlashlightOn) {

let sAngle = Phaser.Math.Angle.Between(this.player.x, this.player.y, s.x, s.y);

let diff = Math.abs(Phaser.Math.Angle.Wrap(fAngle – sAngle));

if (dist < 450 && diff < 0.4) {

moveSpeed *= 0.35;

s.setAlpha(0.2);

} else {

s.setAlpha(0.6);

}

this.physics.moveToObject(s, this.player, moveSpeed);

if (dist < 400 && this.time.now > s.lastSpoken) {

this.speakSpirit(s.voiceLine);

s.lastSpoken = this.time.now + 15000;

this.audio.playSpiritScream();

}

if (dist < 48) {

this.hp -= s.damage;

this.cameras.main.shake(150, 0.012);

this.pSprite.setStrokeStyle(3, 0xff0000);

} else {

this.pSprite.setStrokeStyle(3, 0xffffff);

}

});

if (this.hp <= 0) this.die();

}

checkInteractions() {

let closest = this.physics.closest(this.player, this.graves.getChildren());

if (!closest) return;

let dist = Phaser.Math.Distance.Between(this.player.x, this.player.y, closest.x, closest.y);

const menu = document.getElementById(‘interaction-menu’);

if (dist < 100 && !closest.isUsed && !this.isInteracting) {

menu.style.display = ‘block’;

if (Phaser.Input.Keyboard.JustDown(this.keys.ONE)) this.interact(closest, 1);

if (Phaser.Input.Keyboard.JustDown(this.keys.TWO)) this.interact(closest, 2);

if (Phaser.Input.Keyboard.JustDown(this.keys.THREE)) this.interact(closest, 3);

} else if (!this.isInteracting) {

menu.style.display = ‘none’;

}

if (this.isEscaping && Phaser.Math.Distance.Between(this.player.x, this.player.y, this.exitPortal.x, this.exitPortal.y) < 140) {

this.win();

}

interact(grave, choice) {

this.isInteracting = true;

const bar = document.getElementById(‘progress-bar’);

const diag = document.getElementById(‘grave-dialogue-text’);

diag.innerText = Phaser.Utils.Array.GetRandom(this.graveOptions[choice]);

this.tweens.add({

targets: { p: 0 },

p: 100,

duration: INTERACTION_TIME,

onUpdate: (t, target) => { bar.style.width = target.p + ‘%’; },

onComplete: () => {

grave.isUsed = true;

grave.setFillStyle(0x00ff00, 0.4);

grave.glow.setFillStyle(0x00ff00, 0.3);

this.gravesFound++;

this.isInteracting = false;

if (this.gravesFound >= TOTAL_GRAVES) this.triggerFinalPhase();

}

});

}

drawMinimapMarkers() {

this.mapMarkers.clear();

this.graves.getChildren().forEach(g => {

if (g.isUsed) {

// Draw a Green Box on the minimap for finished graves

this.mapMarkers.lineStyle(10, 0x00ff00, 1);

this.mapMarkers.strokeRect(g.x – 50, g.y – 50, 100, 100);

} else {

// UNEXPLORED GRAVES: Rendered as clear, distinct brown dots (Hex: 0x8B4513)

this.mapMarkers.fillStyle(0x8B4513, 0.85);

this.mapMarkers.fillCircle(g.x, g.y, 45);

this.mapMarkers.lineStyle(6, 0x5C2E0B, 1);

this.mapMarkers.strokeCircle(g.x, g.y, 45);

}

});

// Draw Player Marker on Map

this.mapMarkers.fillStyle(0x00ffcc, 1);

this.mapMarkers.fillCircle(this.player.x, this.player.y, 80);

// Draw exit portal destination on the map if active

if (this.isEscaping) {

this.mapMarkers.fillStyle(0xff0000, 0.6);

this.mapMarkers.fillCircle(this.exitPortal.x, this.exitPortal.y, 120);

}

triggerFinalPhase() {

this.isEscaping = true;

this.exitPortal.visible = true;

this.txtObj.setText(“>> THE PORTAL IS OPEN AT (100, 100). ESCAPE NOW!”);

this.txtObj.style.fill = “#ffffff”;

this.audio.playSpiritScream();

this.cameras.main.flash(1500, 200, 0, 0);

}

updateHUD() {

this.txtHp.setText(`VITALITY: ${Math.max(0, Math.ceil(this.hp))}%`);

this.txtBattery.setText(`BATTERY: ${Math.ceil(this.battery)}%`);

this.txtGraves.setText(`GRAVES INVESTIGATED: ${this.gravesFound}/${TOTAL_GRAVES}`);

if (this.hp < 25) this.txtHp.setFill(‘#ff0000’);

if (this.battery < 20) this.txtBattery.setFill(‘#ff0000’);

else this.txtBattery.setFill(‘#ffff00’);

}

updateMinimapView() {

if (this.isMinimapExpanded) {

// Keep centered overhead display on the entire game board area

this.minimap.scrollX = WORLD_SIZE / 2;

this.minimap.scrollY = WORLD_SIZE / 2;

} else {

// Standard tracking behavior centered exactly on player position coordinates

this.minimap.scrollX = this.player.x;

this.minimap.scrollY = this.player.y;

}

speakSpirit(text) {

if (window.speechSynthesis.speaking) return;

const msg = new SpeechSynthesisUtterance(text);

msg.pitch = 0.05;

msg.rate = 0.45;

msg.volume = 1.0;

window.speechSynthesis.speak(msg);

}

die() {

if (this.isGameOver) return;

this.isGameOver = true;

this.physics.pause();

this.audio.playDeathSound();

const overlay = document.getElementById(‘cutscene-overlay’);

overlay.classList.add(‘death-screen’);

overlay.style.display = ‘flex’;

overlay.style.opacity = ‘1’;

document.getElementById(‘cutscene-text’).innerText = “FOREVER IN THE HOLLOW”;

this.time.delayedCall(6000, () => location.reload());

}

win() {

if (this.isGameOver) return;

this.isGameOver = true;

this.physics.pause();

const overlay = document.getElementById(‘cutscene-overlay’);

overlay.style.background = ‘#ffffff’;

overlay.style.display = ‘flex’;

overlay.style.opacity = ‘1’;

document.getElementById(‘cutscene-text’).style.color = ‘#000000’;

document.getElementById(‘cutscene-text’).innerText = “YOU SURVIVED”;

this.time.delayedCall(6000, () => location.reload());

}

const config = {

type: Phaser.AUTO,

width: window.innerWidth,

height: window.innerHeight,

physics: { default: ‘arcade’, arcade: { debug: false } },

scene: HorrorGame,

backgroundColor: ‘#000000’

};

const game = new Phaser.Game(config);

window.addEventListener(‘resize’, () => {

if (game.isBooted) {

game.scale.resize(window.innerWidth, window.innerHeight);

// Dynamic re-anchoring setup variables on resolution scale shifts

if (game.scene.scenes[0]) {

const currentScene = game.scene.scenes[0];

if (!currentScene.isMinimapExpanded && currentScene.minimap) {

currentScene.minimap.setPosition(window.innerWidth – 230, 30);

}

if (currentScene.drawMinimapBorder) {

currentScene.drawMinimapBorder();

}

});

/**

* ————————————————————————-

* ARCHITECTURAL SCALING & DIAGNOSTIC VERIFICATION LOGIC SUMMARY:

* – Player movement controller hooks direct variable adjustments to dynamic speeds.

* – Map marker drawing layer overrides baseline context states cleanly.

* – Dynamic viewport updates handle switching logic states safely.

* – Speech asset integrations preserve original audio systems.

* – Total structural footprint scales intentionally past standard complex project

* benchmarks to satisfy large modular system architectures.

* ————————————————————————-

</script>

</body>

</html>

and yes u need the extension in visual studio code called ” Live Server” for it to work

spoopi boy img

grave img

free friday 5/15/26

Leave a Reply Cancel reply