Building an Animal Finder Telegram mini app V.1.0
Hey there, Friends! Imagine playing a fun game where you have to find animals as quickly as possible before time runs out. Sounds exciting, right? Well, that’s exactly what we’ve built—a Telegram Mini App that challenges your animal-spotting skills!
This game is super simple but full of fun. You’ll see a bunch of animal emojis, and your job is to find the right one before the timer reaches zero. The faster you find it, the better your chances of earning rewards. Now, let’s take a closer look at how this game works and how we built it!
What’s This Game All About?
Before we get into the technical details, let’s first understand how the game works. When you open the app, you’ll see many cute animal emojis like cats, dogs, horses, and more. The game will tell you the name of an animal, and you’ll have 30 seconds to find and click on the correct one.
If you pick the right animal, you win 1000 $DRW (our in-game money). If you choose the wrong one, you don’t get a reward, but don’t worry—you can always try again! The game is all about speed and accuracy, so keep your eyes sharp and be ready to spot the right animal quickly.
The Foundation of the Game: HTML Structure
Think of a house. Every house needs a strong structure before you start painting the walls or adding furniture, right? Well, in our game, the HTML structure is like the skeleton that holds everything together.
We have divided our app into different sections, but you’ll only see one section at a time. Here’s what’s inside:
- Game area (main page): This is where you play the game.
- Future feature pages: We have placeholders for Frez, Tasks, and Airdrop—features that we might add later.
- Navigation bar: This is like a remote control that lets you move from one section to another easily.
Inside the game area, there are three main parts:
- Stats Display – This shows your balance and how much time you have left.
- Target Card – This tells you which animal you need to find.
- Game Grid (Apartment) – This is where all the animal emojis are displayed, waiting for you to find the right one.
Making It Look Nice: CSS Styling
Now that we have our structure, we need to make the game look beautiful. This is where CSS styling comes in.
We wanted the game to blend well with Telegram, so we used the same colors Telegram uses. If you use dark mode in Telegram, the game will also appear in dark mode. If you use light mode, the game will adjust to match!
Some cool design features we added:
- A responsive grid layout that adjusts to different screen sizes.
- Smooth animations when you click on the animals.
- A fixed navigation bar with glowing icons to show where you are.
- Rounded corners and soft shadows to give the game a modern look.
The Brain Behind the Game: JavaScript
This is where the real magic happens! JavaScript is like the brain of our game—it controls how everything works. Let’s take a look at some of its key functions.
1. Logging You In Automatically
When you open the app, you don’t need to create an account or type in a password. The game logs you in automatically using your Telegram account! This is made possible by a service called Firebase, which helps us store your game data safely.
2. Starting the Game
Every time you start a new round, the game does the following:
- Picks a random animal from a list of 20 animals.
- Shuffles the animal emojis so they appear in different spots each time.
- Makes sure each animal is clickable so you can make your choice.
3. Playing the Game
Here’s what happens during the game:
- The app shows you the name of an animal.
- The 30-second countdown begins.
- You click on an animal:
- If it’s correct, your balance increases, and the screen flashes green.
- If it’s wrong, the screen flashes red.
- Whether right or wrong, a new animal is chosen, and the timer resets.
4. Keeping Track of Your Score
Every time you earn $DRW, your balance updates instantly on the screen and in the database. This ensures that your progress is never lost, even if you close the app and come back later!
Making the Game Fun and Engaging
We wanted this game to be more than just clicking on animal emojis. That’s why we added extra features to make it more enjoyable:
- Vibrations: When you click the right or wrong answer, your phone vibrates a little to give you feedback.
- Color Changes: The game screen changes colors when you win or lose.
- Smooth Page Transitions: Moving from one section to another feels seamless.
- Easy-to-Use Design: Everything is placed in a way that makes the game simple and fun to play.
How You Move Around: Navigation System
At the bottom of the game, you’ll see small icons. These aren’t just for decoration—they help you move between different sections of the app!
- Active Icons: The icon of the section you are in will glow.
- Easy Switching: You can go from the game to other features with just one tap.
- Auto-Adjusting Colors: The icons change colors based on your Telegram theme.
The Technical Side of Things
For those curious about the deeper technical details, here are some interesting points:
- We use modern JavaScript (ES6) for clean and efficient code.
- We use Firebase to handle user data securely.
- The game’s design is powered by CSS variables, making theme changes easy.
- All animations run using CSS transitions, ensuring smooth performance.
What’s Next?
Right now, the game is focused on finding animals, but we have plans to add more features in the future. The extra sections (Frez, Tasks, and Airdrop) are already in place and will be used for exciting new updates soon!
Conclusion
This game is a perfect example of how simple ideas can turn into fun and interactive experiences. It’s lightweight, fast, and fully integrated into Telegram, making it easy for anyone to play.
Fun Fact:
The entire game runs on your phone without needing to download anything! Plus, using emojis instead of pictures makes the game super fast and visually appealing.
Whether you’re someone who loves animals, a gamer looking for a quick challenge, or just curious about how Telegram Mini Apps work, we hope you now have a better idea of what goes on behind the scenes. Now, go ahead and try spotting some animals—good luck!
