Webleb - UI Elements - Crossy Worm 3-D

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Crossy Worm 3D</title>
  <style>
    * {
      box-sizing: border-box;
      user-select: none;
      margin: 0;
      padding: 0;
    }
    body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #1a1a1a;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #canvas-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    #ui-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
    }
    .hud {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .score-card {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255, 255, 255, 0.4);
      padding: 10px 20px;
      border-radius: 16px;
      color: white;
      font-weight: 800;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    .score-title {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #ffd700;
    }
    .score-val {
      font-size: 32px;
    }
    .modal {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(20, 20, 30, 0.85);
      backdrop-filter: blur(15px);
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 24px;
      padding: 30px;
      text-align: center;
      color: white;
      pointer-events: auto;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 20px 50px rgba(0,0,0,0.6);
      transition: all 0.3s ease;
    }
    h1 {
      font-size: 36px;
      margin-bottom: 10px;
      color: #ff5577;
      text-shadow: 0 0 10px rgba(255,85,119,0.5);
    }
    p {
      margin-bottom: 20px;
      color: #ccc;
      line-height: 1.5;
      font-size: 14px;
    }
    .key-badge {
      background: #333;
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid #555;
      color: #fff;
      font-family: monospace;
      font-weight: bold;
    }
    .btn {
      background: linear-gradient(135deg, #ff5577, #ff2255);
      border: none;
      color: white;
      padding: 14px 28px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(255, 34, 85, 0.4);
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .btn:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(255, 34, 85, 0.6);
    }
    .btn:active {
      transform: scale(0.98);
    }
    .hidden {
      display: none !important;
      opacity: 0;
      pointer-events: none;
    }
    /* Mobile Controls */
    .mobile-controls {
      display: none;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      width: 180px;
      margin: 0 auto;
      pointer-events: auto;
    }
    .d-btn {
      background: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.4);
      color: white;
      font-weight: bold;
      font-size: 20px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
    }
    .d-btn:active {
      background: rgba(255,255,255,0.5);
    }
    @media (max-width: 768px) {
      .mobile-controls {
        display: grid;
      }
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>

<div id="ui-container">
    <div class="hud">
      <div class="score-card">
        <div class="score-title">Distance</div>
        <div id="score" class="score-val">0</div>
      </div>
      <div class="score-card" style="text-align: right;">
        <div class="score-title">Best</div>
        <div id="best" class="score-val">0</div>
      </div>
    </div>

<div id="start-modal" class="modal">
      <h1>CROSSY WORM</h1>
      <p>Help the tiny worm cross dangerous roads, rivers, and garden patches!</p>
      <p>Use <span class="key-badge">W</span><span class="key-badge">A</span><span class="key-badge">S</span><span class="key-badge">D</span> to crawl forward, left, backward, and right.</p>
      <button id="start-btn" class="btn">START CRAWLING</button>
    </div>

<div id="gameover-modal" class="modal hidden">
      <h1 style="color: #ff3333;">SQUISHED!</h1>
      <p id="death-reason">You got run over by a lawnmower!</p>
      <div style="margin-bottom: 20px;">
        <span style="font-size: 14px; color: #aaa;">FINAL SCORE</span><br>
        <span id="final-score" style="font-size: 40px; font-weight: bold; color: #fff;">0</span>
      </div>
      <button id="restart-btn" class="btn">PLAY AGAIN</button>
    </div>

<div class="mobile-controls">
      <div></div>
      <div class="d-btn" id="btn-w">W</div>
      <div></div>
      <div class="d-btn" id="btn-a">A</div>
      <div class="d-btn" id="btn-s">S</div>
      <div class="d-btn" id="btn-d">D</div>
    </div>
  </div>

const sound = new SoundSystem();

// --- GAME CONSTANTS ---
    const GRID_SIZE = 1;
    const BOARD_WIDTH = 15;
    const LANE_GRASS = 'grass';
    const LANE_ROAD = 'road';
    const LANE_RIVER = 'river';

// COLOR PALETTE
    const COLORS = {
      grass: 0x7ec850,
      grassAlt: 0x73b848,
      road: 0x444444,
      river: 0x3399ff,
      worm: 0xff6699,
      wormEye: 0x111111,
      car1: 0xff3333,
      car2: 0xffcc00,
      mower: 0xcc2222,
      log: 0x8b5a2b,
      tree: 0x2e8b57,
      treeTrunk: 0x5c4033,
      bird: 0x9933ff
    };

// --- SETUP SCENE ---
    const container = document.getElementById('canvas-container');
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xa0d8ef);
    scene.fog = new THREE.Fog(0xa0d8ef, 15, 35);

// Isometric Camera Setup
    const aspect = window.innerWidth / window.innerHeight;
    const d = 10;
    const camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 1, 1000);
    
    // Position camera for classic isometric view
    camera.position.set(12, 15, 12);
    camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    container.appendChild(renderer.domElement);

