Tick Tock Toe
Classic Tic Tac Toe with an attitude
[THE CHALLENGE]
Building a Tic Tac Toe game is a beginner rite of passage, but most implementations look identical and feel lifeless. The goal was to take a trivial game and make it feel incredibly tactile and punchy.
[THE SOLUTION]
I styled the game board with 4px solid borders, a retro neon color scheme, and custom click handlers that trigger screen shakes (CSS animation offsets) and localized audio pops generated via code.
[TECHNICAL DEEP DIVE]
Uses pure React state to track game turns and win lines. Incorporates a custom hook that fires short audio bursts at different frequencies (low pop for 'O', high pop for 'X', slide effect for win). Board vibration is triggered using a temporary class containing a keyframe animation.
// DEVELOPER'S RETROSPECTIVE
"Renaming it 'Tick Tock Toe' for no reason was a great marketing strategy for my local peer group. People actually clicked it to see if it had something to do with clock timers. It didn't. It's just a game, but making the game feel heavy and clicky taught me a lot about CSS transitions."