Files
2026-06-17 12:13:13 +03:00

1037 lines
43 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOOM ETERNAL: Web 3D</title>
<style>
body { margin: 0; overflow: hidden; background: #000; font-family: 'Impact', 'Arial Black', sans-serif; user-select: none; }
#game-container { position: relative; width: 100vw; height: 100vh; }
#crosshair {
position: absolute; top: 50%; left: 50%; width: 24px; height: 24px;
transform: translate(-50%, -50%); pointer-events: none; z-index: 10;
}
#crosshair::before, #crosshair::after {
content: ''; position: absolute; background: #00ff00; box-shadow: 0 0 8px #00ff00;
}
#crosshair::before { top: 11px; left: 0; width: 24px; height: 2px; }
#crosshair::after { top: 0; left: 11px; width: 2px; height: 24px; }
#blocker {
position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.85);
display: flex; flex-direction: column; align-items: center; justify-content: center;
z-index: 20; color: #fff; cursor: pointer;
}
#instructions { font-size: 42px; text-transform: uppercase; letter-spacing: 6px; color: #ff3333; text-shadow: 0 0 20px #ff0000; text-align: center; }
#sub-instructions { font-size: 16px; color: #ccc; margin-top: 20px; font-family: monospace; letter-spacing: 1px; text-align: center; line-height: 1.8; }
#loading { font-size: 18px; color: #ffaa00; margin-top: 30px; display: none; }
#hud {
position: absolute; bottom: 0; left: 0; width: 100%; height: 110px;
background: linear-gradient(to top, #050000 85%, transparent);
border-top: 4px solid #8b0000; display: flex; justify-content: space-between;
align-items: center; padding: 0 50px; box-sizing: border-box; pointer-events: none; z-index: 10;
}
.stat-box { text-align: center; color: #fff; position: relative; }
.stat-label { font-size: 14px; color: #888; letter-spacing: 3px; text-transform: uppercase; font-family: monospace; }
.stat-value { font-size: 56px; line-height: 56px; text-shadow: 0 0 15px currentColor; font-family: 'Impact', sans-serif; }
.health { color: #00ff00; }
.armor { color: #00bfff; }
.ammo { color: #ffcc00; }
#weapon-name {
position: absolute; bottom: 120px; right: 50px;
color: #ffcc00; font-size: 20px; font-family: monospace; letter-spacing: 2px;
text-shadow: 0 0 10px #ffaa00; pointer-events: none; z-index: 10;
text-transform: uppercase;
}
#damage-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: radial-gradient(circle, transparent 40%, rgba(139, 0, 0, 0.8) 100%);
opacity: 0; pointer-events: none; transition: opacity 0.1s; z-index: 5;
}
#ammo-warning {
position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%);
color: #ff0000; font-size: 24px; font-family: monospace; opacity: 0; transition: opacity 0.3s;
text-shadow: 0 0 10px #ff0000;
}
#weapon-slots {
position: absolute; top: 20px; right: 20px;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none; z-index: 10;
}
.weapon-slot {
padding: 8px 16px; background: rgba(0,0,0,0.7); border: 2px solid #444;
color: #888; font-family: monospace; font-size: 14px; letter-spacing: 1px;
transition: all 0.2s;
}
.weapon-slot.active {
border-color: #ffcc00; color: #ffcc00; background: rgba(50,30,0,0.8);
box-shadow: 0 0 10px rgba(255,200,0,0.5);
}
</style>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
}
}
</script>
</head>
<body>
<div id="game-container">
<div id="damage-overlay"></div>
<div id="crosshair"></div>
<div id="ammo-warning">МАЛО ПАТРОНОВ!</div>
<div id="weapon-name">ДРОБОВИК</div>
<div id="weapon-slots">
<div class="weapon-slot active" data-slot="0">[1] ДРОБОВИК</div>
<div class="weapon-slot" data-slot="1">[2] ПИСТОЛЕТ</div>
<div class="weapon-slot" data-slot="2">[3] ПЛАЗМАГАН</div>
</div>
<div id="blocker">
<div id="instructions">КЛИКНИ ДЛЯ СТАРТА</div>
<div id="sub-instructions">
WASD - Движение | Мышь - Обзор<br>
ЛКМ - Огонь | R - Перезарядка<br>
1, 2, 3 или Колесо мыши - Смена оружия
</div>
<div id="loading">Загрузка ресурсов...</div>
</div>
<div id="hud">
<div class="stat-box">
<div class="stat-label">Здоровье</div>
<div class="stat-value health" id="health-val">100</div>
</div>
<div class="stat-box">
<div class="stat-label">Броня</div>
<div class="stat-value armor" id="armor-val">50</div>
</div>
<div class="stat-box">
<div class="stat-label">Патроны</div>
<div class="stat-value ammo" id="ammo-val">8</div>
</div>
</div>
</div>
<script type="module">
import * as THREE from 'three';
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
let camera, scene, renderer, controls;
let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
let prevTime = performance.now();
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
let health = 100, armor = 50;
let enemies = [];
let particles = [];
let pickups = [];
let projectiles = [];
let weaponGroup;
let muzzleLight, playerLight;
let audioCtx;
let isReloading = false;
let lastShotTime = 0;
let currentWeaponIndex = 0;
let isSwitchingWeapon = false;
// --- СИСТЕМА ОРУЖИЯ ---
const weapons = [
{
name: 'ДРОБОВИК',
ammo: 8, maxAmmo: 8, reserve: 32,
damage: 25, fireRate: 600, // мс между выстрелами
reloadTime: 1200,
pellets: 6, spread: 0.08, // для дробовика - несколько дробинок
isAutomatic: false,
isProjectile: false,
color: 0xffaa00
},
{
name: 'ПИСТОЛЕТ',
ammo: 15, maxAmmo: 15, reserve: 60,
damage: 18, fireRate: 200,
reloadTime: 800,
pellets: 1, spread: 0.02,
isAutomatic: false,
isProjectile: false,
color: 0xffff00
},
{
name: 'ПЛАЗМАГАН',
ammo: 30, maxAmmo: 30, reserve: 120,
damage: 12, fireRate: 80,
reloadTime: 1500,
pellets: 1, spread: 0.01,
isAutomatic: true,
isProjectile: true,
projectileSpeed: 40,
color: 0x00ccff
}
];
const mapLayout = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,9,0,0,0,1,0,0,0,0,0,0,1,0,0,3,0,0,0,0,0,0,0,0,1],
[1,0,1,1,0,1,0,1,1,1,1,0,1,0,1,1,1,1,0,1,1,1,1,0,1],
[1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,1,0,1],
[1,0,1,0,1,1,1,1,1,0,1,1,1,1,1,1,0,1,1,1,1,0,1,0,1],
[1,0,0,0,1,3,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,1],
[1,1,1,0,1,0,1,1,1,2,1,1,1,0,1,1,1,1,1,0,1,0,1,1,1],
[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,0,1,1,1,0,1,1,1,1,0,1,1,1,1,1,1,0,1],
[1,0,0,0,0,0,0,0,1,3,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1],
[1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,0,1,0,1,0,1],
[1,2,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,1],
[1,0,1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1],
[1,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,1,1,1,1,1,1,1,1,0,1],
[1,3,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
const CELL_SIZE = 4;
const PLAYER_RADIUS = 0.6;
const uiHealth = document.getElementById('health-val');
const uiArmor = document.getElementById('armor-val');
const uiAmmo = document.getElementById('ammo-val');
const uiWeaponName = document.getElementById('weapon-name');
const ammoWarning = document.getElementById('ammo-warning');
const damageOverlay = document.getElementById('damage-overlay');
const blocker = document.getElementById('blocker');
const loadingText = document.getElementById('loading');
const weaponSlots = document.querySelectorAll('.weapon-slot');
init();
animate();
function initAudio() {
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
if (audioCtx.state === 'suspended') {
audioCtx.resume();
}
}
function playSound(type) {
if (!audioCtx) return;
const now = audioCtx.currentTime;
if (type === 'shotgun') {
const bufferSize = audioCtx.sampleRate * 0.3;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;
const noise = audioCtx.createBufferSource();
noise.buffer = buffer;
const noiseGain = audioCtx.createGain();
noise.connect(noiseGain);
noiseGain.connect(audioCtx.destination);
noiseGain.gain.setValueAtTime(1.0, now);
noiseGain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
noise.start(now);
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.type = 'sawtooth';
osc.frequency.setValueAtTime(120, now);
osc.frequency.exponentialRampToValueAtTime(30, now + 0.2);
gain.gain.setValueAtTime(0.7, now);
gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
osc.start(now);
osc.stop(now + 0.3);
} else if (type === 'pistol') {
const bufferSize = audioCtx.sampleRate * 0.15;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;
const noise = audioCtx.createBufferSource();
noise.buffer = buffer;
const noiseGain = audioCtx.createGain();
noise.connect(noiseGain);
noiseGain.connect(audioCtx.destination);
noiseGain.gain.setValueAtTime(0.6, now);
noiseGain.gain.exponentialRampToValueAtTime(0.01, now + 0.15);
noise.start(now);
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.type = 'square';
osc.frequency.setValueAtTime(200, now);
osc.frequency.exponentialRampToValueAtTime(80, now + 0.1);
gain.gain.setValueAtTime(0.4, now);
gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
osc.start(now);
osc.stop(now + 0.15);
} else if (type === 'plasma') {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.type = 'sine';
osc.frequency.setValueAtTime(800, now);
osc.frequency.exponentialRampToValueAtTime(200, now + 0.1);
gain.gain.setValueAtTime(0.3, now);
gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
osc.start(now);
osc.stop(now + 0.1);
} else if (type === 'pickup') {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.type = 'sine';
osc.frequency.setValueAtTime(400, now);
osc.frequency.linearRampToValueAtTime(800, now + 0.1);
gain.gain.setValueAtTime(0.3, now);
gain.gain.linearRampToValueAtTime(0, now + 0.15);
osc.start(now);
osc.stop(now + 0.15);
} else if (type === 'hit') {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.type = 'square';
osc.frequency.setValueAtTime(100, now);
osc.frequency.exponentialRampToValueAtTime(50, now + 0.1);
gain.gain.setValueAtTime(0.3, now);
gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
osc.start(now);
osc.stop(now + 0.1);
} else if (type === 'switch') {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.type = 'triangle';
osc.frequency.setValueAtTime(300, now);
osc.frequency.linearRampToValueAtTime(500, now + 0.08);
gain.gain.setValueAtTime(0.2, now);
gain.gain.linearRampToValueAtTime(0, now + 0.1);
osc.start(now);
osc.stop(now + 0.1);
} else if (type === 'empty') {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.type = 'square';
osc.frequency.setValueAtTime(150, now);
gain.gain.setValueAtTime(0.2, now);
gain.gain.exponentialRampToValueAtTime(0.01, now + 0.05);
osc.start(now);
osc.stop(now + 0.05);
}
}
function getCurrentWeapon() { return weapons[currentWeaponIndex]; }
function updateHUD() {
uiHealth.innerText = Math.max(0, Math.floor(health));
uiArmor.innerText = Math.max(0, Math.floor(armor));
uiAmmo.innerText = getCurrentWeapon().ammo;
uiWeaponName.innerText = getCurrentWeapon().name;
ammoWarning.style.opacity = getCurrentWeapon().ammo <= Math.floor(getCurrentWeapon().maxAmmo * 0.25) ? 1 : 0;
weaponSlots.forEach((slot, i) => {
slot.classList.toggle('active', i === currentWeaponIndex);
});
}
function switchWeapon(index) {
if (index === currentWeaponIndex || isSwitchingWeapon || isReloading) return;
isSwitchingWeapon = true;
playSound('switch');
// Анимация ухода оружия
const targetY = weaponGroup.position.y - 0.5;
const startY = weaponGroup.position.y;
const startTime = performance.now();
function animateSwitch() {
const elapsed = performance.now() - startTime;
const progress = Math.min(elapsed / 200, 1);
weaponGroup.position.y = startY + (targetY - startY) * progress;
if (progress < 1) {
requestAnimationFrame(animateSwitch);
} else {
// Смена оружия
currentWeaponIndex = index;
buildWeaponModel();
updateHUD();
// Анимация появления
const finalY = -0.35;
const startY2 = targetY;
const startTime2 = performance.now();
function animateAppear() {
const elapsed2 = performance.now() - startTime2;
const progress2 = Math.min(elapsed2 / 200, 1);
weaponGroup.position.y = startY2 + (finalY - startY2) * progress2;
if (progress2 < 1) {
requestAnimationFrame(animateAppear);
} else {
isSwitchingWeapon = false;
}
}
animateAppear();
}
}
animateSwitch();
}
function buildWeaponModel() {
// Удаляем старое оружие
while(weaponGroup.children.length > 0) {
weaponGroup.remove(weaponGroup.children[0]);
}
const weapon = getCurrentWeapon();
if (currentWeaponIndex === 0) {
// ДРОБОВИК
const bodyGeo = new THREE.BoxGeometry(0.12, 0.15, 0.7);
const bodyMat = new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.8, roughness: 0.4 });
const body = new THREE.Mesh(bodyGeo, bodyMat);
const barrelGeo = new THREE.CylinderGeometry(0.035, 0.035, 0.6, 8);
const barrelMat = new THREE.MeshStandardMaterial({ color: 0x111111, metalness: 0.9, roughness: 0.2 });
const b1 = new THREE.Mesh(barrelGeo, barrelMat);
b1.rotation.x = Math.PI / 2; b1.position.set(-0.04, 0.05, -0.5);
const b2 = new THREE.Mesh(barrelGeo, barrelMat);
b2.rotation.x = Math.PI / 2; b2.position.set(0.04, 0.05, -0.5);
const pumpGeo = new THREE.BoxGeometry(0.14, 0.12, 0.25);
const pumpMat = new THREE.MeshStandardMaterial({ color: 0x5c4a3d, roughness: 0.9 });
const pump = new THREE.Mesh(pumpGeo, pumpMat);
pump.position.z = 0.15;
const stockGeo = new THREE.BoxGeometry(0.1, 0.12, 0.3);
const stockMat = new THREE.MeshStandardMaterial({ color: 0x4a3a2d, roughness: 0.9 });
const stock = new THREE.Mesh(stockGeo, stockMat);
stock.position.z = 0.4;
weaponGroup.add(body, b1, b2, pump, stock);
} else if (currentWeaponIndex === 1) {
// ПИСТОЛЕТ
const bodyGeo = new THREE.BoxGeometry(0.08, 0.12, 0.35);
const bodyMat = new THREE.MeshStandardMaterial({ color: 0x222222, metalness: 0.9, roughness: 0.3 });
const body = new THREE.Mesh(bodyGeo, bodyMat);
const barrelGeo = new THREE.CylinderGeometry(0.02, 0.02, 0.25, 8);
const barrelMat = new THREE.MeshStandardMaterial({ color: 0x111111, metalness: 0.95, roughness: 0.1 });
const barrel = new THREE.Mesh(barrelGeo, barrelMat);
barrel.rotation.x = Math.PI / 2;
barrel.position.set(0, 0.04, -0.3);
const gripGeo = new THREE.BoxGeometry(0.07, 0.15, 0.08);
const gripMat = new THREE.MeshStandardMaterial({ color: 0x3d2d1d, roughness: 0.9 });
const grip = new THREE.Mesh(gripGeo, gripMat);
grip.position.set(0, -0.1, 0.1);
grip.rotation.x = 0.2;
const slideGeo = new THREE.BoxGeometry(0.09, 0.05, 0.3);
const slideMat = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, metalness: 0.9, roughness: 0.2 });
const slide = new THREE.Mesh(slideGeo, slideMat);
slide.position.set(0, 0.07, -0.05);
weaponGroup.add(body, barrel, grip, slide);
} else if (currentWeaponIndex === 2) {
// ПЛАЗМАГАН
const bodyGeo = new THREE.BoxGeometry(0.15, 0.18, 0.6);
const bodyMat = new THREE.MeshStandardMaterial({ color: 0x1a3a5a, metalness: 0.7, roughness: 0.3, emissive: 0x001122 });
const body = new THREE.Mesh(bodyGeo, bodyMat);
const barrelGeo = new THREE.CylinderGeometry(0.05, 0.04, 0.4, 12);
const barrelMat = new THREE.MeshStandardMaterial({ color: 0x00aaff, metalness: 0.9, roughness: 0.1, emissive: 0x004466 });
const barrel = new THREE.Mesh(barrelGeo, barrelMat);
barrel.rotation.x = Math.PI / 2;
barrel.position.set(0, 0.02, -0.45);
const coilGeo = new THREE.TorusGeometry(0.06, 0.015, 8, 16);
const coilMat = new THREE.MeshStandardMaterial({ color: 0x00ccff, emissive: 0x0088aa, metalness: 0.8 });
const coil1 = new THREE.Mesh(coilGeo, coilMat);
coil1.position.set(0, 0.02, -0.3);
const coil2 = new THREE.Mesh(coilGeo, coilMat);
coil2.position.set(0, 0.02, -0.15);
const gripGeo = new THREE.BoxGeometry(0.08, 0.14, 0.1);
const gripMat = new THREE.MeshStandardMaterial({ color: 0x2a2a3a, roughness: 0.8 });
const grip = new THREE.Mesh(gripGeo, gripMat);
grip.position.set(0, -0.12, 0.15);
weaponGroup.add(body, barrel, coil1, coil2, grip);
}
weaponGroup.position.set(0.35, -0.35, -0.6);
}
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a0a0a);
scene.fog = new THREE.FogExp2(0x2a0a0a, 0.02);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
const ambientLight = new THREE.AmbientLight(0xffaaaa, 1.0);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffccaa, 1.2);
dirLight.position.set(30, 50, 30);
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 1024;
dirLight.shadow.mapSize.height = 1024;
scene.add(dirLight);
playerLight = new THREE.PointLight(0xffaa55, 1.5, 18);
playerLight.position.set(0, 0, -1);
camera.add(playerLight);
muzzleLight = new THREE.PointLight(0xffaa00, 0, 15);
muzzleLight.castShadow = true;
scene.add(muzzleLight);
loadingText.style.display = 'block';
const textureLoader = new THREE.TextureLoader();
const wallUrl = 'https://threejs.org/examples/textures/brick_diffuse.jpg';
const floorUrl = 'https://threejs.org/examples/textures/metal.jpg';
const wallTexture = textureLoader.load(wallUrl, () => { loadingText.style.display = 'none'; });
wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
wallTexture.repeat.set(2, 2);
const floorTexture = textureLoader.load(floorUrl);
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(10, 10);
const wallMat = new THREE.MeshStandardMaterial({
map: wallTexture, color: 0x996666, roughness: 0.9, metalness: 0.1
});
const floorMat = new THREE.MeshStandardMaterial({
map: floorTexture, color: 0x777777, roughness: 0.8, metalness: 0.2
});
const floorGeo = new THREE.PlaneGeometry(mapLayout[0].length * CELL_SIZE, mapLayout.length * CELL_SIZE);
const floor = new THREE.Mesh(floorGeo, floorMat);
floor.rotation.x = -Math.PI / 2;
floor.position.set((mapLayout[0].length * CELL_SIZE)/2 - CELL_SIZE/2, 0, (mapLayout.length * CELL_SIZE)/2 - CELL_SIZE/2);
floor.receiveShadow = true;
scene.add(floor);
const ceilGeo = new THREE.PlaneGeometry(mapLayout[0].length * CELL_SIZE, mapLayout.length * CELL_SIZE);
const ceilMat = new THREE.MeshStandardMaterial({ color: 0x221111, roughness: 1 });
const ceil = new THREE.Mesh(ceilGeo, ceilMat);
ceil.rotation.x = Math.PI / 2;
ceil.position.set((mapLayout[0].length * CELL_SIZE)/2 - CELL_SIZE/2, CELL_SIZE * 1.5, (mapLayout.length * CELL_SIZE)/2 - CELL_SIZE/2);
scene.add(ceil);
for (let z = 0; z < mapLayout.length; z++) {
for (let x = 0; x < mapLayout[z].length; x++) {
const type = mapLayout[z][x];
const posX = x * CELL_SIZE;
const posZ = z * CELL_SIZE;
if (type === 1) {
const wallGeo = new THREE.BoxGeometry(CELL_SIZE, CELL_SIZE * 1.5, CELL_SIZE);
const wall = new THREE.Mesh(wallGeo, wallMat);
wall.position.set(posX, CELL_SIZE * 0.75, posZ);
wall.castShadow = true;
wall.receiveShadow = true;
scene.add(wall);
} else if (type === 9) {
camera.position.set(posX + CELL_SIZE/2, 1.6, posZ + CELL_SIZE/2);
} else if (type === 2) {
spawnEnemy(posX + CELL_SIZE/2, posZ + CELL_SIZE/2);
} else if (type === 3) {
spawnPickup(posX + CELL_SIZE/2, posZ + CELL_SIZE/2);
}
}
}
// Оружие
weaponGroup = new THREE.Group();
buildWeaponModel();
camera.add(weaponGroup);
scene.add(camera);
controls = new PointerLockControls(camera, document.body);
blocker.addEventListener('click', function() {
initAudio();
controls.lock();
});
controls.addEventListener('lock', () => {
blocker.style.display = 'none';
});
controls.addEventListener('unlock', () => {
blocker.style.display = 'flex';
document.getElementById('instructions').innerText = "ПАУЗА. КЛИКНИ ДЛЯ ПРОДОЛЖЕНИЯ";
loadingText.style.display = 'none';
});
document.addEventListener('keydown', onKeyDown);
document.addEventListener('keyup', onKeyUp);
document.addEventListener('mousedown', onMouseDown);
document.addEventListener('wheel', onWheel);
renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.getElementById('game-container').appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize);
updateHUD();
}
function checkWallCollision(x, z) {
const checks = [
{ x: x - PLAYER_RADIUS, z: z - PLAYER_RADIUS },
{ x: x + PLAYER_RADIUS, z: z - PLAYER_RADIUS },
{ x: x - PLAYER_RADIUS, z: z + PLAYER_RADIUS },
{ x: x + PLAYER_RADIUS, z: z + PLAYER_RADIUS }
];
for (let p of checks) {
const gridX = Math.floor(p.x / CELL_SIZE);
const gridZ = Math.floor(p.z / CELL_SIZE);
if (gridZ < 0 || gridZ >= mapLayout.length || gridX < 0 || gridX >= mapLayout[0].length) {
return true;
}
if (mapLayout[gridZ][gridX] === 1) {
return true;
}
}
return false;
}
function spawnEnemy(x, z) {
const group = new THREE.Group();
const bodyGeo = new THREE.IcosahedronGeometry(0.7, 1);
const bodyMat = new THREE.MeshStandardMaterial({ color: 0xaa0000, roughness: 0.3, metalness: 0.6, emissive: 0x330000 });
const body = new THREE.Mesh(bodyGeo, bodyMat);
const eyeGeo = new THREE.SphereGeometry(0.25, 16, 16);
const eyeMat = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const eye = new THREE.Mesh(eyeGeo, eyeMat);
eye.position.set(0, 0.2, 0.6);
const light = new THREE.PointLight(0xff0000, 1.5, 6);
light.position.y = 0.5;
group.add(body, eye, light);
group.position.set(x, 1.2, z);
group.castShadow = true;
group.userData = { health: 40, maxHealth: 40, speed: 3.5, lastAttack: 0 };
scene.add(group);
enemies.push(group);
}
function spawnPickup(x, z, isDrop = false) {
const geo = new THREE.BoxGeometry(0.6, 0.4, 0.4);
const mat = new THREE.MeshStandardMaterial({ color: 0xffcc00, emissive: 0xaa6600, emissiveIntensity: 0.8, metalness: 0.8 });
const mesh = new THREE.Mesh(geo, mat);
mesh.position.set(x, isDrop ? 0.5 : 1, z);
const light = new THREE.PointLight(0xffcc00, 1.0, 4);
mesh.add(light);
scene.add(mesh);
pickups.push({ mesh, isDrop, bobOffset: Math.random() * Math.PI });
}
function createParticles(pos, color, count, speed = 5) {
const geo = new THREE.BoxGeometry(0.08, 0.08, 0.08);
const mat = new THREE.MeshBasicMaterial({ color: color });
for (let i = 0; i < count; i++) {
const mesh = new THREE.Mesh(geo, mat);
mesh.position.copy(pos);
const vel = new THREE.Vector3((Math.random() - 0.5) * speed, (Math.random() - 0.5) * speed + 2, (Math.random() - 0.5) * speed);
scene.add(mesh);
particles.push({ mesh, vel, life: 1.0 });
}
}
function fireWeapon() {
const weapon = getCurrentWeapon();
const now = performance.now();
if (now - lastShotTime < weapon.fireRate || isReloading || isSwitchingWeapon) return;
if (weapon.ammo <= 0) {
playSound('empty');
// Автоматическая перезарядка
if (weapon.reserve > 0) startReload();
return;
}
lastShotTime = now;
weapon.ammo--;
updateHUD();
// Звук
if (currentWeaponIndex === 0) playSound('shotgun');
else if (currentWeaponIndex === 1) playSound('pistol');
else if (currentWeaponIndex === 2) playSound('plasma');
// Отдача - анимация
weaponGroup.position.z += 0.1;
weaponGroup.rotation.x -= 0.1;
// Вспышка
const dir = new THREE.Vector3();
camera.getWorldDirection(dir);
muzzleLight.position.copy(camera.position).add(dir.clone().multiplyScalar(1));
muzzleLight.intensity = 8;
muzzleLight.color.setHex(weapon.color);
setTimeout(() => { muzzleLight.intensity = 0; }, 60);
if (weapon.isProjectile) {
// Плазмаган - создаём снаряд
const projGeo = new THREE.SphereGeometry(0.15, 8, 8);
const projMat = new THREE.MeshBasicMaterial({ color: weapon.color });
const proj = new THREE.Mesh(projGeo, projMat);
proj.position.copy(camera.position).add(dir.clone().multiplyScalar(1));
const projLight = new THREE.PointLight(weapon.color, 2, 5);
proj.add(projLight);
scene.add(proj);
projectiles.push({
mesh: proj,
velocity: dir.clone().multiplyScalar(weapon.projectileSpeed),
damage: weapon.damage,
life: 3.0,
color: weapon.color
});
} else {
// Hitscan оружие (дробовик, пистолет)
const raycaster = new THREE.Raycaster();
for (let p = 0; p < weapon.pellets; p++) {
const spread = new THREE.Vector2(
(Math.random() - 0.5) * weapon.spread,
(Math.random() - 0.5) * weapon.spread
);
raycaster.setFromCamera(spread, camera);
const intersects = raycaster.intersectObjects(enemies, true);
if (intersects.length > 0) {
let target = intersects[0].object;
while(target.parent && target.parent.type !== 'Scene') {
if (target.userData && target.userData.health !== undefined) break;
target = target.parent;
}
if (target.userData && target.userData.health !== undefined) {
const hitPoint = intersects[0].point;
createParticles(hitPoint, 0xaa0000, 5, 6);
createParticles(hitPoint, weapon.color, 3, 4);
target.userData.health -= weapon.damage;
playSound('hit');
const pushDir = hitPoint.clone().sub(camera.position).normalize();
target.position.add(pushDir.multiplyScalar(0.5));
if (target.userData.health <= 0) {
killEnemy(target);
}
}
}
}
}
}
function killEnemy(target) {
createParticles(target.position, 0xaa0000, 30, 10);
scene.remove(target);
enemies = enemies.filter(e => e !== target);
spawnPickup(target.position.x, target.position.z, true);
setTimeout(() => {
const emptySpots = [];
for(let z=0; z<mapLayout.length; z++) {
for(let x=0; x<mapLayout[z].length; x++) {
if(mapLayout[z][x] === 0 || mapLayout[z][x] === 2) emptySpots.push({x, z});
}
}
if(emptySpots.length > 0) {
const spot = emptySpots[Math.floor(Math.random() * emptySpots.length)];
spawnEnemy(spot.x * CELL_SIZE + CELL_SIZE/2, spot.z * CELL_SIZE + CELL_SIZE/2);
}
}, 2000);
}
function startReload() {
const weapon = getCurrentWeapon();
if (isReloading || weapon.ammo >= weapon.maxAmmo || weapon.reserve <= 0) return;
isReloading = true;
setTimeout(() => {
const needed = weapon.maxAmmo - weapon.ammo;
const available = Math.min(needed, weapon.reserve);
weapon.ammo += available;
weapon.reserve -= available;
isReloading = false;
playSound('pickup');
updateHUD();
}, weapon.reloadTime);
}
function onKeyDown(event) {
switch (event.code) {
case 'KeyW': case 'ArrowUp': moveForward = true; break;
case 'KeyA': case 'ArrowLeft': moveLeft = true; break;
case 'KeyS': case 'ArrowDown': moveBackward = true; break;
case 'KeyD': case 'ArrowRight': moveRight = true; break;
case 'KeyR': startReload(); break;
case 'Digit1': switchWeapon(0); break;
case 'Digit2': switchWeapon(1); break;
case 'Digit3': switchWeapon(2); break;
}
}
function onKeyUp(event) {
switch (event.code) {
case 'KeyW': case 'ArrowUp': moveForward = false; break;
case 'KeyA': case 'ArrowLeft': moveLeft = false; break;
case 'KeyS': case 'ArrowDown': moveBackward = false; break;
case 'KeyD': case 'ArrowRight': moveRight = false; break;
}
}
let mouseDown = false;
function onMouseDown(event) {
if (!controls.isLocked || event.button !== 0) return;
mouseDown = true;
fireWeapon();
}
document.addEventListener('mouseup', (e) => {
if (e.button === 0) mouseDown = false;
});
function onWheel(event) {
if (!controls.isLocked) return;
if (event.deltaY > 0) {
switchWeapon((currentWeaponIndex + 1) % weapons.length);
} else {
switchWeapon((currentWeaponIndex - 1 + weapons.length) % weapons.length);
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
const time = performance.now();
const delta = Math.min((time - prevTime) / 1000, 0.1);
prevTime = time;
// Автоогонь для плазмагана
if (mouseDown && controls.isLocked && getCurrentWeapon().isAutomatic) {
fireWeapon();
}
if (controls.isLocked && !isSwitchingWeapon) {
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
direction.z = Number(moveForward) - Number(moveBackward);
direction.x = Number(moveRight) - Number(moveLeft);
direction.normalize();
if (moveForward || moveBackward) velocity.z -= direction.z * 100.0 * delta;
if (moveLeft || moveRight) velocity.x -= direction.x * 100.0 * delta;
const nextX = camera.position.x - velocity.x * delta;
const nextZ = camera.position.z - velocity.z * delta;
if (!checkWallCollision(nextX, camera.position.z)) {
camera.position.x = nextX;
} else {
velocity.x = 0;
}
if (!checkWallCollision(camera.position.x, nextZ)) {
camera.position.z = nextZ;
} else {
velocity.z = 0;
}
// Анимация оружия
weaponGroup.position.z = THREE.MathUtils.lerp(weaponGroup.position.z, -0.6, delta * 12);
weaponGroup.rotation.x = THREE.MathUtils.lerp(weaponGroup.rotation.x, 0, delta * 12);
if (moveForward || moveBackward || moveLeft || moveRight) {
const bobSpeed = time * 0.015;
weaponGroup.position.y = -0.35 + Math.sin(bobSpeed) * 0.015;
weaponGroup.position.x = 0.35 + Math.cos(bobSpeed * 0.5) * 0.01;
}
// Логика врагов
enemies.forEach(enemy => {
const dist = enemy.position.distanceTo(camera.position);
const dirToPlayer = new THREE.Vector3().subVectors(camera.position, enemy.position).normalize();
dirToPlayer.y = 0;
if (dist > 1.5) {
let separation = new THREE.Vector3();
enemies.forEach(other => {
if (enemy !== other) {
const d = enemy.position.distanceTo(other.position);
if (d < 1.5) separation.add(new THREE.Vector3().subVectors(enemy.position, other.position).normalize().multiplyScalar(1/d));
}
});
const finalDir = dirToPlayer.clone().add(separation.multiplyScalar(0.5)).normalize();
const newX = enemy.position.x + finalDir.x * enemy.userData.speed * delta;
const newZ = enemy.position.z + finalDir.z * enemy.userData.speed * delta;
// Проверка коллизий врагов со стенами
const gridX = Math.floor(newX / CELL_SIZE);
const gridZ = Math.floor(newZ / CELL_SIZE);
if (gridZ >= 0 && gridZ < mapLayout.length && gridX >= 0 && gridX < mapLayout[0].length && mapLayout[gridZ][gridX] !== 1) {
enemy.position.x = newX;
enemy.position.z = newZ;
}
enemy.lookAt(camera.position.x, enemy.position.y, camera.position.z);
}
if (dist < 2.0 && time - enemy.userData.lastAttack > 800) {
enemy.userData.lastAttack = time;
let damage = 15;
if (armor > 0) {
armor -= damage * 0.6;
damage *= 0.4;
}
health -= damage;
updateHUD();
damageOverlay.style.opacity = 0.6;
setTimeout(() => { damageOverlay.style.opacity = 0; }, 150);
camera.position.y -= 0.1;
setTimeout(() => { camera.position.y += 0.1; }, 100);
if (health <= 0) {
controls.unlock();
alert("ВЫ ПОГИБЛИ. RIP AND TEAR В СЛЕДУЮЩИЙ РАЗ.");
location.reload();
}
}
});
// Подбор предметов
for (let i = pickups.length - 1; i >= 0; i--) {
const p = pickups[i];
p.mesh.rotation.y += delta * 2;
p.mesh.position.y = (p.isDrop ? 0.5 : 1.0) + Math.sin(time * 0.005 + p.bobOffset) * 0.15;
if (camera.position.distanceTo(p.mesh.position) < 1.5) {
// Даём патроны для текущего оружия
const weapon = getCurrentWeapon();
weapon.reserve = Math.min(weapon.reserve + 12, weapon.maxAmmo * 4);
playSound('pickup');
scene.remove(p.mesh);
pickups.splice(i, 1);
updateHUD();
}
}
// Снаряды (плазмаган)
for (let i = projectiles.length - 1; i >= 0; i--) {
const p = projectiles[i];
p.life -= delta;
p.mesh.position.add(p.velocity.clone().multiplyScalar(delta));
// Проверка столкновения со стенами
const gridX = Math.floor(p.mesh.position.x / CELL_SIZE);
const gridZ = Math.floor(p.mesh.position.z / CELL_SIZE);
let hitWall = false;
if (gridZ < 0 || gridZ >= mapLayout.length || gridX < 0 || gridX >= mapLayout[0].length || mapLayout[gridZ][gridX] === 1) {
hitWall = true;
}
// Проверка столкновения с врагами
let hitEnemy = false;
for (let enemy of enemies) {
if (p.mesh.position.distanceTo(enemy.position) < 1.0) {
createParticles(p.mesh.position, p.color, 15, 8);
createParticles(p.mesh.position, 0xaa0000, 10, 6);
enemy.userData.health -= p.damage;
playSound('hit');
const pushDir = p.velocity.clone().normalize().multiplyScalar(0.8);
enemy.position.add(pushDir);
if (enemy.userData.health <= 0) {
killEnemy(enemy);
}
hitEnemy = true;
break;
}
}
if (hitWall || hitEnemy || p.life <= 0) {
if (hitWall) createParticles(p.mesh.position, p.color, 10, 5);
scene.remove(p.mesh);
projectiles.splice(i, 1);
}
}
// Частицы
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.life -= delta * 1.5;
p.vel.y -= 15.0 * delta;
p.mesh.position.add(p.vel.clone().multiplyScalar(delta));
p.mesh.rotation.x += delta * 8;
p.mesh.scale.setScalar(Math.max(0, p.life));
if (p.life <= 0 || p.mesh.position.y < 0.05) {
scene.remove(p.mesh);
particles.splice(i, 1);
}
}
}
renderer.render(scene, camera);
}
</script>
</body>
</html>