// --- LIGHTS ---
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
    dirLight.position.set(20, 40, 20);
    dirLight.castShadow = true;
    dirLight.shadow.mapSize.width = 1024;
    dirLight.shadow.mapSize.height = 1024;
    dirLight.shadow.camera.near = 0.5;
    dirLight.shadow.camera.far = 100;
    const dCam = 20;
    dirLight.shadow.camera.left = -dCam;
    dirLight.shadow.camera.right = dCam;
    dirLight.shadow.camera.top = dCam;
    dirLight.shadow.camera.bottom = -dCam;
    scene.add(dirLight);

// --- WORM CHARACTER ---
    class Worm {
      constructor() {
        this.group = new THREE.Group();
        this.segments = [];
        this.numSegments = 5;
        
        // Target Grid Positions
        this.gridX = 0;
        this.gridZ = 0;
        
        // Lerp Movement Properties
        this.isMoving = false;
        this.moveProgress = 0;
        this.moveSpeed = 8; // Steps per sec
        this.startX = 0;
        this.startZ = 0;
        this.targetX = 0;
        this.targetZ = 0;
        this.jumpHeight = 0.4;
        this.facingAngle = 0; // 0: -Z, Math.PI/2: -X, etc.

// Build Segments
        const segGeo = new THREE.SphereGeometry(0.35, 16, 16);
        const mat = new THREE.MeshLambertMaterial({ color: COLORS.worm });

for (let i = 0; i < this.numSegments; i++) {
          const scale = 1 - (i * 0.08);
          const mesh = new THREE.Mesh(segGeo, mat);
          mesh.scale.set(scale, scale, scale);
          mesh.castShadow = true;
          mesh.position.z = i * 0.3;
          this.group.add(mesh);
          this.segments.push(mesh);
        }

// Eyes on Head (First Segment)
        const eyeGeo = new THREE.SphereGeometry(0.08, 8, 8);
        const eyeMat = new THREE.MeshBasicMaterial({ color: COLORS.wormEye });
        
        const leftEye = new THREE.Mesh(eyeGeo, eyeMat);
        leftEye.position.set(0.15, 0.15, -0.25);
        this.segments[0].add(leftEye);

const rightEye = new THREE.Mesh(eyeGeo, eyeMat);
        rightEye.position.set(-0.15, 0.15, -0.25);
        this.segments[0].add(rightEye);

this.group.position.set(0, 0.35, 0);
        scene.add(this.group);

// Breathing/Squish Anim Vars
        this.animTime = 0;
      }

reset() {
        this.gridX = 0;
        this.gridZ = 0;
        this.isMoving = false;
        this.moveProgress = 0;
        this.facingAngle = 0;
        this.group.rotation.y = 0;
        this.group.position.set(0, 0.35, 0);
        
        // Reset segment trail positions
        this.segments.forEach((seg, idx) => {
          seg.position.set(0, 0, idx * 0.3);
        });
      }

moveTo(dx, dz) {
        if (this.isMoving) return;

this.startX = this.group.position.x;
        this.startZ = this.group.position.z;
        this.targetX = this.startX + dx * GRID_SIZE;
        this.targetZ = this.startZ + dz * GRID_SIZE;

this.gridX += dx;
        this.gridZ += dz;

// Determine orientation
        if (dx === 1) this.facingAngle = -Math.PI / 2;
        if (dx === -1) this.facingAngle = Math.PI / 2;
        if (dz === 1) this.facingAngle = Math.PI;
        if (dz === -1) this.facingAngle = 0;

this.group.rotation.y = this.facingAngle;

this.isMoving = true;
        this.moveProgress = 0;

sound.playHop();
      }

update(delta) {
        this.animTime += delta * 5;

if (this.isMoving) {
          this.moveProgress += delta * this.moveSpeed;
          if (this.moveProgress >= 1) {
            this.moveProgress = 1;
            this.isMoving = false;
          }

// Arc Motion (Slight Jump)
          const p = this.moveProgress;
          this.group.position.x = THREE.MathUtils.lerp(this.startX, this.targetX, p);
          this.group.position.z = THREE.MathUtils.lerp(this.startZ, this.targetZ, p);
          
          // Y Hop
          const hop = Math.sin(p * Math.PI) * this.jumpHeight;
          this.group.position.y = 0.35 + hop;

// Worm Stretch/Squish dynamics during hop
          const stretch = 1 + Math.sin(p * Math.PI) * 0.3;
          const squish = 1 - Math.sin(p * Math.PI) * 0.2;
          this.segments[0].scale.set(squish, squish, stretch);
        } else {
          // Idle breathing motion
          this.group.position.y = 0.35 + Math.sin(this.animTime) * 0.03;
          const idleSquish = 1 + Math.sin(this.animTime * 2) * 0.05;
          this.segments[0].scale.set(idleSquish, 1 / idleSquish, idleSquish);
        }

// Segment follower wave physics
        for (let i = 1; i < this.segments.length; i++) {
          const prev = this.segments[i - 1];
          const curr = this.segments[i];
          const targetZ = i * 0.3;
          
          // Wiggle effect
          const wiggle = Math.sin(this.animTime * 3 - i * 0.8) * 0.05;
          curr.position.x = THREE.MathUtils.lerp(curr.position.x, wiggle, delta * 10);
        }
      }
    }

