We hit 1000 subscribers on 9th of January. To celebrate it with my audience, I wanted to make something special. Then the idea clicked: 1000 subscribers equal 1000 cells. One cell would hide a confetti. And, you, the viewer, would have to find it within a time limit to unlock special perks. And since we're already working with confetti, why not add some confetti animation to make it even more fun?
👉 Play the game here: https://technophile-1000-subs.netlify.app
Design
As always, I started with building the sketch in Figma, because I wanted to play around with different layouts and colors. And, finally, I settled on a complementary cyan and orange palette on a sleek dark theme.
Coding
Now, design is ready, let's get to coding. Why use a framework for a project when you can use Vanilla JavaScript? So, I first built the grid with 1000 cells and hid a confetti in one of them. By the way, when building games like this, I usually prefer Object-Oriented approach, because it makes the code clean and organized.
Layout was done, but, plain cells were not exciting, So, I added a cool hover effect where previously hovered cells slowly fade back to their original color. I used GSAP for this animation.
Now, finding the confetti itself is kinda boring, so, I added a timer for extra challenge. You have 3 minutes to find the confetti. Once you find the hidden confetti, the game reveals how long it took you. Share your best time from your first 3 tries in the comments.
And, I added a twist. If you find the confetti fast enough, you unlock special perks. For example, if you manage to beat the game under 1 minute, you will get access to our Discord server, where you can ask any questions from me.
And, if you find it under 30 seconds, you will get a random secret message which you have to type in this video comment. And, I will make a special mention of hardcore players in my next videos. Secret message might look just like a normal comment. So, no cheating or copying from other comments :)
Finally, if you manage to beat it under 10 seconds, well, I won't spoil this one. You'll have to see it for yourself. And, I promise it's NOT a Rickroll xD
For the finishing touch, I added various confetti animations for each perk. I used the Canvas Confetti library for the animations. And, the project is finished.
So, try this game out yourself! Let me know your best time. Good luck!
As always, thanks for reading and I'll see in the next one.
Top comments (0)