Tower Blocks — 3D Stacking Game with JavaScript and Three.js

Problem

I wanted to explore how to build a simple and addictive 3D game experience using only web technologies. The goal was to create a stacking mechanic with satisfying visual feedback, without relying on external engines like Unity or Unreal.

Solution

I developed a 3D stacking game where the player must place moving blocks with precision. Each mistake is visually represented with smooth animations and effects, and the challenge is to reach the highest possible score before the tower collapses.

Technologies Used

• Vanilla JavaScript — game logic and state management
• Three.js — 3D rendering with orthographic camera and toon materials
• GSAP (TweenLite) — smooth animations for blocks and camera
• HTML + CSS — layout and responsive design with mobile support
• LocalStorage — persistent high score tracking

Features

• Block stacking with overlap calculation
• Falling and rotation animations for sliced blocks
• Score system with persistent high score
• Sound feedback when the tower collapses
• Responsive interface with mobile touch support

What I Learned

• Structuring a game using object-oriented JavaScript
• Handling 3D geometry and visual collisions with Three.js
• Enhancing user experience with visual and audio feedback
• Managing game states and data persistence with LocalStorage
• Adapting controls for both desktop and mobile environments

How to Access

Click here to play