// --- LEVEL & PROCEDURAL GENERATION ---
    class WorldManager {
      constructor() {
        this.lanes = new Map(); // Key: Z index, Value: Lane Data
        this.obstacles = []; // Cars, Mowers, Logs
        this.scenery = [];   // Trees, Rocks
        this.highestZ = 5;
        this.lowestZ = -20;
      }

reset() {
        // Clear old meshes
        this.lanes.forEach(lane => scene.remove(lane.mesh));
        this.lanes.clear();

this.obstacles.forEach(obs => scene.remove(obs.mesh));
        this.obstacles = [];

this.scenery.forEach(scn => scene.remove(scn.mesh));
        this.scenery = [];

this.highestZ = 5;
        this.lowestZ = -20;

// Initial Safe Platform
        for (let z = 5; z >= -5; z--) {
          this.generateLane(z, LANE_GRASS, true);
        }

// Generate forward lanes
        for (let z = -6; z >= this.lowestZ; z--) {
          this.generateRandomLane(z);
        }
      }

generateRandomLane(z) {
        // Decide lane type
        const rand = Math.random();
        let type = LANE_GRASS;
        if (rand < 0.4) type = LANE_ROAD;
        else if (rand < 0.75) type = LANE_RIVER;

this.generateLane(z, type);
      }

generateLane(z, type, forceSafe = false) {
        const geometry = new THREE.BoxGeometry(BOARD_WIDTH, 1, 1);
        let color = COLORS.grass;

if (type === LANE_GRASS) {
          color = (Math.abs(z) % 2 === 0) ? COLORS.grass : COLORS.grassAlt;
        } else if (type === LANE_ROAD) {
          color = COLORS.road;
        } else if (type === LANE_RIVER) {
          color = COLORS.river;
        }

const material = new THREE.MeshLambertMaterial({ color });
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, -0.5, z);
        mesh.receiveShadow = true;
        scene.add(mesh);

const laneData = { z, type, mesh };
        this.lanes.set(z, laneData);

// Populate Objects based on Lane Type
        if (!forceSafe) {
          if (type === LANE_GRASS) {
            this.spawnTrees(z);
          } else if (type === LANE_ROAD) {
            this.spawnRoadTraffic(z);
          } else if (type === LANE_RIVER) {
            this.spawnRiverLogs(z);
          }
        }
      }

