Hugging Face's logo

Spaces:
Greats
/
clone
Running

App Files Community
clone / index.html
Greats's picture
Greats
Add 2 files
848ea3b verified
raw
history blame contribute delete
40.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>DOOM Style Game</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
 body {
 margin: 0;
 overflow: hidden;
 background-color: #000;
 font-family: 'Courier New', monospace;
 color: white;
 touch-action: none;
 }
 #gameCanvas {
 display: block;
 width: 100%;
 height: 100%;
 }
 #ui {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 padding: 20px;
 box-sizing: border-box;
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
 display: flex;
 flex-direction: column;
 align-items: center;
 }
 #healthAmmo {
 display: flex;
 justify-content: space-between;
 width: 100%;
 max-width: 600px;
 margin-bottom: 10px;
 }
 #weapon {
 font-size: 24px;
 margin-bottom: 10px;
 text-shadow: 0 0 5px red;
 }
 #startScreen {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: red;
 text-align: center;
 z-index: 10;
 }
 #startButton {
 padding: 15px 30px;
 font-size: 20px;
 background-color: #8B0000;
 color: white;
 border: 2px solid #FF0000;
 border-radius: 5px;
 cursor: pointer;
 margin-top: 30px;
 font-family: 'Courier New', monospace;
 text-transform: uppercase;
 letter-spacing: 2px;
 }
 #startButton:hover {
 background-color: #FF0000;
 }
 #crosshair {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 20px;
 height: 20px;
 transform: translate(-50%, -50%);
 pointer-events: none;
 }
 #crosshair::before, #crosshair::after {
 content: '';
 position: absolute;
 background-color: red;
 }
 #crosshair::before {
 width: 20px;
 height: 2px;
 top: 9px;
 left: 0;
 }
 #crosshair::after {
 width: 2px;
 height: 20px;
 left: 9px;
 top: 0;
 }
 #gameOverScreen {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 display: none;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: red;
 text-align: center;
 z-index: 10;
 }
 #restartButton {
 padding: 15px 30px;
 font-size: 20px;
 background-color: #8B0000;
 color: white;
 border: 2px solid #FF0000;
 border-radius: 5px;
 cursor: pointer;
 margin-top: 30px;
 font-family: 'Courier New', monospace;
 text-transform: uppercase;
 letter-spacing: 2px;
 }
 #restartButton:hover {
 background-color: #FF0000;
 }
 #hud {
 position: absolute;
 top: 10px;
 left: 10px;
 font-size: 16px;
 color: white;
 text-shadow: 0 0 5px black;
 }
 #enemiesLeft {
 position: absolute;
 top: 10px;
 right: 10px;
 font-size: 16px;
 color: white;
 text-shadow: 0 0 5px black;
 }
 .health-bar, .ammo-bar {
 width: 200px;
 height: 20px;
 border: 2px solid #333;
 border-radius: 3px;
 overflow: hidden;
 position: relative;
 }
 .health-fill {
 height: 100%;
 background: linear-gradient(to right, #8B0000, #FF0000);
 transition: width 0.3s;
 }
 .ammo-fill {
 height: 100%;
 background: linear-gradient(to right, #006400, #00FF00);
 transition: width 0.3s;
 }
 #weaponImage {
 width: 200px;
 height: 100px;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 margin-bottom: 10px;
 }
 #bloodEffect {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(255, 0, 0, 0);
 pointer-events: none;
 transition: background-color 0.1s;
 z-index: 5;
 }
 #damageIndicator {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 24px;
 color: red;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s;
 text-shadow: 0 0 5px black;
 }
 </style>
</head>
<body>
 <canvas id="gameCanvas"></canvas>
 <div id="crosshair"></div>
 <div id="bloodEffect"></div>
 <div id="damageIndicator">HIT!</div>
<div id="hud">
 <div>Level: <span id="level">1</span></div>
 <div>Kills: <span id="kills">0</span></div>
 </div>
<div id="enemiesLeft">
 Enemies: <span id="enemiesCount">0</span>
 </div>
<div id="ui">
 <div id="weaponImage"></div>
 <div id="weapon">PISTOL</div>
 <div id="healthAmmo">
 <div>
 <div>HEALTH</div>
 <div class="health-bar">
 <div class="health-fill" id="healthBar"></div>
 </div>
 </div>
 <div>
 <div>AMMO</div>
 <div class="ammo-bar">
 <div class="ammo-fill" id="ammoBar"></div>
 </div>
 </div>
 </div>
 </div>
