Long time no see !
A bit of story- Back in 2024 I came across the Google Cloud webinar and I readily joined that session, insightful and edgy.. They invited me to join Google Developer Program to thrive in the fraternity of coders and developers.
To my surprise, Lately I was scrolling my profile looking at earned badges and exploring various tabs what I found was, they provide learnings as well. Truly I hadn't had recalled that they give the benefit of learning various skills especially for developers if they need to incorporate something into their application which complement getting knowledge from classroom learnings.
I searched through the learning (Codelabs) page whether I can rush onto a skill new and demanded nowadays.
I clicked...
Vibe-code a kids game with Gemini and publish with Firebase!
I was missing my 6 year old, I left her at home without telling her and the guilt arose each time I saw this little child in pictures and even randomly when I see my birds. I was determined to make this project to feel good. This was my first intention
The project is based on java script specifically on p5.js which is deployed on firebase.

What is p5.js?

Even I was curious when I was going through the tutorial pages because I am very new to java script in fact I learned Vue.js very recent for frontend while creating my agentic AI project...
p5.js is an open source java script library, free and designed for coding to hone creativity. It gives you special commands to draw shapes,adding colours and creating animations which is displayed in the web browser simultaneously and easier to implement than the traditional use of java script which is used to make websites work for different use cases.
The p5.js is the great tool for artists and beginners who intend to create beautiful animations and flex their creativity with the help of coding.

THE GAME

As per the tutorial, the prompt was given for making pixel dinosaur which needs to hop over every obstacle- the game which we play when the internet is not connected on the google search engine, I loved that prompt and the code worked in first go, however I didn't like the game when I thought about the little kid at home, I asked Gemini about my sharp-minded 6 year old trait and at this age they need to be engaged in a fun activity.

This is how Clever-Fox-Quest game came to life a stress-free educational colour matching game for kids in which they can drag their mouse which is moving a fox left to right and match the correct colours displayed on screen.

The 5 correct matches will change the colours and the game won't bore the children.
When 30 points are achieved then the fireworks are shown with the YOU WIN! message on the screen.
For the controls you can press the spacebar to restart the game.
Gemini suggested kids do not like to be defeated which result in irritable behaviour and get cranky.
I know nowadays the kids are way more ahead to play simple games but this game has the nice animation..
My second reason to choose this tutorial is to work hands-on with firebase, deployment is pain for me when I leverage AWS services for full stack application, i will come back to this some other day!

What is Firebase

Firebase is a platform created by Google that gives developers tools to build, host and manage web and mobile apps.
For now I used Firebase hosting to deploy the game on the internet by utilising firebase deploy command on my vs code terminal. I can use various services and tools provided by Firebase to expand my game like integrating leaderboards by taking help of built-in databases by firebase and any other functionality like creating accounts of the players as well.
You can see the preliminary stage of the game by clicking the link below

If she says she wants something more interesting and engaging then I have to research more that what can make these children locked-in.
The cursor to move fox moves so smoothly, it is because of p5.js library built around 2 main functions
setup() and draw()
setup() runs only 1 time loads the images and set the starting from the score 0.
draw() is the miraculous part of the code which usually runs 60 times per second.Every fraction of a second, it wipes the screen clean and redraws the fox, the gems, and the score in their slightly new positions. This is what creates the illusion of smooth animation. This is why it looks like an art.

Any questions are welcomed and we can collaborate on the creative projects.
I hope she likes the game so that I can feel low-key talented for some time hehehe!