click the capybara even when in the sky

Yeet that Capybara 🎮

About the Project

Yeet the Capybara is a fun and simple web-based game built using Laravel and Livewire, where you interact with a falling object — either a banana 🍌 or a capybara 🦫. The goal of the game is to "yeet" the object into the air and score as many points as possible before it falls back down. The game uses simple physics, such as gravity and varying fall speeds, to add an element of challenge.

Inspiration

The inspiration behind this project came from the desire to create a light-hearted game that combines fun animations with a minimalist design. I wanted to build something engaging yet simple, and Yeet the Capybara is the result of that vision — a game that's easy to play but difficult to master.

What It Does

The game works by simulating a falling object that the player interacts with. The player "yeets" the object into the air by clicking on it, and the object falls back down according to simulated gravity. As the object falls, it either slows down or speeds up depending on its height. The player’s score increases based on the distance the object travels before hitting the ground.

Features:

Interactive falling object (banana 🍌 or capybara 🦫)
Gravity simulation with different fall speeds
Score tracking
Game Over state when the object hits the ground
Reset functionality to restart the game

How We Built It

The game is built using Laravel as the backend, with Livewire for the reactive components. The game logic, including the falling physics, is handled by a Laravel component that updates the object's position based on simulated gravity. The game is also styled with Tailwind CSS for a modern, minimalist UI.

Key technologies used:

Laravel: For managing the backend and game state.
Livewire: For handling real-time UI updates without page reloads.
Tailwind CSS: For the UI and responsive design.

Challenges We Ran Into

One of the major challenges was handling the gravity simulation in a way that felt smooth and realistic. I had to tweak the fall speed based on height to ensure that the game didn't feel too fast or too slow. Achieving the right balance between fun gameplay and physics was tricky, but it was rewarding once I got it right.

Another challenge was managing the user interface (UI) elements while keeping them minimalistic but interactive. I wanted the game to be easy to use and visually appealing, without being overly complicated. Tailwind CSS helped me achieve a clean, modern look.

Accomplishments That We're Proud Of

Gravity simulation: Successfully implemented a gravity system with slow and fast fall speeds based on height.
Interactive UI: Used Livewire to create a dynamic, real-time experience without refreshing the page.
Minimalist design: Kept the UI simple and clean, focusing on user interaction with smooth animations.
Game logic: Designed and built the game flow from start to finish, including score tracking, game over state, and reset functionality.

What We Learned

Livewire: I learned a lot about how Livewire works and how it can be used to build reactive, real-time interfaces with Laravel.
Game mechanics: I gained a deeper understanding of how to simulate simple physics in a game, such as gravity and motion.
UI/UX design: I learned how to keep things simple but effective by focusing on clear, easy-to-understand game mechanics and an intuitive interface.

What's Next for Yeet the Capybara

The next steps for Yeet the Capybara include:

Adding more features, such as power-ups or obstacles, to increase the difficulty and engagement.
Improving the graphics: Experimenting with custom graphics for the falling objects and backgrounds.
Mobile optimization: Ensuring that the game works well on mobile devices by refining touch interactions.