Back to Projects

Clockwise

A browser-based timing and strategy game where you align rotating color wheels to beat the clock. Master the patterns, control the chaos, and race against time!

60

How to Play

Goal
Reduce the counter to 0 by aligning the colored wheels before time runs out.
Controls
Click "Next" under each wheel to manually advance it, or let them auto-rotate.
Scoring
• 3 wheels: -1s
• 4 wheels: -10s
• 5 wheels: -60s!
Strategy
Odd wheels rotate clockwise, even wheels counter-clockwise. Timing is key!
View on GitHub

Game Mechanics

Counter System: The counter starts at 60 and increases by 1 every second. Your goal is to reduce it to 0 by aligning the colored wheels. When you reach 0, you win!

Difficulty Levels: Choose between Easy (4s rotation), Medium (2s rotation), or Hard (1s rotation) to control the speed of the wheels.

Wheel Behavior: All 5 wheels share the same cyclical color sequence, but even-numbered wheels (2, 4) start at a different position. Odd-numbered wheels (1, 3, 5) rotate clockwise, while even-numbered wheels rotate counter-clockwise.

Scoring: Align 3 wheels for -1 second, 4 wheels for -10 seconds, or all 5 wheels for -60 seconds!

Strategy: Watch the colored arc around each wheel showing the next color. Timing your manual "Next" rotations with the auto-rotation is key to creating alignments.

Technical Implementation

Built with: React/Next.js with TypeScript for type-safe game logic

State Management: React hooks (useState, useEffect, useCallback) for game state, auto-rotation timers, and real-time alignment detection

Graphics: SVG paths with trigonometric calculations for color wheel segments and dynamic arc indicators

Animations: Tailwind CSS transitions for smooth color changes, center circle fills, and score display effects

Responsive Design: Adaptive layout with desktop (single row) and mobile (two-row) wheel arrangements, fully touch-friendly

Features

  • ▸5 wheels with synchronized color sequences and bidirectional rotation
  • ▸Three difficulty levels with adjustable rotation speeds
  • ▸Colored arc indicators showing the next color for each wheel
  • ▸Real-time alignment detection with visual feedback (center circle fill)
  • ▸Victory condition with "You Won!" message when counter reaches 0
  • ▸Randomized starting positions for replayability
  • ▸Responsive mobile layout with optimized wheel arrangement
  • ▸Stop game functionality to reset and start over