<div id="startScreen">
 <h1 class="text-4xl font-bold mb-4">DOOM STYLE GAME</h1>
 <p class="text-xl mb-8">KILL ALL DEMONS TO ADVANCE TO THE NEXT LEVEL</p>
 <p class="mb-2">WASD - Move</p>
 <p class="mb-2">Mouse - Look and Shoot</p>
 <p class="mb-2">R - Reload</p>
 <p class="mb-2">1-3 - Switch Weapons</p>
 <p class="mb-2">Space - Jump</p>
 <button id="startButton">START GAME</button>
 </div>
<div id="gameOverScreen">
 <h1 class="text-4xl font-bold mb-4">GAME OVER</h1>
 <p class="text-xl mb-2">You killed <span id="finalKills">0</span> demons</p>
 <p class="text-xl mb-8">Reached level <span id="finalLevel">1</span></p>
 <button id="restartButton">TRY AGAIN</button>
 </div>
<script>
 // Game setup
 const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d');
 const startScreen = document.getElementById('startScreen');
 const startButton = document.getElementById('startButton');
 const gameOverScreen = document.getElementById('gameOverScreen');
 const restartButton = document.getElementById('restartButton');
 const weaponImage = document.getElementById('weaponImage');
 const weaponDisplay = document.getElementById('weapon');
 const healthBar = document.getElementById('healthBar');
 const ammoBar = document.getElementById('ammoBar');
 const levelDisplay = document.getElementById('level');
 const killsDisplay = document.getElementById('kills');
 const enemiesCountDisplay = document.getElementById('enemiesCount');
 const finalKillsDisplay = document.getElementById('finalKills');
 const finalLevelDisplay = document.getElementById('finalLevel');
 const bloodEffect = document.getElementById('bloodEffect');
 const damageIndicator = document.getElementById('damageIndicator');
// Set canvas size
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
// Game state
 let gameRunning = false;
 let level = 1;
 let kills = 0;
 let enemiesLeft = 0;
// Player
 const player = {
 x: 1.5,
 y: 1.5,
 dirX: -1,
 dirY: 0,
 planeX: 0,
 planeY: 0.66,
 moveSpeed: 0.05,
 rotSpeed: 0.03,
 health: 100,
 weapons: [
 {
 name: "PISTOL",
 damage: 25,
 ammo: 12,
 maxAmmo: 12,
 reloadTime: 1000,
 fireRate: 500,
 range: 10,
 accuracy: 0.95,
 color: "#888",
 image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect x='20' y='40' width='120' height='20' fill='%23ccc'/%3E%3Crect x='140' y='30' width='40' height='40' fill='%23aaa'/%3E%3Crect x='180' y='40' width='10' height='20' fill='%23888'/%3E%3C/svg%3E"
 },
 {
 name: "SHOTGUN",
 damage: 50,
 ammo: 6,
 maxAmmo: 6,
 reloadTime: 1500,
 fireRate: 1000,
 range: 5,
 accuracy: 0.7,
 color: "#964B00",
 image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect x='20' y='40' width='150' height='20' fill='%23b87333'/%3E%3Crect x='170' y='20' width='20' height='60' fill='%238B4513'/%3E%3C/svg%3E"
 },
 {
 name: "CHAINGUN",
 damage: 15,
 ammo: 50,
 maxAmmo: 50,
 reloadTime: 2000,
 fireRate: 100,
 range: 15,
 accuracy: 0.85,
 color: "#333",
 image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect x='20' y='40' width='150' height='20' fill='%23444'/%3E%3Crect x='170' y='30' width='20' height='40' fill='%23222'/%3E%3Ccircle cx='40' cy='50' r='15' fill='%23555'/%3E%3C/svg%3E"
 }
 ],
 currentWeapon: 0,
 lastShot: 0,
 reloading: false,
 isMoving: false,
 isShooting: false,
 jumpHeight: 0,
 isJumping: false
 };
