3D-Shooter-Vorlage

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>3D Game with Player Cube, Golden Bullets, and Sounds</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
    #info {
      position: absolute;
      top: 10px; left: 10px;
      color: white;
      font-family: Arial, sans-serif;
      background: rgba(0,0,0,0.5);
      padding: 5px 10px;
      border-radius: 5px;
      user-select: none;
      max-width: 250px;
    }
  </style>
</head>
<body>
  <div id="info">
    <div>Weapon: <span id="weaponMode">Rifle</span></div>
    <div>Wave: <span id="wave">1</span></div>
    <div>Enemies alive: <span id="enemyCount">0</span></div>
    <div>Player Health: <span id="playerHealth">100</span></div>
    <div>Ammo: <span id="playerAmmo">30</span></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
  <script>
    // Audio setup with Web Audio API
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    const audioCtx = new AudioContext();

function playSound(frequency, duration = 0.1, type = 'square', volume = 0.1) {
      const oscillator = audioCtx.createOscillator();
      const gainNode = audioCtx.createGain();
      oscillator.connect(gainNode);
      gainNode.connect(audioCtx.destination);
      oscillator.type = type;
      oscillator.frequency.setValueAtTime(frequency, audioCtx.currentTime);
      gainNode.gain.setValueAtTime(volume, audioCtx.currentTime);
      oscillator.start();
      oscillator.stop(audioCtx.currentTime + duration);
    }

// Basic Three.js setup
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x87ceeb);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 5, 10);
    camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

// Floor
    const floorGeometry = new THREE.PlaneGeometry(50, 50);
    const floorMaterial = new THREE.MeshStandardMaterial({color: 0x228B22});
    const floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.rotation.x = -Math.PI / 2;
    floor.receiveShadow = true;
    scene.add(floor);

// Player cube
    const playerSize = 1;
    const playerGeometry = new THREE.BoxGeometry(playerSize, playerSize, playerSize);
    const playerMaterial = new THREE.MeshStandardMaterial({color: 0xff0000});
    const player = new THREE.Mesh(playerGeometry, playerMaterial);
    player.position.y = playerSize / 2;
    scene.add(player);

// Rocks as obstacles
    const rocks = [];
    function createRock(x, z, scale) {
      const geom = new THREE.DodecahedronGeometry(scale, 0);
      const mat = new THREE.MeshStandardMaterial({color: 0x5a5a4a});
      const rock = new THREE.Mesh(geom, mat);
      rock.position.set(x, scale/2, z);
      scene.add(rock);
      rocks.push(rock);
    }
    for(let i=0; i<20; i++) {
      const x = (Math.random() - 0.5) * 40;
      const z = (Math.random() - 0.5) * 40;
      const scale = 0.5 + Math.random() * 1.5;
      createRock(x, z, scale);
    }

// Lighting
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(10, 20, 10);
    directionalLight.castShadow = true;
    scene.add(directionalLight);

// Movement controls (WASD + Arrow keys)
    const keys = {};
    window.addEventListener('keydown', (e) => {
      keys[e.key.toLowerCase()] = true;
      // Resume audio context on first user interaction (required by browsers)
      if (audioCtx.state === 'suspended') audioCtx.resume();
    });
    window.addEventListener('keyup', (e) => { keys[e.key.toLowerCase()] = false; });

const speed = 0.1;

// Collision detection with rocks
    function checkCollision(newPos) {
      const playerBox = new THREE.Box3().setFromCenterAndSize(
        newPos,
        new THREE.Vector3(playerSize, playerSize, playerSize)
      );
      for (const rock of rocks) {
        const rockBox = new THREE.Box3().setFromObject(rock);
        if (playerBox.intersectsBox(rockBox)) {
          return true;
        }
      }
      return false;
    }

// Weapon modes
    let weaponMode = 'rifle'; // 'rifle' or 'shotgun'
    const weaponDisplay = document.getElementById('weaponMode');
    window.addEventListener('keydown', (e) => {
      if (e.key === '1') {
        weaponMode = 'rifle';
        weaponDisplay.textContent = 'Rifle';
      } else if (e.key === '2') {
        weaponMode = 'shotgun';
        weaponDisplay.textContent = 'Shotgun';
      }
    });

// Player health and ammo
    let playerHealth = 100;
    let playerAmmo = 30;
    const maxAmmo = 30;
    const playerHealthDisplay = document.getElementById('playerHealth');
    const playerAmmoDisplay = document.getElementById('playerAmmo');

// Projectiles
    const projectiles = [];
    const projectileSpeed = 0.5;
    const projectileSize = 0.2;

