Web Runner Game

A simple Temple Run-style endless runner game built entirely within a single HTML file, using the Three.js library for basic 3D graphics.

The challenge was to create a playable game experience adhering to the constraints of:

• All code (HTML, CSS, JavaScript) in one file.
• No external assets (models, textures, sound files).

Live Demo

Play the game live here: https://gnurtuv.github.io/web-runner-game/

Features

• Endless procedural track generation (ground segments, gaps).
• Lane switching (Left/Right).
• Jumping and Sliding mechanics.
• Various obstacle types (jump, slide, full blocks) and obstacle patterns.
• Collectibles (Coins).
• Power-ups:
  • Invincibility Shield (destroys obstacles).
  • Coin Magnet (collects nearby coins).
  • Score Multiplier (x2).
• UI Timers showing active power-up duration.
• Score tracking and persistent High Score saved via localStorage.
• Basic 3D graphics using Three.js primitives and materials.
• Object pooling implemented for ground segments, obstacles, coins, and power-ups for performance optimization.
• Visual polish: item rotation, player tilt/squash animations, particle effects on collection/destruction.
• Procedural audio feedback for actions using the Web Audio API.
• Pause/Resume functionality.
• Simple background elements for added depth.

How to Play

• Objective: Run as far as possible, avoid obstacles, and get the highest score.
• Controls:
  • Left/Right Arrows or A/D: Change lanes
  • Up Arrow or W: Jump
  • Down Arrow or S: Slide
  • P: Pause / Resume Game

Technology Stack

• HTML5
• CSS3
• JavaScript (ES Modules)
• Three.js (via CDN) for 3D rendering
• Web Audio API for procedural sound effects

How to Run Locally

1. Clone or download this repository.
2. Open the index.html file directly in a modern web browser that supports ES Modules (like Chrome, Firefox, Edge, Safari).

Potential Future Ideas

• Add touch controls for mobile devices.
• Implement more complex obstacle patterns or moving obstacles.
• Add more power-up types (e.g., temporary speed boost).
• Further performance optimization (e.g., pooling geometries).
• More detailed environment or visual effects.