Making the Fruit Box Game

The Fruit Box game is a puzzle game by GameSaien where players need to select combinations of numbers that sum up to 10. This game was trending in Japan and Korea for a while, so I thought I would try to recreate the game using technologies that I am familiar with. The game is built using React and TypeScript, with a focus on performance optimization and clean code architecture.

#Game Mechanics

The core gameplay revolves around these key mechanics:

#Development Process

The first thing that came to my mind was developing it using AI. I thought it would be a great use of AI development because games tend to be quite simple in its requirements and don't require any external context.

I started with v0.dev, going until I ran out of the daily free usages. You can see my prompts here. Most of the game logic was completed by the final iteration before the free usages ran out. I also explored displaying the available combinations because the number seemed to high, and used it to debug the issue where it would also display "fake" combinations showing diagonal combinations, or combinations that were "unreachable" without clearing out some neighboring cells first.

I then used the files from v0 and moved it into my projects, and decided to use Github Copilot for the rest of the development. After about an hour of prompting, I got a working game!

Although the game was "complete", there were so much more to do. Because the code is 100% written by AI, it lacked lots of things. For example, it has lots of unnecessary rerenders, doesn't work on mobile, and just little details missing everywhere. This was done with several more hours of prompting and manual edits to make it work like how I wanted it to. Now it has (almost) no unnecessary rerenders and it works all devices!

A little side effort after the game development, I decided to update my site to also include a "games" section where I can dynamically import all the games I develop in the future.

tsx
import { lazy } from "react";

export const games = {
  "fruit-box": {
    title: "Fruit Box",
    component: lazy(() => import("@/app/components/games/fruit-box/fruit-box")),
  },
  // Add more games here
  // 'tetris': {
  //   title: 'Tetris',
  //   component: lazy(() => import('@/app/components/games/tetris/tetris')),
  // },
} as const;

export type GameSlug = keyof typeof games;

#Component Architecture

The game is structured into five components:

#Fruit-Box Component

1. The main entry point to the game
2. Keeps track of the game status, and display the game.

#Game-Stats Component

1. Made to reduce rerenders when timer ticks.
2. Only rerenders this component when timer ticks.

#Timer Component

1. Logic of the timer.
2. Displays the time left.

#Grid Component

Most of the logic lives here:

1. Manages the core game logic and state
2. Handles mouse/touch interactions for desktop and mobile devices
3. Cell selection algorithm with validation
4. Update score and active combinations
5. Uses effect hooks to initialize the game
6. Implemented efficient cell rendering with memoization
7. Includes combination detection algorithm that validates all possible options

#Cell Component

1. Represents individual grid cells with fruit (apple) icons
2. Uses memo for performance optimization
3. Features conditional rendering based on cell state:
   1. Selected state (yellow background)
   2. Empty state (gray background)
   3. Normal state with fruit icon and number
4. Used lucide for the apple icon.

#Performance Optimization

Several optimization techniques were implemented:

1. Used React.memo for all components to prevent unnecessary re-renders
2. Implemented useMemo and useCallback for complex calculations
3. Optimized the active combinations detection algorithm
4. Efficient state management for selection tracking

#Challenges Faced

Not necessarily challenges that I've had, but ones that the AI had:

1. Combination Detection: Creating an efficient algorithm to detect all possible combinations that sum to 10. It took several prompts just to get rid of small bugs where it would show cells that were actually not a valid combination.

2. Performance: The code written by AI had zero mind for performance. I had to go back in and add memoizations and ask it to try to minimize the rerenders.

#Future Improvements

Some cool enhancements that I would like make in the future:

1. Add sound effects
2. Adding animations for matched combinations

If you play the game and these are there, it means I did update the game!

#Final Thoughts

Building this game was actually very fun! Besides being able to play the game while developing, I could see the changes in real time and see how much better it performs, thanks to react-scan.

The project also demonstrated how TypeScript and linters can help catch potential issues early in game logic implementation, making the development process more robust and maintainable.