🧠 Description
This project demonstrates a fun and interactive bird flying game built entirely with pure CSS — no JavaScript required! 🐥 The game features smooth animations that make the bird flap its wings and move across a beautifully styled background. Using CSS keyframes, transitions, and transforms, the illusion of continuous flight and motion is achieved in a lightweight and responsive design. It’s a perfect example of how powerful CSS animations can be for creating dynamic, game-like experiences without relying on JavaScript. Ideal for beginners learning advanced CSS animation techniques or developers experimenting with creative front-end effects.
💻 HTML Code
The HTML structure creates the foundation of the game interface without using any JavaScript logic. The (div class="wrapper") acts as the main game area, containing all visual elements and gameplay mechanics. Inside it:
A timer bar (div class="timer")(span) (span) (div) visually shows how much time is left before the game ends.
The "GAME OVER" text (div class="gameover") appears at the end of the game using CSS animation.
The game title (h1) and subtitle (h2) display information and credit.
Multiple hidden radio inputs (input class="input-circle" type="radio") represent targets (birds). When clicked, they act as “hits”.
Each bird is represented by a (label) linked to its respective input (for="circle1" etc.), styled with the pajaro class. Clicking on a bird label checks the associated input, triggering CSS effects to simulate shooting the bird.
The score counter (div class="sum")SCORE:(div) uses CSS counters to track how many birds have been shot.
Finally, a (script src="./script.js")(script) tag is present, but no JavaScript logic is required for functionality—this is a pure CSS-based game. The HTML mainly serves to structure the interactive elements and connect labels to hidden inputs for user interaction.
CSS Code
The CSS file is where the entire game logic, animations, and visuals are implemented using advanced CSS features and keyframes—without any JavaScript.
General Setup: The body disables text selection, hides overflow, and resets a custom counter (counter-reset: birds;) that tracks how many birds are shot.
Hidden Inputs: The radio inputs are hidden off-screen but still clickable through their linked labels. When a bird (label) is clicked, its input becomes checked.
Scoring System: Each time a bird’s input (.input-circle:checked) is selected, the counter (birds) is incremented. The .sum:after pseudo-element displays the live score using the counter’s current value.
Game Area (.wrapper): Defines a 500px-high playable area with a blue sky gradient and a crosshair cursor, giving a shooting game feel.
Birds (.pajaro classes): Each bird is absolutely positioned and styled as a small black oval shape with wings and a beak.
The :before pseudo-element forms the beak.
The :after pseudo-element forms the wings.
Both are animated using keyframes for flapping and flying motion (@keyframes alas and @keyframes planeo).
Bird Movement: Each .pajaro uses the move keyframe animation to travel across the screen horizontally and vertically in smooth loops. Birds start at different heights and speeds using animation-delay to make their movement look natural.
Shooting Mechanism: When a bird is clicked (input becomes checked), its label becomes invisible (opacity: 0), simulating it being shot. The label’s element displays “I’m Dead!” text at the clicked position.
Timer Animation: The .timer span element expands its width from 10px to 300px over 20 seconds using the timer keyframe animation. The text “TIME LEFT” overlays the bar, showing the countdown duration visually.
Game Over Screen: The .gameover div stays hidden off-screen initially and moves into view at the end of the 20-second timer animation using the gameover keyframes. It overlays a dark transparent background with large white text saying “GAME OVER”.
Wings and Bird Body Animation: The wings continuously flap with the alas keyframe, rotating the shape to create motion. The planeo keyframe slightly moves and rotates the bird for a gliding effect, giving a lifelike flying motion.
Together, these CSS techniques—counters, transitions, and keyframes—create a fully functional interactive shooting game where players click moving birds to earn points before the timer runs out.