spawnTrees(z) {
        // Add random trees on grass acting as impenetrable obstacles
        const numTrees = Math.floor(Math.random() * 3) + 1;
        for (let i = 0; i < numTrees; i++) {
          const x = Math.floor(Math.random() * (BOARD_WIDTH - 2)) - Math.floor(BOARD_WIDTH / 2) + 1;
          if (x === 0 && z === 0) continue; // Don't block origin

const treeGroup = new THREE.Group();
          
          // Trunk
          const trunkGeo = new THREE.CylinderGeometry(0.15, 0.2, 0.6, 8);
          const trunkMat = new THREE.MeshLambertMaterial({ color: COLORS.treeTrunk });
          const trunk = new THREE.Mesh(trunkGeo, trunkMat);
          trunk.position.y = 0.3;
          trunk.castShadow = true;
          treeGroup.add(trunk);

// Foliage
          const folGeo = new THREE.DodecahedronGeometry(0.5);
          const folMat = new THREE.MeshLambertMaterial({ color: COLORS.tree });
          const fol = new THREE.Mesh(folGeo, folMat);
          fol.position.y = 0.8;
          fol.castShadow = true;
          treeGroup.add(fol);

treeGroup.position.set(x, 0, z);
          scene.add(treeGroup);
          this.scenery.push({ mesh: treeGroup, x, z });
        }
      }

spawnRoadTraffic(z) {
        const speed = (Math.random() * 2 + 2) * (Math.random() < 0.5 ? 1 : -1);
        const type = Math.random() < 0.3 ? 'mower' : 'car';

const obstacleData = {
          z,
          speed,
          type,
          interval: Math.random() * 2 + 2,
          timer: 0
        };

// Spawn initial vehicle
        this.createVehicle(z, (Math.random() * BOARD_WIDTH) - BOARD_WIDTH/2, speed, type);
        this.lanes.get(z).traffic = obstacleData;
      }

createVehicle(z, x, speed, type) {
        const group = new THREE.Group();

if (type === 'car') {
          const carGeo = new THREE.BoxGeometry(1.4, 0.6, 0.8);
          const carMat = new THREE.MeshLambertMaterial({ color: Math.random() > 0.5 ? COLORS.car1 : COLORS.car2 });
          const car = new THREE.Mesh(carGeo, carMat);
          car.position.y = 0.3;
          car.castShadow = true;
          group.add(car);

// Cabin
          const cabGeo = new THREE.BoxGeometry(0.8, 0.4, 0.7);
          const cabMat = new THREE.MeshLambertMaterial({ color: 0xdddddd });
          const cab = new THREE.Mesh(cabGeo, cabMat);
          cab.position.set(0, 0.7, 0);
          cab.castShadow = true;
          group.add(cab);
        } else {
          // Lawnmower / Deadly Hazard
          const mowGeo = new THREE.BoxGeometry(1.0, 0.5, 0.8);
          const mowMat = new THREE.MeshLambertMaterial({ color: COLORS.mower });
          const mower = new THREE.Mesh(mowGeo, mowMat);
          mower.position.y = 0.25;
          mower.castShadow = true;
          group.add(mower);
        }

group.position.set(x, 0, z);
        scene.add(group);

this.obstacles.push({
          mesh: group,
          z,
          speed,
          type,
          width: type === 'car' ? 1.4 : 1.0
        });
      }

spawnRiverLogs(z) {
        const speed = (Math.random() * 1.5 + 1.0) * (Math.random() < 0.5 ? 1 : -1);
        
        // Spawn floating log/leaf
        this.createLog(z, -4, speed);
        this.createLog(z, 2, speed);

this.lanes.get(z).traffic = { z, speed, interval: 3, timer: 0, isRiver: true };
      }

createLog(z, x, speed) {
        const width = 2.2;
        const group = new THREE.Group();

const logGeo = new THREE.BoxGeometry(width, 0.2, 0.7);
        const logMat = new THREE.MeshLambertMaterial({ color: COLORS.log });
        const log = new THREE.Mesh(logGeo, logMat);
        log.position.y = 0.05;
        log.receiveShadow = true;
        group.add(log);

group.position.set(x, 0, z);
        scene.add(group);

this.obstacles.push({
          mesh: group,
          z,
          speed,
          type: 'log',
          width: width
        });
      }

