Clash of Claws

Inspiration

Clash of Claws was inspired by the idea of blending AI interaction with arcade gameplay. We wanted to create something that didn't just use AI behind the scenes, but actually allowed the player to interact with it physically. Concept started with a simple pixel cat runner, but evolved into something more dynamic: - A hand-tracking control system powered by computer vision - An adaptive AI boss in an arena battle - A cinematic intro cutscene with voice narration Classical pixel games have always been nostalgic to us, so it's a pleasure to implement a heartfelt game with similar vibes to Flappy Bird and Geometry Dash, while integrating modern AI technologies.

What it does

It is a pixel-art runner game where you play as Nori, a fearless orange cat. Game features: - Real-time hand tracking using MediaPipe - AI-controlled boss with adaptive attack logic - Fully animated 2-character intro cutscene - Hybrid input system - Voice-narrated story dialogue Players can jump using Keyboard input or upward hand motion detected through the webcam. During the arena battle, the boss adapts to player behaviour, changing patterns and increasing difficulty across phases.

How we built it

Computer Vision: We used MediaPipe Hands for real-time hand landmark detection. - Vertical finger motion - Jump detection is triggered when movement persists for multiple frames, vertical delta exceeds a threshold, and a cooldown has elapsed.

Game Engine: - Built with Phaser 3, Typescript, and Vite. - Structured the game into scenes: BootScene, StoryIntroScene, MainMenuScene, RunnerScene, ArenaScene, GameOverScene and VictoryScene. - Sprite animations use sprite sheets

Cinematic Cutscene: The intro features two animated cats, a speech bubble system, typewriter text animation, MP3 voice playback per dialogue line, and fade transitions between scenes.

AI Boss Logic: The boss uses rule-based AI logic to track player position, predict movement timing, and change attack frequency across phases. Behaviour escalates dynamically as levels increase.

Challenges we ran into

- Implementing the hand tracking was a little difficult due to other objects also being captured on the camera, which led us to implement smoothing and rolling averages to prevent accidental jumps.
- Ensuring the speech bubbles rendered above sprites required depth management in Phaser.
- AI logic to predict movement timing 

Accomplishments that we're proud of

- The design of the game
- Cat sprites
- Voice playback and dialogue transitions

What we learned

- How real-time computer vision integrates into browser games
- Scene management patterns in Phaser
- Audio context handling in web environments
- How to build adaptive AI game systems

What's next for Clash of Claws

- Implement more Bosses
- Harder levels
- Multiplayer game

Built With

• html5canvas
• mediapipe
• mp3voiceassets
• phaser3
• typescript
• vite
• webaudioapi