Bunny in the Wisdom World

Bunny in the Wisdom World: Hop into a platforming quest where every equation fuels your evolution.

Comment

Inspiration

Bunny in the Wisdom World draws inspiration from classic 2D platformers. The goal was to merge retro arcade gameplay with educational elements, creating an environment where learning math is integrated directly into the core game mechanics rather than being a separate task.

What it does

The application is an interactive educational game that features:

  • Math-Powered Progression
  • Dynamic Difficulty
  • Multi-Stage Gameplay
  • Real-time Game Engine
  • Scoring and Ranking

How we built it

The project utilizes a modern web stack designed for performance and type safety using Gemini 3 Pro via Google AI Studio.

  • Frontend: Built with React 19 for UI management and TypeScript for robust data structures and entity definitions.
  • Game Engine: An HTML5 Canvas engine integrated into React via a GameCanvas component to ensure smooth movement and rendering.
  • Styling: Tailwind CSS for rapid UI development and a "pixel-font" aesthetic using the Press Start 2P Google Font.
  • Build System: Powered by Vite for fast development and optimized bundling.
  • AI Readiness: Configured to interface with the Gemini 3 Pro API for future AI-driven features or content generation.

Challenges we ran into

  • Canvas Lifecycle Management: One significant technical hurdle was ensuring the Canvas engine completely reset during a game restart. This was solved by implementing a restartKey state that forces a full React remount of the GameCanvas component.
  • State Synchronization: Balancing the high-frequency updates of a game loop (60FPS) with React's asynchronous state updates for the HUD (score and stage) required careful prop drilling and callback management.

Accomplishments that we're proud of

  • Seamless HUD Integration: Creating a responsive HUD that overlayed the game canvas perfectly, providing real-time feedback on "forms" and scores.
  • Flexible Entity System: Designing a types.ts structure that allows for various entity types, including players, enemies with different ranks, and projectiles, all sharing common rectangular physics.

What we learned

  • React 19 Hooks: Refining the use of useState to manage complex game modes like intro, playing, quiz, gameover, and victory.
  • ESM and Import Maps: Successfully using esm.sh and import maps in the HTML entry point to manage dependencies.
  • Platform Specifics: Learning to handle the specific environment constraints of running an app within AI Studio.

What's next for Bunny in the Wisdom World

  • Expanded Enemy Variety: Leveraging the existing Enemy type to add more ranks and behaviors beyond the current "wolf" shooter and walker.
  • Advanced AI Integration: Utilizing the pre-configured Gemini API key to generate procedural levels or dynamic dialogue for the "Wisdom World".
  • Extended Levels: Moving beyond the initial 5-stage progression to include more diverse environments and harder math challenges.

Built With

Share this project:

Updates