I Tried Building JavaScript Games Without a Game Engine. Here's What I Learned

A digital marketer turned game developer, the author began developing the educational platform GamesMom, which offers free browser-based games for children, including math, word, typing, memory, puzzle, and quiz games. Initially, the author assumed building browser games required a dedicated game engine or a large JavaScript framework.

However, through experimentation, the author discovered that many games could be built using simple HTML, CSS, and JavaScript. This revelation proved to be the most valuable lesson from the project.

When initially exploring game development tools, the author found themselves drawn to sophisticated solutions. Nevertheless, they eventually questioned whether a particular game truly needed an engine. For simple browser games, the browser's built-in features of HTML, CSS, and JavaScript are often sufficient. This realization made the project more manageable by allowing the author to address each problem individually and learn JavaScript or browser features as needed.

Understanding the browser event system proved crucial. JavaScript can listen for user actions like clicks, keyboard inputs, and touchscreen interactions and respond accordingly. For instance, a simple interaction can be implemented as follows:

button.addEventListener("click", () => {

checkAnswer();

});

Timers may appear straightforward but become more complex upon implementation. Using JavaScript's built-in timing functions, developers can create timers for games like math quizzes or countdown activities. The key takeaway is recognizing that every temporary process needs a clear lifecycle, which applies beyond games to various situations.

Introducing randomness into educational games can enhance their replayability. JavaScript offers simple tools for random selection, allowing games to generate different questions, words, cards, or quiz questions each time they are played. However, it is essential to consider whether the randomization becomes repetitive and whether the game difficulty remains appropriate.

Not every game requires canvas technology, a common assumption made by the author. For games primarily consisting of questions, text, buttons, cards, scores, and simple interactions, ordinary HTML elements can effectively serve the purpose. JavaScript can update these elements when changes occur, such as displaying scores or questions.

Testing games on various devices, particularly mobile screens, highlighted the importance of touch targets and spacing. Ensuring buttons work well with fingers rather than a cursor led to a more user-friendly experience. Overall, the author's journey in building GamesMom underscored the significance of choosing the right tools for the job, understanding the browser event system, and considering factors like timers, randomness, HTML elements, and mobile testing when developing browser games.