Alien Invadors

Sooryaprabhath — Mon, 30 Sep 2024 05:41:07 +0000

What I Built
I created a classic Alien Shooting Game where the player must shoot down incoming aliens while avoiding game over. The game features two levels, and players can track their score as well as the highest score achieved. It also includes interactive buttons for Play, Resume, and Restart, with smooth animations to enhance the gaming experience.

The player controls a spaceship that can move vertically using the arrow keys and shoots with the space bar. Aliens progressively become more difficult to defeat as the levels advance.

Demo
Play the Alien Shooting Game
https://codepen.io/Sp39/pen/YzvwaaZ

Journey
I took inspiration from retro arcade games and challenged myself to create a browser-based alien shooter using HTML5, JavaScript, and Canvas. I used CSS for styling and added custom animations to the buttons to make the game feel more dynamic.

Key Features:

Scoring System: Keeps track of the current score and stores the highest score using localStorage, allowing players to beat their personal bests.
Levels: Each time all aliens are defeated, the level increases, and the difficulty ramps up with more and faster aliens.
Responsive Design: The game works well across different screen sizes, though it's best experienced on a desktop.
What I Learned
Canvas Animations: I deepened my understanding of how to use the Canvas API for game development, including how to create smooth movements for characters and background elements.
Game Loops: Learning about game loops and how to effectively manage different states like Play, Pause, and Restart was a fun challenge.
Local Storage: Implementing a way to store and retrieve the highest score gave me more insight into using browser storage efficiently.
Next Steps
Mobile Controls: Add touch controls for a more mobile-friendly experience.
More Levels and Enemies: I plan to introduce more levels with unique alien designs and more complex enemy behavior.
Sound Effects: Incorporating sound effects for shooting and alien destruction will make the game more immersive.

CSS Art: Space - Solar System Exploration

Sooryaprabhath — Mon, 16 Sep 2024 04:55:08 +0000

`This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

I wanted to create an interactive and visually engaging representation of our Solar System using CSS Art and HTML. The inspiration comes from my fascination with space and the beauty of celestial bodies. Through this project, I aimed to combine minimalistic design with interactive elements that encourage users to explore and learn about each planet in the Solar System.

Demo

Live Demo: Explore the Solar System
https://solar-system-explorer-css-art.vercel.app

You can also see a preview of the project in the embedded code editor below:
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

Journey

In this challenge, I decided to blend creative CSS design with interactive JavaScript functionality to make the experience more dynamic. Here’s a breakdown of the process:

Designing the planets: I used a combination of CSS Grid and hover animations to create planet cards that provide fun interactivity. The planet names and key information are dynamically presented.

Interactive Hover Effects: Each planet has a glowing hover effect, inspired by the way celestial objects emit light. I also added a spinning animation when hovering to simulate orbital movement.

Modals for More Info: When a planet is clicked, a modal pops up with additional information, creating an immersive learning experience. This makes the app both interactive and informative.

CSS Art: Instead of using any external images, the entire solar system art was built using pure CSS. I focused on shapes, colors, and glow effects to simulate the look and feel of planets.

Responsiveness: The layout is fully responsive, adapting to all screen sizes to ensure that users can explore the solar system from any device.

What I learned:
The challenge of making CSS Art interactive using simple JavaScript.
Implementing advanced hover effects and animations to bring static elements to life.
The power of CSS Grid and Flexbox to create responsive and clean layouts.
What’s next?
I plan to add more detailed planet information and potentially implement an interactive 3D view for the planets to simulate a closer-to-reality experience.
Enhancing the modal to display real-time data such as planet rotation speed and temperature variations.`

DEV Community: Sooryaprabhath

Alien Invadors

CSS Art: Space - Solar System Exploration

Inspiration

Demo

Journey