Alien Invaders - A Space Adventure

Priyanka Tamhankar — Mon, 30 Sep 2024 06:59:36 +0000

This is a submission for the Web Game Challenge, Build a Game: Alien Edition.

What I Built

Alien Invaders is a space-themed, action-packed browser game where players must defend Earth against an onslaught of alien invaders. Equipped with nothing but their reflexes and quick thinking, players have to shoot down as many alien ships as possible to score points before time runs out. With a minimalist yet vibrant design and an addictive gameplay loop, Alien Invaders offers hours of fun.

The game is built using HTML5 Canvas, JavaScript, and CSS for responsive design, and features animated stars and interactive controls. The game scales seamlessly across different devices, from desktops to mobile screens, ensuring everyone can enjoy it.

Demo

You can play the game here: Alien Invaders Demo https://priyankatamhankar01.github.io/Alien-Drop-Galactic-Defense/

The code for the game is available here: GitHub Repository https://github.com/PriyankaTamhankar01/Alien-Drop-Galactic-Defense/tree/main

Journey

The Idea
For this challenge, I wanted to create something simple yet engaging that would fit the "Alien Edition" theme. Classic arcade-style space shooters have always been a favorite genre of mine, so I decided to build a retro-inspired game where players have to fend off waves of alien invaders.

The Building Process

The game is built with pure HTML5, CSS3, and JavaScript. I used the HTML5 Canvas API for rendering the game graphics, while JavaScript handles the game logic, including player movement, shooting, collision detection, and scorekeeping.

Key Features:

Alien Waves: Aliens appear randomly on the canvas, and the difficulty increases as more waves spawn.
Score System: Players earn points for every alien they shoot down, with a real-time score display.
Game Timer: There’s a timer counting down from 60 seconds, and the player has to achieve the highest score possible before time runs out.
Game Over and Replay: At the end of the timer, the game shows a "Game Over" screen with the player's final score, and players can restart with a single click.
Responsive Design: I used CSS media queries to ensure the game looks great on any screen size, with UI elements like the score and timer adjusting accordingly.
Twinkling Stars: The background is animated with a subtle twinkling star effect to give players an immersive space atmosphere.

Challenges

One of the biggest challenges was ensuring that the game was responsive across different screen sizes. Initially, the canvas would scale awkwardly on mobile devices, making the game difficult to play. I tackled this by switching to percentage-based widths and heights and using vw (viewport width) and vh (viewport height) units in the CSS to adjust the layout and game elements dynamically.

Another challenge was optimizing the collision detection system. Since this is a fast-paced game, it was important to ensure that the collisions between bullets and alien ships were detected accurately without slowing down the game.

What I Learned

This project taught me a lot about game development fundamentals, particularly using the HTML5 Canvas API for real-time rendering and animations. I also learned about optimizing code for performance and responsiveness, especially when building web games that need to run smoothly on both desktop and mobile devices.

What I’m Proud Of

I’m particularly proud of how the game feels on different devices. Making sure that the game scaled well and remained fully playable on mobile was a huge win. The clean, simple interface and engaging gameplay loop make it easy for anyone to pick up and enjoy, whether they’re a casual gamer or someone looking for a nostalgic arcade experience.

The Frontend Challenge 4 - Glam Up My Markup: Recreation

Priyanka Tamhankar — Mon, 05 Aug 2024 06:49:50 +0000

Frontend Challenge v24.07.24: Glam Up My Markup - Recreation

What I Built

I'm thrilled to be back after a brief hiatus and to dive into this challenge of creating a sports page. My goal was to design a page that feels smooth and dynamic, and while I faced some constraints with time and local challenges, I'm pleased with the outcome.

In this project, I placed a strong emphasis on animations, which really bring the design to life. The scroll animation, in particular, adds a dynamic touch to the user experience, making the page engaging and interactive.

Demo

For the best viewing experience, I recommend opening the demo in full-page mode in a new tab. The design is optimized for desktop but also functions well on mobile devices.

Journey

Returning to this challenge, I focused on creating a smooth, dynamic sports page with engaging animations. Despite some time constraints and local challenges, I’m proud of how the animations, especially the scroll effect, enhance the design. This project deepened my understanding of CSS animations, and I’m excited to refine my skills further and improve responsiveness and accessibility in future projects.

DEV Community: Priyanka Tamhankar