3d Shooter template

Open In Editor Video Publish Your Code

<!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 template

Recommended

3D card

HTML Bike Rental Website Template

Website Registration Dashboard HTML Template

HTML

CSS

JS

Recommended

3D card

HTML Bike Rental Website Template

Website Registration Dashboard HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS