Build a Maze Game with Vanilla JavaScript, Part 1

Nevin Katz
CodeX
Published in
28 min readApr 12, 2021

--

Photo by Clark Van Der Beken on Unsplash

Whether you are a game app creator, a web developer, or simply a fan of puzzles, building a maze game can be a fun way to learn more about HTML, CSS, and JavaScript.

In this two-part tutorial series, we will build the 3-level maze game below.

Here in Part 1, we will build an initial one-level implementation in which the marble is controlled just with cursor keys.

In Part 2, which is coming soon, we will expand this game into the multi-level implementation you see above, with buttons for touch screens, a marble-wall collision effect, and better global namespace protection.

Intended Audience

This tutorial is for anyone interested in building puzzles or games and who wants to learn JavaScript, HTML, and CSS.

If you are new to these languages or unfamiliar with the concepts covered here, I still encourage you to give it a try. You just may want to review new terms and concepts you encounter periodically as you go through the tutorial.

--

--

Nevin Katz
CodeX
Writer for

Developer at EDC. I write about web development and biology. Subscribe at https://buttondown.email/nevkatz for article roundups.