Animal Friends Puzzle
Spatial recognition HTML game
My four year old daughter loves animals, so I used Claude 4 and Gemini 2.5 to generate my latest HTML game: Animal Friends Puzzle.
It’s a very simple game, obviously.
It allows her to drag tiles from the red area to the green area, makes a satisfying little sound as she does, and once all the pieces fit there’s a You Win! screen that pops up, and you can play again, perhaps this time on a harder difficulty.
To rotate the pieces, just release them over the rotating circle icon.
Some updates I have planned are
Expand the red “bag” area containing the puzzle pieces the player has available to place
Prevent pieces released in the wrong place from going off the screen and getting lost
Possibly shrink the items in the puzzle bag and have them enlarge as they are dragged out so that you can more easily see what items are available (a possible alternative on screens where this area appears too small.
Separate concerns into multiple files rather than a single index.html containing everything
So it isn’t perfect, but it’s definitely good enough to release.
Piper loves it and I hope you enjoy, too! You can find and fork the source code from my Github and make your own alterations, as I am releasing it under MIT license. Let me know how your kids like it in the comments, the feedback is super helpful!