Projects

Space Invaders

HTML
JavaScript
CSS
Git

1st boot camp project. Recreation of the classic arcade retro game using HTML, CSS and Vanilla JavaScript.

A player ship trying to shoot the invaders ship, with floating stars in the background

Background & Description

Context: As part of the unit 1 curriculum in our software engineering bootcamp, we embarked on a two-week individual assignment. The objective was to create a game that not only provided hands-on experience in web development, with a specific focus on front-end technologies and Document-Object Model (DOM) Manipulation, but also served to reinforce the foundational concepts we had learned during the initial weeks of the bootcamp. Furthermore, this project sought to explore the principles of game development, employing *Object-Oriented Programming (OOP) *and enabling practical experience in building interactive web applications.

Process & Insight

  • During the initial stages of the Space Invaders project, I found myself wrestling with indecision. While we were provided with a list of pre-existing game options to choose from, I had a desire to create something unique and stand out. Since this marked my first project in the bootcamp, I was initially unsure about the planning process. I was eager to dive into the coding but soon realized the significance of a well-thought-out plan.

  • As part of our project requirements, we were tasked with creating a wireframe, which initially felt like an inconvenience, as I was anxious to start writing code. However, this phase turned out to be a game-changer. The wireframe not only helped me structure the project effectively but also served as a roadmap, saving me considerable time and preventing confusion as the project progressed. It became clear that careful planning and creating a wireframe were indispensable elements in the successful execution of this project.

  • This is what my wire frame and pseudo code looked like before starting on the project

Screenshot of the wire frame and pseudo code

  • In the midst of the project, I often found myself revisiting and refining my code, researching best practices, and striving for cleaner and more readable solutions. This iterative process consumed a significant portion of my allotted project time. However, during one of our class sessions, our instructor provided a valuable pep talk that resonated with me: “Remember, this is an engineering class; focus on functionality over design.” This message struck a chord. It reminded me of the importance of prioritizing functionality and not getting overly caught up in perfecting the aesthetics of the code. With renewed focus, I adopted the approach of “Make it work first, then make it clean after.” This shift in mindset allowed me to finish the project strongly, emphasizing functionality while recognizing that clean code could be refined later. This lesson has stayed with me, emphasizing the balance between functionality and code aesthetics in software development.

  • In game screenshot of the game

A player spaceship trying to shoot down the invaders



Key Takeaways:

  • Demonstrated proficiency in front-end development fundamentals with HTML, CSS, and JavaScript.
  • Recognized the importance of creating a wireframe & thorough planning before diving into coding.
  • Successfully managed time for this project, which marked the first experience working on a project of this scale with a deadline.
  • Showcased game development skills and creativity.
Projects