Reliving childhood with an interactive platform
As a child, one of the things I enjoyed the most was trying to guess the names of Pokémon. It was a fun challenge that mixed memory, knowledge, and a bit of luck. Inspired by this nostalgia, I decided to create an interactive platform where users can test their skills at guessing Pokémon.
The goal was to create a simple yet engaging application that allowed users to guess the name of a Pokémon based on a blurred image. As the user made mistakes, the application provided hints, revealing correct letters in the right positions. When the user guessed correctly, the image was revealed, and the application automatically advanced to the next Pokémon after 8 seconds.
Here’s how everything was developed:
Technologies Used
Backend: Laravel
Laravel: The PHP framework was chosen for its robustness and ease of use, is the main base of my blog too. It was responsible for managing the game logic, such as generating hints, validating answers, and communicating with the Pokémon API.
Pokémon API: I used the PokeAPI to fetch information about Pokémon, such as names and image URLs.
Database: A simple database was created to store Pokémon and their image URLs. Laravel migrations were used to create the table structure.
Sessions: Laravel sessions were used to store the current Pokémon and the hints generated during the game.
Frontend: Tailwind CSS and GSAP
Tailwind CSS: To style the application, I used Tailwind CSS, which allowed me to create a responsive and visually appealing interface with minimal code.
GSAP (GreenSock Animation Platform): To add smooth animations, such as the Pokémon image reveal effect and the "shake" animation when the user guessed wrong.
Development Order
Project Setup:
Created a new Laravel project and set up the development environment.
Installed Tailwind CSS and GSAP for the frontend.
Integration with PokeAPI:
Developed a Laravel command (php artisan fetch:pokemon) to fetch the first 150 Pokémon from the PokeAPI and save their information in the database.
Pokémon images were downloaded and stored locally.
Game Logic:
Created a controller (PokemonController) to manage the game logic, including hint generation and answer validation.
Used sessions to maintain the game state (current Pokémon and hints).
User Interface:
Developed the interface using Blade templates and Tailwind CSS.
Added animations with GSAP to enhance the user experience.
Additional Features:
Added an 8-second timer to automatically advance to the next Pokémon after a correct answer.
Allowed the user to manually advance by pressing Enter.
Challenges and Solutions
Hint Generation:
The biggest challenge was generating hints that revealed correct letters in the right positions without repeating unnecessary information. To solve this, I created a function that compares the user’s guess with the actual Pokémon name and reveals only the correct letters.
Reveal Animation:
I used GSAP to create a smooth animation that removes the blur effect from the Pokémon image when the user guesses correctly. This added a visually pleasing touch to the experience.
Session Management:
To maintain the game state, I used Laravel sessions. This allowed the game to function without the need for a complex database or user authentication.
Final Result
The result was a simple yet fun application that combines nostalgia with modern technology. Users can test their Pokémon guessing skills, receive helpful hints, and enjoy an engaging visual experience.