update(delta, playerZ) {
        // Expand map dynamically as player moves forward
        if (playerZ - 15 < this.lowestZ) {
          const newZ = this.lowestZ - 1;
          this.generateRandomLane(newZ);
          this.lowestZ = newZ;
        }

// Cleanup distant lanes behind player
        this.lanes.forEach((lane, z) => {
          if (z > playerZ + 8) {
            scene.remove(lane.mesh);
            this.lanes.delete(z);
          }
        });

// Spawn new obstacles per lane timers
        this.lanes.forEach(lane => {
          if (lane.traffic) {
            lane.traffic.timer += delta;
            if (lane.traffic.timer > lane.traffic.interval) {
              lane.traffic.timer = 0;
              const spawnX = lane.traffic.speed > 0 ? -BOARD_WIDTH / 2 - 1 : BOARD_WIDTH / 2 + 1;
              if (lane.type === LANE_ROAD) {
                this.createVehicle(lane.z, spawnX, lane.traffic.speed, lane.traffic.type);
              } else if (lane.type === LANE_RIVER) {
                this.createLog(lane.z, spawnX, lane.traffic.speed);
              }
            }
          }
        });

// Move active obstacles
        for (let i = this.obstacles.length - 1; i >= 0; i--) {
          const obs = this.obstacles[i];
          obs.mesh.position.x += obs.speed * delta;

// Remove off-screen obstacles
          if (Math.abs(obs.mesh.position.x) > BOARD_WIDTH / 2 + 3) {
            scene.remove(obs.mesh);
            this.obstacles.splice(i, 1);
          }
        }
      }

isTreeAt(x, z) {
        return this.scenery.some(s => s.x === x && s.z === z);
      }
    }

