Students in General Assembly's Web Development Immersive (WDI) program are given four days to build a simple game using the front-end development technologies that are taught over the first two weeks of the course. Prior to enrolling in WDI, I spent my first year in London working as a bartender, walking home from work through the city in the early hours of the morning. Fox was inspired by my observations of London's noctural urban wildlife during this time. You can play a deployed version of the game on Heroku.
Fox is a simple side-scrolling adventure game. Players follow the fox on her journey and can influence her actions as she encounters a variety of obstacles. Movement is controlled by arrow keys, and choices based on text prompts are also assigned to key inputs. Decisions can result in points being added or subtracted, and players are moved along or routed to alternate branches within the level based on their choices. Players can reach the win condition at the end of the level only if they've accrued enough points from their actions – if not, they lose.
While the website for Fox was built with HTML and styled with CSS, the actual game itself is contained within the HTML5 Canvas element and written in Javascript. In the WDI course, we spent one day on curricula related to HTML and CSS, and the remainder of the first two weeks learning the basic ins and outs of front-end Javascript. By this point in the course, I'd built up confidence and proficiency with DOM manipulation and basic HTML, CSS, Javascript, and jQuery. I was interested in independently building a working knowledge of the canvas element to complement the course curriculum, and designing and building the game level provided an excellent framework for gaining that knowledge – as well as demonstrating my aptitude for self-directed learning across a range of technologies.
Project planning incorporated other key steps of the front-end development process as well: the entire first day of the project was devoted to content strategy, copywriting, and script development, building wireframes in Adobe InDesign, and laying out a detailed development timeline. The final project day was reserved for testing, refactoring, and bug fixes.
- Many of the image assets included in the game were acquired from The Noun Project. A full list is included within the game site.
- The soundtrack was provided by cinchel and is available for purchase.
- I'm grateful to the WDI21 instructional team at General Assembly: Instructor Mike Hayden, and teaching assistants Chanse Campbell and Rosanna Rossington.