A arcade-style 3D game built with Three.js. Navigate a bouncing ball down a generated tower, rotate the tower to find gaps, and avoid killfield zones.
The objective is simple: reach the bottom of the tower. However, as you progress through the three distinct levels, the platforms become more treacherous, and the game challenges your reflexes.
- Level 1: DK Mountain – A bright, tropical setting with a clear blue sky.
- Level 2: Mario Airport – A mid-day sun setting with balanced shadows and a bustling runway background.
- Level 3: Bowser's Castle – A high-stakes, dark atmosphere featuring volcanic mists and high-contrast lighting.
- Rotate Tower Left: Press
A - Rotate Tower Right: Press
D - UI Interaction: Use the mouse to select levels and navigate the menu.
- 🟦 Solid (Blue): Safe zones. Bouncing here keeps you alive.
- 🟥 Killfield (Red): Danger zones. Touching these results in an immediate Game Over.
- ⬛ Empty (Gap): Your goal. Fall through these to increase your score and descend the tower.
Every game session is unique. The game uses a Fisher-Yates Shuffle to randomize platform layouts based on a level-specific difficulty configuration:
- Level 1: More gaps, fewer hazards.
- Level 3: Minimal gaps, maximum "killfield" coverage.
The game utilizes a dual-raycasting system to ensure precise landing detection.
- Left/Right Raycasters: Determine if the ball is landing on a solid edge or falling through a gap.
- Animation Sync: Collisions are processed only when the ball's jump animation reaches its lowest point (
endAnimationDelim), ensuring visual and logical synchronization.
- Pixel Art Style: Implements
RenderPixelatedPassfor a retro, low-res aesthetic. - Dynamic Lighting: Each level features custom
DirectionalLight(Sun) intensities andACESFilmicToneMappingto match the background atmosphere. - Splat Decals: Uses
MeshPhongMaterialwith normal maps to create 3D "paint splats" whenever the ball lands.
- Spatial Audio: Utilizes
THREE.AudioListenerandTHREE.AudioLoader. - Adaptive SFX: Background music changes based on game state, and landing sounds are triggered dynamically with a mute toggle.
- Clone the repository:
git clone https://github.com/AJamell/ComputerGraphicsFinal.git
- Install dependencies:
npm install
- Build the project:
npm run build
- Run the project:
npm run start
- 3D Models: GLB formats for the Bouncing Ball, Fire effects, and Level Maps.
- Textures: Splat decals and normal maps for realistic impact visuals.
- Sound Effects: Lava splash effects sourced from OpenGameArt.