aharrison-fuller/doom-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add browser-based Doom clone with raycasting engine

Browse Source 
Built a complete FPS game playable in the browser using vanilla JS and
HTML5 Canvas. Features a raycasting renderer with 8 textured wall types,
3 weapons (pistol, shotgun, plasma gun), 3 enemy types with AI
(imp, demon, baron), 3 levels of increasing difficulty, HUD with
minimap, pickups, doors, explosive barrels, and procedural audio.
Includes GitHub Actions workflow for GitHub Pages deployment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
aharrison-fuller
2026-03-16 21:27:43 +00:00
co-authored by Claude Opus 4.6
commit c55d7a7475
15 changed files with 3123 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+94
View File
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOOM Clone</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<canvas id="game-canvas"></canvas>
<div id="title-screen">
<h1>DOOM</h1>
<h2>CLONE</h2>
<p class="subtitle">A Browser-Based FPS</p>
<div class="menu">
<button id="btn-new-game" class="menu-btn">NEW GAME</button>
<button id="btn-controls" class="menu-btn">CONTROLS</button>
</div>
<div id="controls-info" class="hidden">
<p>WASD - Move</p>
<p>Mouse - Look</p>
<p>Left Click - Shoot</p>
<p>1/2/3 - Switch Weapons</p>
<p>E - Open Doors / Interact</p>
<p>ESC - Pause</p>
</div>
</div>
<div id="hud" class="hidden">
<div id="hud-left">
<div class="hud-item">
<span class="hud-label">HEALTH</span>
<div class="hud-bar"><div id="health-bar" class="bar-fill health-fill"></div></div>
<span id="health-value" class="hud-value">100</span>
</div>
<div class="hud-item">
<span class="hud-label">ARMOR</span>
<div class="hud-bar"><div id="armor-bar" class="bar-fill armor-fill"></div></div>
<span id="armor-value" class="hud-value">0</span>
</div>
</div>
<div id="hud-center">
<div id="crosshair">+</div>
<div id="weapon-display"></div>
<div id="damage-overlay" class="hidden"></div>
</div>
<div id="hud-right">
<div class="hud-item">
<span class="hud-label">AMMO</span>
<span id="ammo-value" class="hud-value ammo-text">999</span>
</div>
<div class="hud-item">
<span class="hud-label">WEAPON</span>
<span id="weapon-name" class="hud-value weapon-text">PISTOL</span>
</div>
<div class="hud-item">
<span class="hud-label">KILLS</span>
<span id="kills-value" class="hud-value">0</span>
</div>
</div>
</div>
<div id="minimap-container" class="hidden">
<canvas id="minimap-canvas"></canvas>
</div>
<div id="message-display" class="hidden"></div>
<div id="level-complete" class="hidden">
<h2>LEVEL COMPLETE</h2>
<p id="level-stats"></p>
<button id="btn-next-level" class="menu-btn">NEXT LEVEL</button>
</div>
<div id="game-over" class="hidden">
<h2>YOU DIED</h2>
<p>Press ENTER to restart</p>
</div>
<div id="game-won" class="hidden">
<h2>VICTORY!</h2>
<p>You have conquered all levels!</p>
<p id="final-stats"></p>
<button id="btn-play-again" class="menu-btn">PLAY AGAIN</button>
</div>
</div>
<script src="js/constants.js"></script>
<script src="js/textures.js"></script>
<script src="js/sprites.js"></script>
<script src="js/levels.js"></script>
<script src="js/audio.js"></script>
<script src="js/raycaster.js"></script>
<script src="js/weapons.js"></script>
<script src="js/enemies.js"></script>
<script src="js/player.js"></script>
<script src="js/game.js"></script>
<script src="js/main.js"></script>
</body>
</html>