The 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.
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 , going until I ran out of the daily free usages.
You can see my prompts .
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.
final output from v0
I then used the files from v0 and moved it into my projects, and decided to use for the rest of the development.
After about an hour of prompting, I got a working game!
final 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";exportconst 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')),// },}asconst;exporttypeGameSlug=keyoftypeof games;
This allows me to import only the game that the user actually wants to play!
Not necessarily challenges that I've had, but ones that the AI had:
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.
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.
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 .
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.
Comments