Space Scroller using P5

I developed a simple side-scrolling space shooter game built with p5.js and JavaScript. What started as a fun experiment with vector-based graphics has evolved into an interactive experience integrated directly into this page as a Vue component. View this code on github here.

From Idea to Implementation

The idea was to create a basic side-scrolling game, leveraging the vector graphic capabilities of p5.js. The project started as just a way to use p5.js using simple JavaScript and HTML. I reached a point where I wanted to showcase my work in a dynamic and accessible way. This led to converting the original pure JavaScript code to align with Vue and ES6 standards. The conversion process presented its challenges, but the outcome was a functional game that retained the core mechanics of the original version.

Tackling Vector Graphics and Math Challenges

Learning to work with vector graphics introduced a fascinating layer of complexity. It required a lot of math, experimentation, and perseverance. However, the effort paid off as I created a project that felt truly unique and that I could showcase in a different way.

Addressing Collision Detection Efficiency

One of the more challenging aspects of development was implementing collision detection for the asteroids. Their irregular shapes made precise intersection calculations for lasers and ships resource-intensive. To strike a balance between accuracy and performance, I opted for a proximity-based collision system. If an object comes within a specific distance of an asteroid or ship, it registers as a hit. While this approach involves some compromises, it proved to be the most efficient solution for my use case.

Lessons Learned

Reflecting on this project, I realized the importance of considering the broader scope of a project from the outset. Adapting the game for deployment on a website introduced scope creep, adding unanticipated complexity to the development process. In the future, I plan to keep compatibility and deployment in mind from the beginning to streamline the development workflow.

Reading about this project is one thing, but its a lot more fun to try it out.

Try it

Try it below!