// Map (1 = wall, 0 = empty space)
 let map = [
 [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
 [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
 [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
 [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
 [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
 [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
 [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
 [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
 [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
 [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
 ];
// Wall textures (colors for simplicity)
 const wallTextures = [
 '#8B0000', // Red brick
 '#006400', // Green stone
 '#00008B', // Blue metal
 '#4B0082', // Purple tech
 '#8B4513' // Brown wood
 ];
// Enemies
 let enemies = [];
// Generate level
 function generateLevel() {
 // Clear previous enemies
 enemies = [];
// Generate maze-like map
 const size = 10 + level * 2;
 map = Array(size).fill().map(() => Array(size).fill(1));
// Carve out maze
 const stack = [];
 const visited = Array(size).fill().map(() => Array(size).fill(false));
// Start at player position
 player.x = 1.5;
 player.y = 1.5;
 map[1][1] = 0;
 visited[1][1] = true;
 stack.push([1, 1]);
while (stack.length > 0) {
 const [x, y] = stack[stack.length - 1];
 const directions = [
 [0, 1], [1, 0], [0, -1], [-1, 0]
 ].sort(() => Math.random() - 0.5);
let moved = false;
for (const [dx, dy] of directions) {
 const nx = x + dx * 2;
 const ny = y + dy * 2;
if (nx > 0 && nx < size - 1 && ny > 0 && ny < size - 1 && !visited[nx][ny]) {
 map[x + dx][y + dy] = 0;
 map[nx][ny] = 0;
 visited[nx][ny] = true;
 stack.push([nx, ny]);
 moved = true;
 break;
 }
 }
if (!moved) {
 stack.pop();
 }
 }
// Add some random walls
 for (let i = 1; i < size - 1; i++) {
 for (let j = 1; j < size - 1; j++) {
 if (map[i][j] === 0 && Math.random() < 0.1) {
 map[i][j] = 2 + Math.floor(Math.random() * (wallTextures.length - 1));
 }
 }
 }
// Place exit
 const exitX = size - 2;
 const exitY = size - 2;
 map[exitX][exitY] = 0;
// Place enemies
 enemiesLeft = 5 + level * 3;
 for (let i = 0; i < enemiesLeft; i++) {
 let x, y;
 do {
 x = 1 + Math.floor(Math.random() * (size - 2));
 y = 1 + Math.floor(Math.random() * (size - 2));
 } while (map[x][y] !== 0 || (x === 1 && y === 1) || (x === exitX && y === exitY));
enemies.push({
 x: x + 0.5,
 y: y + 0.5,
 health: 50 + level * 10,
 speed: 0.02 + level * 0.005,
 damage: 10 + level * 2,
 color: `hsl(${Math.random() * 60}, 100%, 50%)`,
 lastAttack: 0,
 attackCooldown: 1000,
 size: 0.5
 });
 }
// Update UI
 enemiesCountDisplay.textContent = enemiesLeft;
 }
// Raycasting
 function castRays() {
 const width = canvas.width;
 const height = canvas.height;
for (let x = 0; x < width; x++) {
 // Calculate ray position and direction
 const cameraX = 2 * x / width - 1;
 const rayDirX = player.dirX + player.planeX * cameraX;
 const rayDirY = player.dirY + player.planeY * cameraX;
// Which box of the map we're in
 let mapX = Math.floor(player.x);
 let mapY = Math.floor(player.y);
// Length of ray from current position to next x or y-side
 let sideDistX, sideDistY;
// Length of ray from one x or y-side to next x or y-side
 const deltaDistX = Math.abs(1 / rayDirX);
 const deltaDistY = Math.abs(1 / rayDirY);
// Direction to step in x or y direction (either +1 or -1)
 let stepX, stepY;
// Was a wall hit?
 let hit = false;
 // Was a wall hit that was NS or EW?
 let side;
 // Distance to wall
 let perpWallDist;
// Calculate step and initial sideDist
 if (rayDirX < 0) {
 stepX = -1;
 sideDistX = (player.x - mapX) * deltaDistX;
 } else {
 stepX = 1;
 sideDistX = (mapX + 1.0 - player.x) * deltaDistX;
 }
if (rayDirY < 0) {
 stepY = -1;
 sideDistY = (player.y - mapY) * deltaDistY;
 } else {
 stepY = 1;
 sideDistY = (mapY + 1.0 - player.y) * deltaDistY;
 }
// Perform DDA (Digital Differential Analysis)
 while (!hit) {
 // Jump to next map square, either in x-direction, or in y-direction
 if (sideDistX < sideDistY) {
 sideDistX += deltaDistX;
 mapX += stepX;
 side = 0;
 } else {
 sideDistY += deltaDistY;
 mapY += stepY;
 side = 1;
 }
// Check if ray has hit a wall
 if (mapX < 0 || mapX >= map.length || mapY < 0 || mapY >= map[0].length) {
 hit = true;
 } else if (map[mapX][mapY] > 0) {
 hit = true;
 }
 }
// Calculate distance projected on camera direction
 if (side === 0) {
 perpWallDist = (mapX - player.x + (1 - stepX) / 2) / rayDirX;
 } else {
 perpWallDist = (mapY - player.y + (1 - stepY) / 2) / rayDirY;
 }
// Calculate height of line to draw on screen
 let lineHeight = Math.floor(height / perpWallDist);
// Calculate lowest and highest pixel to fill in current stripe
 let drawStart = -lineHeight / 2 + height / 2;
 if (drawStart < 0) drawStart = 0;
 let drawEnd = lineHeight / 2 + height / 2;
 if (drawEnd >= height) drawEnd = height - 1;
// Choose wall color based on map value
 let color;
 if (mapX < 0 || mapX >= map.length || mapY < 0 || mapY >= map[0].length) {
 color = '#000';
 } else {
 const wallType = map[mapX][mapY];
 color = wallTextures[wallType - 1] || '#FFF';
 }
// Give x and y sides different brightness
 if (side === 1) {
 color = shadeColor(color, -30);
 }
// Draw the wall slice
 ctx.fillStyle = color;
 ctx.fillRect(x, drawStart + player.jumpHeight, 1, drawEnd - drawStart);
// Draw floor (simplified)
 ctx.fillStyle = '#333';
 ctx.fillRect(x, drawEnd + player.jumpHeight, 1, height - drawEnd);
 }
 }
// Draw enemies
 function drawEnemies() {
 const width = canvas.width;
 const height = canvas.height;
// Sort enemies by distance (for proper rendering order)
 enemies.sort((a, b) => {
 const distA = Math.pow(player.x - a.x, 2) + Math.pow(player.y - a.y, 2);
 const distB = Math.pow(player.x - b.x, 2) + Math.pow(player.y - b.y, 2);
 return distB - distA;
 });
for (const enemy of enemies) {
 // Calculate enemy position relative to player
 const relX = enemy.x - player.x;
 const relY = enemy.y - player.y;
// Transform enemy position with inverse camera matrix
 const invDet = 1.0 / (player.planeX * player.dirY - player.dirX * player.planeY);
 const transformX = invDet * (player.dirY * relX - player.dirX * relY);
 const transformY = invDet * (-player.planeY * relX + player.planeX * relY);
// Don't draw enemies behind the player
 if (transformY <= 0) continue;
// Calculate sprite position on screen
 const spriteScreenX = Math.floor((width / 2) * (1 + transformX / transformY));
// Calculate sprite dimensions
 const spriteHeight = Math.abs(Math.floor(height / transformY));
 const spriteWidth = spriteHeight;
// Calculate drawing coordinates
 let drawStartX = -spriteWidth / 2 + spriteScreenX;
 let drawEndX = spriteWidth / 2 + spriteScreenX;
 let drawStartY = -spriteHeight / 2 + height / 2;
 let drawEndY = spriteHeight / 2 + height / 2;
// Clamp to screen bounds
 if (drawStartX < 0) drawStartX = 0;
 if (drawEndX >= width) drawEndX = width - 1;
 if (drawStartY < 0) drawStartY = 0;
 if (drawEndY >= height) drawEndY = height - 1;
// Draw enemy
 for (let stripe = drawStartX; stripe < drawEndX; stripe++) {
 const texX = Math.floor((stripe - (-spriteWidth / 2 + spriteScreenX)) * enemy.size / spriteWidth);
if (transformY > 0 && stripe > 0 && stripe < width) {
 for (let y = drawStartY; y < drawEndY; y++) {
 const d = (y - (-spriteHeight / 2 + height / 2)) * 256 / spriteHeight;
 const texY = Math.floor(d * enemy.size / spriteHeight);
// Simple enemy drawing (just a colored rectangle)
 if (texX >= 0 && texX < enemy.size * 100 && texY >= 0 && texY < enemy.size * 100) {
 ctx.fillStyle = enemy.color;
 ctx.fillRect(stripe, y + player.jumpHeight, 1, 1);
 }
 }
 }
 }
 }
 }
// Draw weapon
 function drawWeapon() {
 const weapon = player.weapons[player.currentWeapon];
 weaponImage.style.backgroundImage = `url("${weapon.image}")`;
 weaponDisplay.textContent = weapon.name;
// Weapon bob when moving
 let bobOffset = 0;
 if (player.isMoving) {
 bobOffset = Math.sin(Date.now() / 100) * 5;
 }
// Weapon recoil when shooting
 let recoilOffset = 0;
 if (player.isShooting) {
 recoilOffset = Math.sin(Date.now() / 50) * 10;
 }
weaponImage.style.transform = `translateY(${bobOffset + recoilOffset}px)`;
 }
// Update HUD
 function updateHUD() {
 const weapon = player.weapons[player.currentWeapon];
 healthBar.style.width = `${player.health}%`;
 ammoBar.style.width = `${(weapon.ammo / weapon.maxAmmo) * 100}%`;
 levelDisplay.textContent = level;
 killsDisplay.textContent = kills;
 enemiesCountDisplay.textContent = enemiesLeft;
// Blood effect when hurt
 if (player.health < 30) {
 bloodEffect.style.backgroundColor = `rgba(255, 0, 0, ${0.3 - (player.health / 100)})`;
 } else {
 bloodEffect.style.backgroundColor = 'rgba(255, 0, 0, 0)';
 }
 }
// Move player
 function movePlayer() {
 if (!gameRunning) return;
// Movement speed
 const moveSpeed = player.moveSpeed;
 const rotSpeed = player.rotSpeed;
// Rotate left/right
 if (keys.ArrowLeft) {
 const oldDirX = player.dirX;
 player.dirX = player.dirX * Math.cos(rotSpeed) - player.dirY * Math.sin(rotSpeed);
 player.dirY = oldDirX * Math.sin(rotSpeed) + player.dirY * Math.cos(rotSpeed);
const oldPlaneX = player.planeX;
 player.planeX = player.planeX * Math.cos(rotSpeed) - player.planeY * Math.sin(rotSpeed);
 player.planeY = oldPlaneX * Math.sin(rotSpeed) + player.planeY * Math.cos(rotSpeed);
 }
if (keys.ArrowRight) {
 const oldDirX = player.dirX;
 player.dirX = player.dirX * Math.cos(-rotSpeed) - player.dirY * Math.sin(-rotSpeed);
 player.dirY = oldDirX * Math.sin(-rotSpeed) + player.dirY * Math.cos(-rotSpeed);
const oldPlaneX = player.planeX;
 player.planeX = player.planeX * Math.cos(-rotSpeed) - player.planeY * Math.sin(-rotSpeed);
 player.planeY = oldPlaneX * Math.sin(-rotSpeed) + player.planeY * Math.cos(-rotSpeed);
 }
// Move forward/backward
 let moveX = 0, moveY = 0;
 player.isMoving = false;
if (keys.w) {
 moveX += player.dirX * moveSpeed;
 moveY += player.dirY * moveSpeed;
 player.isMoving = true;
 }
if (keys.s) {
 moveX -= player.dirX * moveSpeed;
 moveY -= player.dirY * moveSpeed;
 player.isMoving = true;
 }
// Strafe left/right
 if (keys.a) {
 moveX -= player.planeX * moveSpeed;
 moveY -= player.planeY * moveSpeed;
 player.isMoving = true;
 }
if (keys.d) {
 moveX += player.planeX * moveSpeed;
 moveY += player.planeY * moveSpeed;
 player.isMoving = true;
 }
// Jump
 if (keys[' '] && !player.isJumping) {
 player.isJumping = true;
 player.jumpHeight = -20;
 }
// Handle jumping
 if (player.isJumping) {
 player.jumpHeight += 2;
 if (player.jumpHeight >= 0) {
 player.jumpHeight = 0;
 player.isJumping = false;
 }
 }
// Collision detection
 if (map[Math.floor(player.x + moveX)][Math.floor(player.y)] === 0) {
 player.x += moveX;
 }
if (map[Math.floor(player.x)][Math.floor(player.y + moveY)] === 0) {
 player.y += moveY;
 }
// Check if player reached exit
 if (Math.floor(player.x) === map.length - 2 && Math.floor(player.y) === map[0].length - 2) {
 if (enemiesLeft === 0) {
 level++;
 generateLevel();
 }
 }
 }
// Update enemies
 function updateEnemies() {
 const now = Date.now();
for (let i = enemies.length - 1; i >= 0; i--) {
 const enemy = enemies[i];
// Move towards player
 const dx = player.x - enemy.x;
 const dy = player.y - enemy.y;
 const dist = Math.sqrt(dx * dx + dy * dy);
if (dist > 0.5) { // Don't get too close
 enemy.x += (dx / dist) * enemy.speed;
 enemy.y += (dy / dist) * enemy.speed;
// Simple collision with walls
 if (map[Math.floor(enemy.x)][Math.floor(enemy.y)] !== 0) {
 enemy.x -= (dx / dist) * enemy.speed;
 enemy.y -= (dy / dist) * enemy.speed;
 }
 }
// Attack player if close enough
 if (dist < 1.5 && now - enemy.lastAttack > enemy.attackCooldown) {
 player.health -= enemy.damage;
 enemy.lastAttack = now;
// Show damage indicator
 damageIndicator.style.opacity = 1;
 setTimeout(() => {
 damageIndicator.style.opacity = 0;
 }, 300);
// Blood effect
 bloodEffect.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
 setTimeout(() => {
 bloodEffect.style.backgroundColor = 'rgba(255, 0, 0, 0)';
 }, 100);
// Check if player died
 if (player.health <= 0) {
 gameOver();
 }
 }
// Remove dead enemies
 if (enemy.health <= 0) {
 enemies.splice(i, 1);
 enemiesLeft--;
 kills++;
// Update UI
 enemiesCountDisplay.textContent = enemiesLeft;
 killsDisplay.textContent = kills;
 }
 }
 }
// Shoot
 function shoot() {
 const now = Date.now();
 const weapon = player.weapons[player.currentWeapon];
// Check if can shoot
 if (now - player.lastShot < weapon.fireRate || player.reloading || weapon.ammo <= 0) {
 return;
 }
player.lastShot = now;
 player.isShooting = true;
 setTimeout(() => {
 player.isShooting = false;
 }, 100);
// Reduce ammo
 weapon.ammo--;
// Check for hits
 for (let i = 0; i < enemies.length; i++) {
 const enemy = enemies[i];
// Calculate angle to enemy
 const dx = enemy.x - player.x;
 const dy = enemy.y - player.y;
 const dist = Math.sqrt(dx * dx + dy * dy);
// Angle between player direction and enemy
 const playerAngle = Math.atan2(player.dirY, player.dirX);
 const enemyAngle = Math.atan2(dy, dx);
 let angleDiff = Math.abs(playerAngle - enemyAngle);
// Normalize angle
 if (angleDiff > Math.PI) {
 angleDiff = 2 * Math.PI - angleDiff;
 }
// Check if enemy is in front and within range
 if (dist < weapon.range && angleDiff < 0.5 * weapon.accuracy) {
 // Hit the enemy
 enemy.health -= weapon.damage;
// Show damage indicator
 damageIndicator.style.opacity = 1;
 setTimeout(() => {
 damageIndicator.style.opacity = 0;
 }, 300);
// Enemy hit effect
 enemy.color = `hsl(${Math.random() * 60}, 100%, 70%)`;
 setTimeout(() => {
 enemy.color = `hsl(${Math.random() * 60}, 100%, 50%)`;
 }, 100);
 }
 }
// Reload if out of ammo
 if (weapon.ammo <= 0) {
 reload();
 }
 }
// Reload
 function reload() {
 if (player.reloading) return;
const weapon = player.weapons[player.currentWeapon];
 if (weapon.ammo === weapon.maxAmmo) return;
player.reloading = true;
 setTimeout(() => {
 weapon.ammo = weapon.maxAmmo;
 player.reloading = false;
 }, weapon.reloadTime);
 }
// Game over
 function gameOver() {
 gameRunning = false;
 finalKillsDisplay.textContent = kills;
 finalLevelDisplay.textContent = level;
 gameOverScreen.style.display = 'flex';
 }
// Game loop
 function gameLoop() {
 if (!gameRunning) return;
// Clear canvas
 ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw ceiling (simplified)
 ctx.fillStyle = '#111';
 ctx.fillRect(0, 0, canvas.width, canvas.height / 2);
// Cast rays and draw walls
 castRays();
// Draw enemies
 drawEnemies();
// Update player and enemies
 movePlayer();
 updateEnemies();
// Draw weapon
 drawWeapon();
// Update HUD
 updateHUD();
// Request next frame
 requestAnimationFrame(gameLoop);
 }
// Keyboard controls
 const keys = {
 w: false,
 a: false,
 s: false,
 d: false,
 ' ': false,
 ArrowLeft: false,
 ArrowRight: false,
 r: false
 };
document.addEventListener('keydown', (e) => {
 if (e.key in keys) keys[e.key] = true;
// Switch weapons
 if (e.key >= '1' && e.key <= '3') {
 player.currentWeapon = parseInt(e.key) - 1;
 }
// Reload
 if (e.key === 'r') {
 reload();
 }
 });
document.addEventListener('keyup', (e) => {
 if (e.key in keys) keys[e.key] = false;
 });
// Mouse controls
 let mouseX = 0;
 let mouseDown = false;
canvas.addEventListener('mousedown', () => {
 mouseDown = true;
 if (gameRunning) shoot();
 });
canvas.addEventListener('mouseup', () => {
 mouseDown = false;
 });
canvas.addEventListener('mousemove', (e) => {
 if (!gameRunning) return;
const movementX = e.movementX || 0;
// Rotate view based on mouse movement
 if (movementX !== 0) {
 const rotSpeed = 0.002 * movementX;
 const oldDirX = player.dirX;
 player.dirX = player.dirX * Math.cos(rotSpeed) - player.dirY * Math.sin(rotSpeed);
 player.dirY = oldDirX * Math.sin(rotSpeed) + player.dirY * Math.cos(rotSpeed);
const oldPlaneX = player.planeX;
 player.planeX = player.planeX * Math.cos(rotSpeed) - player.planeY * Math.sin(rotSpeed);
 player.planeY = oldPlaneX * Math.sin(rotSpeed) + player.planeY * Math.cos(rotSpeed);
 }
 });
// Touch controls for mobile
 let touchStartX = 0;
canvas.addEventListener('touchstart', (e) => {
 e.preventDefault();
 touchStartX = e.touches[0].clientX;
 if (gameRunning) shoot();
 });
canvas.addEventListener('touchmove', (e) => {
 e.preventDefault();
 if (!gameRunning) return;
const touchX = e.touches[0].clientX;
 const movementX = (touchX - touchStartX) * 0.1;
 touchStartX = touchX;
// Rotate view based on touch movement
 if (movementX !== 0) {
 const rotSpeed = 0.002 * movementX;
 const oldDirX = player.dirX;
 player.dirX = player.dirX * Math.cos(rotSpeed) - player.dirY * Math.sin(rotSpeed);
 player.dirY = oldDirX * Math.sin(rotSpeed) + player.dirY * Math.cos(rotSpeed);
const oldPlaneX = player.planeX;
 player.planeX = player.planeX * Math.cos(rotSpeed) - player.planeY * Math.sin(rotSpeed);
 player.planeY = oldPlaneX * Math.sin(rotSpeed) + player.planeY * Math.cos(rotSpeed);
 }
 });
canvas.addEventListener('touchend', (e) => {
 e.preventDefault();
 });
// Start game
 function startGame() {
 startScreen.style.display = 'none';
 gameRunning = true;
// Reset game state
 level = 1;
 kills = 0;
 player.health = 100;
 player.currentWeapon = 0;
 player.weapons.forEach(w => w.ammo = w.maxAmmo);
// Generate level
 generateLevel();
// Start game loop
 gameLoop();
 }
// Restart game
 function restartGame() {
 gameOverScreen.style.display = 'none';
 startGame();
 }
// Start button event
 startButton.addEventListener('click', startGame);
 restartButton.addEventListener('click', restartGame);
// Handle window resize
 window.addEventListener('resize', () => {
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 });
// Helper function to shade colors
 function shadeColor(color, percent) {
 let R = parseInt(color.substring(1, 3), 16);
 let G = parseInt(color.substring(3, 5), 16);
 let B = parseInt(color.substring(5, 7), 16);
R = parseInt(R * (100 + percent) / 100);
 G = parseInt(G * (100 + percent) / 100);
 B = parseInt(B * (100 + percent) / 100);
R = R < 255 ? R : 255;
 G = G < 255 ? G : 255;
 B = B < 255 ? B : 255;
const RR = R.toString(16).length === 1 ? '0' + R.toString(16) : R.toString(16);
 const GG = G.toString(16).length === 1 ? '0' + G.toString(16) : G.toString(16);
 const BB = B.toString(16).length === 1 ? '0' + B.toString(16) : B.toString(16);
return '#' + RR + GG + BB;
 }
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Greats/clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>