Scary Maze Game

May 2021
•

Front-End Development, HTML, CSS, Javascript

Project Scope

For my Advanced Web Development class' final project, I chose to explore learning the HTML canvas element to develop a web game. The <canvas> element in HTML provides the ability to create graphics directly on a web page. Intrigued by the idea of building a game that requires skill and concentration, I decided to recreate Jeremy Winterrowd's 2004 Scary Maze Game as a nostalgic nod to my early internet experiences.

‍

Process

Initially, the task of building a 2000s-style flash game using only HTML and vanilla JavaScript seemed quite daunting. However, I soon realized that it was technically feasible. To begin:

  • I created hi-fidelity visual designs for each stage of the game, envisioning how they would appear.
  • Then, I proceeded to implement each game stage using HTML and the <canvas> element.
  • This involved setting the <body> background to black and defining the canvas shape by specifying its x and y coordinates.

After constructing the game stages, the next step was to incorporate mouse functionality. I achieved this by:

  • Employing a JavaScript addEventListener to track mouse movements.
  • Using a series of if/else statements and defining the conditions for the game to restart if the mouse coordinates were outside the boundaries of the HTML canvas shapes.

‍

Conclusion

Overall, the process of creating the 'Scary Maze Game' using HTML and vanilla JavaScript was both challenging and rewarding. By leveraging the capabilities of the HTML canvas element, I was able to bring this early internet game to life and recapture its nostalgic appeal.

See Full Project