I Created Corona Clicker on Vue3 and Integrated It into a Telegram Web App
Tags: vue, api, webdev, frontend
Published: 2024-06-07 18:54:46

Recently, I was inspired by the game [Hamster Kombat](https://t.me/hamsteR_kombat_bot/start?startapp=kentId340146423) and decided to create my own clicker game based on Vue3, which I integrated into a Telegram Web App. In this article, I'll talk about how I came up with the idea, how I implemented the project, and what I plan to add in the future.
## Inspiration from [Hamster Kombat](https://t.me/hamsteR_kombat_bot/start?startapp=kentId340146423)
[Hamster Kombat](https://t.me/hamsteR_kombat_bot/start?startapp=kentId340146423) is a mobile clicker game. Despite its name, there are no "combat hamsters" in it. The main character is a hamster who is the CEO of a crypto exchange. Initially, he has nothing to his name (not even fur). Gradually, the player helps the hamster earn money and achieve success.
The idea of a simple yet captivating clicker mechanic, where each tap brings in coins, seemed interesting and inspiring to me. I decided to create my version of such a game, with the crown as the main element.
## Development on Vue3
To implement my project, I chose Vue3, a modern framework for building user interfaces that I had long wanted to try out. Starting with a simple idea, I created a prototype game where users click on a crown image to earn coins.
## Key Development Steps
1. Creating the Project on Vue3: I used Vue CLI for a quick project setup.
2. UI Development: The main game screen includes an image of a crown and a coin counter.
3. Clicker Logic: I wrote simple logic that increases the number of coins with each click on the crown.
4. Integration with Telegram Web App: I set up interaction with Telegram so users could play directly in the chat.
## Integration into Telegram Web App
Telegram offers great opportunities for integrating web applications. I decided to take advantage of this to make my clicker accessible to a wide audience. With the Telegram Web App, users can play my game without leaving the messenger.
## Key Integration Steps
1. Bot Registration: I created a bot through BotFather and obtained a token.
2. Web App Setup: I added links to the web application and configured them to work inside Telegram.
3. Launch and Testing: I conducted testing with friends and received initial feedback.
## Playing the Game in Telegram
Now, anyone can try my game by simply following this link: [Corona Clicker Bot](https://t.me/CoronaClickerBot). Players can click on the crown to earn coins, competing with friends and acquaintances.
## Future Plans
I am actively working on improving the game and adding new features. Here are a few ideas I plan to implement:
1. Achievement System: Add rewards for completing specific tasks.
2. Upgrade Shop: Allow players to spend coins on upgrades that help earn even more.
3. Daily Tasks: Introduce daily quests to keep the game interesting.
4. Player Rankings: Create a global leaderboard so players can compete with each other.
## Feedback
I value hearing opinions and suggestions from players. If you have ideas for the game's development, please contact me on Telegram: [king_triton](https://t.me/king_triton). I am always open to new ideas and suggestions.