// --- MAIN GAME ENGINE ---
    class Game {
      constructor() {
        this.worm = new Worm();
        this.world = new WorldManager();
        
        this.score = 0;
        this.highScore = localStorage.getItem('crossy_worm_high') || 0;
        this.isPlaying = false;
        this.clock = new THREE.Clock();

this.initUI();
        this.bindEvents();
        this.updateScoreDisplay();

// Initial Setup
        this.world.reset();
        this.animate();
      }

initUI() {
        document.getElementById('best').innerText = this.highScore;
      }

bindEvents() {
        window.addEventListener('resize', () => this.onWindowResize());

// Keydown Movement
        window.addEventListener('keydown', (e) => {
          if (!this.isPlaying) return;
          
          const key = e.key.toLowerCase();
          let dx = 0;
          let dz = 0;

if (key === 'w' || key === 'arrowup') dz = -1;
          if (key === 's' || key === 'arrowdown') dz = 1;
          if (key === 'a' || key === 'arrowleft') dx = -1;
          if (key === 'd' || key === 'arrowright') dx = 1;

if (dx !== 0 || dz !== 0) {
            this.tryMovePlayer(dx, dz);
          }
        });

// UI Buttons
        document.getElementById('start-btn').addEventListener('click', () => {
          sound.init();
          this.start();
        });

document.getElementById('restart-btn').addEventListener('click', () => {
          this.start();
        });

// On-screen Touch Controls
        const bindTouch = (id, dx, dz) => {
          const el = document.getElementById(id);
          el.addEventListener('pointerdown', (e) => {
            e.preventDefault();
            if (this.isPlaying) this.tryMovePlayer(dx, dz);
          });
        };

bindTouch('btn-w', 0, -1);
        bindTouch('btn-s', 0, 1);
        bindTouch('btn-a', -1, 0);
        bindTouch('btn-d', 1, 0);
      }

start() {
        document.getElementById('start-modal').classList.add('hidden');
        document.getElementById('gameover-modal').classList.add('hidden');

this.score = 0;
        this.updateScoreDisplay();
        
        this.world.reset();
        this.worm.reset();

this.isPlaying = true;
        this.clock.start();
      }

tryMovePlayer(dx, dz) {
        if (this.worm.isMoving) return;

const targetX = this.worm.gridX + dx;
        const targetZ = this.worm.gridZ + dz;

// Boundaries
        if (Math.abs(targetX) > Math.floor(BOARD_WIDTH / 2)) return;

// Check Tree Collisions
        if (this.world.isTreeAt(targetX, targetZ)) return;

this.worm.moveTo(dx, dz);

// Update Score (Distance Forward)
        const currentDistance = -targetZ;
        if (currentDistance > this.score) {
          this.score = currentDistance;
          this.updateScoreDisplay();
        }
      }

updateScoreDisplay() {
        document.getElementById('score').innerText = this.score;
        if (this.score > this.highScore) {
          this.highScore = this.score;
          localStorage.setItem('crossy_worm_high', this.highScore);
          document.getElementById('best').innerText = this.highScore;
        }
      }

gameOver(reason) {
        this.isPlaying = false;
        document.getElementById('death-reason').innerText = reason;
        document.getElementById('final-score').innerText = this.score;
        document.getElementById('gameover-modal').classList.remove('hidden');
      }

checkCollisions() {
        const playerPos = this.worm.group.position;
        const playerZ = this.worm.gridZ;
        const lane = this.world.lanes.get(playerZ);

if (!lane) return;

// ROAD LANE LOGIC (Vehicles)
        if (lane.type === LANE_ROAD) {
          for (let obs of this.world.obstacles) {
            if (obs.z === playerZ) {
              const obsX = obs.mesh.position.x;
              const dist = Math.abs(playerPos.x - obsX);
              if (dist < (obs.width / 2 + 0.3)) {
                sound.playSquish();
                this.gameOver(obs.type === 'mower' ? 'SQUISHED BY A LAWNMOWER!' : 'RUN OVER BY A CAR!');
                return;
              }
            }
          }
        }

// RIVER LANE LOGIC (Water / Logs)
        if (lane.type === LANE_RIVER) {
          let onLog = false;
          let logSpeed = 0;

for (let obs of this.world.obstacles) {
            if (obs.z === playerZ && obs.type === 'log') {
              const obsX = obs.mesh.position.x;
              const dist = Math.abs(playerPos.x - obsX);
              if (dist < (obs.width / 2 + 0.2)) {
                onLog = true;
                logSpeed = obs.speed;
                break;
              }
            }
          }

if (onLog && !this.worm.isMoving) {
            // Ride the log!
            this.worm.group.position.x += logSpeed * this.delta;
            this.worm.gridX = Math.round(this.worm.group.position.x);

// Check river edge death
            if (Math.abs(this.worm.group.position.x) > BOARD_WIDTH / 2) {
              sound.playSplash();
              this.gameOver('SWEPT AWAY BY THE RIVER!');
            }
          } else if (!onLog && !this.worm.isMoving) {
            // Drowned in Water!
            sound.playSplash();
            this.gameOver('DROWNED IN THE RIVER!');
          }
        }
      }

updateCamera() {
        // Smoothly follow worm on Z axis
        const targetZ = this.worm.group.position.z + 12;
        const targetX = this.worm.group.position.x + 12;

camera.position.z = THREE.MathUtils.lerp(camera.position.z, targetZ, 0.05);
        camera.position.x = THREE.MathUtils.lerp(camera.position.x, targetX, 0.05);
        
        const lookTarget = new THREE.Vector3(this.worm.group.position.x, 0, this.worm.group.position.z);
        camera.lookAt(lookTarget);

// Update direction light position to keep shadows clean near player
        dirLight.position.set(camera.position.x + 8, 30, camera.position.z + 8);
        dirLight.target.position.copy(lookTarget);
      }

onWindowResize() {
        const aspect = window.innerWidth / window.innerHeight;
        camera.left = -d * aspect;
        camera.right = d * aspect;
        camera.top = d;
        camera.bottom = -d;
        camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);
      }

animate() {
        requestAnimationFrame(() => this.animate());

this.delta = this.clock.getDelta();

if (this.isPlaying) {
          this.worm.update(this.delta);
          this.world.update(this.delta, this.worm.gridZ);
          this.checkCollisions();
          this.updateCamera();
        }

renderer.render(scene, camera);
      }
    }

// Initialize Game Engine when page loads
    window.addEventListener('load', () => {
      new Game();
    });
  </script>
</body>
</html>

Preview

Open Advanced Editor Full Screen