// Shoot function with ammo check and golden-yellow bullets
    function shoot() {
      if (playerAmmo <= 0) {
        console.log('Out of ammo!');
        return;
      }
      playerAmmo--;
      playerAmmoDisplay.textContent = playerAmmo;
      playSound(880, 0.1, 'square', 0.15); // Shooting sound

if (weaponMode === 'rifle') {
        createProjectile(player.position.clone(), camera.getWorldDirection(new THREE.Vector3()), 'player', 0xffff00);
      } else if (weaponMode === 'shotgun') {
        const baseDir = camera.getWorldDirection(new THREE.Vector3());
        for (let angle = -0.2; angle <= 0.2; angle += 0.1) {
          const dir = baseDir.clone();
          dir.applyAxisAngle(new THREE.Vector3(0,1,0), angle);
          createProjectile(player.position.clone(), dir, 'player', 0xffff00);
        }
      }
    }

function createProjectile(position, direction, owner, color) {
      const geometry = new THREE.SphereGeometry(projectileSize, 8, 8);
      const material = new THREE.MeshStandardMaterial({color});
      const projectile = new THREE.Mesh(geometry, material);
      projectile.position.copy(position);
      projectile.direction = direction.clone().normalize();
      projectile.alive = true;
      projectile.owner = owner; // 'player' or 'enemy'
      scene.add(projectile);
      projectiles.push(projectile);
    }

window.addEventListener('keydown', (e) => {
      if (e.key === ' ') {
        shoot();
      }
    });

// Ammo pickups
    class AmmoPickup {
      constructor(position) {
        const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
        const material = new THREE.MeshStandardMaterial({color: 0x00ff00});
        this.mesh = new THREE.Mesh(geometry, material);
        this.mesh.position.copy(position);
        scene.add(this.mesh);
        this.alive = true;
      }

collect() {
        this.alive = false;
        scene.remove(this.mesh);
      }
    }
    const ammoPickups = [];

// Enemies with random weapon and stats
    class Enemy {
      constructor(position, color, speed, health, damage) {
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshStandardMaterial({color});
        this.mesh = new THREE.Mesh(geometry, material);
        this.mesh.position.copy(position);
        this.speed = speed;
        this.health = health;
        this.maxHealth = health;
        this.damage = damage;
        this.alive = true;
        this.weapon = Math.random() < 0.5 ? 'rifle' : 'shotgun';
        this.ammo = this.weapon === 'rifle' ? 20 : 10;
        this.lastShoot = 0;
        this.shootInterval = 1500;
        scene.add(this.mesh);
      }

moveToward(targetPos) {
        if (!this.alive) return;
        const direction = targetPos.clone().sub(this.mesh.position);
        direction.y = 0;
        const distance = direction.length();
        if (distance > 2) {
          direction.normalize();
          this.mesh.position.add(direction.multiplyScalar(this.speed));
        }
      }

takeDamage(amount) {
        this.health -= amount;
        playSound(440, 0.1, 'triangle', 0.1); // Enemy hit sound
        if (this.health <= 0) {
          this.alive = false;
          scene.remove(this.mesh);
          // Drop ammo pickup at enemy position
          const ammoPickup = new AmmoPickup(this.mesh.position.clone());
          ammoPickups.push(ammoPickup);
        }
      }

shootAt(targetPos, time) {
        if (!this.alive) return;
        if (this.ammo <= 0) return;
        if (time - this.lastShoot < this.shootInterval) return;

const enemies = [];
    let wave = 1;
    let enemiesToSpawn = 5;
    let spawnInterval = 2000;
    let lastSpawnTime = 0;
    const enemySpeedYellow = 0.06;
    const enemySpeedPurple = 0.03;
    const enemyDamageYellow = 5;
    const enemyDamagePurple = 10;
    const enemyHealthYellow = 20;
    const enemyHealthPurple = 50;

// Storm circle
    let stormRadius = 25;
    const stormShrinkRate = 0.01;
    const stormDamagePerSecond = 5;
    let lastStormDamageTime = 0;

const stormGeometry = new THREE.RingGeometry(stormRadius - 0.5, stormRadius, 64);
    const stormMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff, side: THREE.DoubleSide, transparent: true, opacity: 0.3});
    const storm = new THREE.Mesh(stormGeometry, stormMaterial);
    storm.rotation.x = -Math.PI / 2;
    scene.add(storm);

// UI elements
    const waveDisplay = document.getElementById('wave');
    const enemyCountDisplay = document.getElementById('enemyCount');

