JS

ToneTrail Snake

Type: Interactive Game Role: Developer Year: 2025
JavaScript GSAP Tone.js Canvas CSS3

Overview

ToneTrail Snake reimagines the classic snake game with dynamic audio and modern animation. Each movement and food collection triggers unique Tone.js audio feedback, creating a synesthetic gameplay experience where sound and visuals are deeply intertwined.

Key Features

  • Dynamic audio integration using Tone.js — each action has a unique sound
  • GSAP-powered animations for smooth snake movement and visual effects
  • Multiple difficulty levels affecting speed and scoring
  • Score tracking with high-score persistence
  • Polished UI with start screen, game HUD, and game-over summary
  • JSON-based game state for save/load functionality

What I Learned

Integrating Tone.js with game logic taught me about the Web Audio API, audio scheduling, and the challenges of synchronizing sound with visual events in real-time applications. GSAP's timeline control was essential for creating smooth, frame-perfect animations.