This is a submission for the Web Game Challenge, Build a Game: Alien Edition
What I Built
I built a web game inspired by the alien abduction story. The game puts you in the shoes of a normal person going about their daily routine. However, a sudden twist awaits! You'll encounter an unexpected situation that forces you to make a crucial choice: run or fight.
RUN:
Dodge and jump over a never-ending stream of aliens as they charge towards you. How long can you survive?
FIGHT:
Note to Self NEVER START A PROJECT LATE
I had the brilliant idea of introducing a "Cuphead" style boss fight to defeat the alien. But I got carried away fixing the bugs in the existing games purely from a code-base perspective. I should have focused on the implementation of this brilliant new feature. Still, my mind kept getting annoyed with the code dumped into my ".js" file and I wasted my time re-arranging and making performance enhancements to the existing game. Which I doubt had any real effect on the game.
//TO-DO
// "Fight" Button will not work... You might just see alien and our hero have a staring contest.
Demo
- Live Demo: Try it here
- Github Repo: Github
Journey
- Choosing the Tools:
I opted for building it using HTML Canvas and JavaScript. This combination provides a lightweight and versatile framework for creating web-based games.
- Creating the Sprites:
I started looking for free sprite sheets on craftpix and other resources but had no luck finding good alien sprite. I do not have a good drawing background let alone an animation, which I believe is one of my major drawbacks while trying to create attractive games. While I managed to find good sprites for our "Hero" my search continued to find a good "alien".
To my surprise, I found the Universal LPC Spritesheet Generator. This amazing tool allowed me to customize the "alien" character, I can modify the characters from human to bizarre-looking creatures. This tool is a complete win for me.
- Collision Detection & scoring:
To ensure a smooth player experience, I implemented collision detection between the player and the aliens. simply scoring if you are able to jump over the alien accurately.
Challenges and Learnings:
Working with sprite sheets involved learning how to define specific frames from the larger sheet and then manipulating them within the HTML Canvas. Additionally, ensuring proper collision detection required understanding how to calculate bounding boxes for the player and aliens.
I was late to the party, I saw the challenge but took too much time thinking about my game theme and playability. I will implement the fighting scenario in the future and encourage you to check back here for the update.
Top comments (0)