// Game loop
    function animate(time = 0) {
      requestAnimationFrame(animate);

// Player movement
      let newPosition = player.position.clone();
      if (keys['w'] || keys['arrowup']) newPosition.z -= speed;
      if (keys['s'] || keys['arrowdown']) newPosition.z += speed;
      if (keys['a'] || keys['arrowleft']) newPosition.x -= speed;
      if (keys['d'] || keys['arrowright']) newPosition.x += speed;
      if (!checkCollision(newPosition)) {
        player.position.copy(newPosition);
      }

// Camera follows player
      camera.position.x = player.position.x;
      camera.position.z = player.position.z + 10;
      camera.position.y = player.position.y + 5;
      camera.lookAt(player.position);

// Spawn enemies
      if (enemies.length < enemiesToSpawn && time - lastSpawnTime > spawnInterval) {
        spawnEnemy();
        lastSpawnTime = time;
      }

// Update enemies
      for (let i = enemies.length - 1; i >= 0; i--) {
        const enemy = enemies[i];
        if (!enemy.alive) {
          enemies.splice(i, 1);
          continue;
        }
        enemy.moveToward(player.position);
        enemy.shootAt(player.position, time);

// Collision with player (damage)
        const enemyBox = new THREE.Box3().setFromObject(enemy.mesh);
        const playerBox = new THREE.Box3().setFromObject(player);
        if (enemyBox.intersectsBox(playerBox)) {
          playerHealth -= enemy.damage * 0.1;
          if (playerHealth < 0) playerHealth = 0;
          playerHealthDisplay.textContent = Math.floor(playerHealth);
          if (playerHealth <= 0) {
            alert('You died! Refresh to restart.');
            return;
          }
        }
      }

// Update projectiles
      for (let i = projectiles.length - 1; i >= 0; i--) {
        const p = projectiles[i];
        if (!p.alive) {
          projectiles.splice(i, 1);
          continue;
        }
        p.position.add(p.direction.clone().multiplyScalar(projectileSpeed));

if (p.position.length() > 100) {
          scene.remove(p);
          p.alive = false;
          projectiles.splice(i, 1);
          continue;
        }

// Player projectiles hit enemies
        if (p.owner === 'player') {
          for (const enemy of enemies) {
            if (!enemy.alive) continue;
            const enemyBox = new THREE.Box3().setFromObject(enemy.mesh);
            const pBox = new THREE.Box3().setFromObject(p);
            if (pBox.intersectsBox(enemyBox)) {
              enemy.takeDamage(weaponMode === 'rifle' ? 10 : 5);
              scene.remove(p);
              p.alive = false;
              projectiles.splice(i, 1);
              break;
            }
          }
        }

// Enemy projectiles hit player
        if (p.owner === 'enemy') {
          const pBox = new THREE.Box3().setFromObject(p);
          const playerBox = new THREE.Box3().setFromObject(player);
          if (pBox.intersectsBox(playerBox)) {
            playerHealth -= 5;
            if (playerHealth < 0) playerHealth = 0;
            playerHealthDisplay.textContent = Math.floor(playerHealth);
            if (playerHealth <= 0) {
              alert('You died! Refresh to restart.');
              return;
            }
            scene.remove(p);
            p.alive = false;
            projectiles.splice(i, 1);
          }
        }
      }

// Ammo pickups
      for (let i = ammoPickups.length - 1; i >= 0; i--) {
        const ammo = ammoPickups[i];
        if (!ammo.alive) {
          ammoPickups.splice(i, 1);
          continue;
        }
        const ammoBox = new THREE.Box3().setFromObject(ammo.mesh);
        const playerBox = new THREE.Box3().setFromObject(player);
        if (ammoBox.intersectsBox(playerBox)) {
          playerAmmo += 10;
          if (playerAmmo > maxAmmo) playerAmmo = maxAmmo;
          playerAmmoDisplay.textContent = playerAmmo;
          ammo.collect();
          ammoPickups.splice(i, 1);
        }
      }

// Storm shrinking and damage
      if (stormRadius > 5) {
        stormRadius -= stormShrinkRate;
        storm.geometry.dispose();
        storm.geometry = new THREE.RingGeometry(stormRadius - 0.5, stormRadius, 64);
      }
      storm.position.set(0, 0.1, 0);

// Wave progression
      if (enemies.length === 0 && enemiesToSpawn > 0) {
        wave++;
        waveDisplay.textContent = wave;
        enemiesToSpawn += 3;
      }

enemyCountDisplay.textContent = enemies.length;

renderer.render(scene, camera);
    }

animate();

// Window resize
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth/window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });

</script>
</body>
</html>

3D-Shooter-Vorlage

HTML

CSS

JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS