January 22, 2023

Building HTML and JavaScript Browser Games. A Tiny Guide

Tools and Info to get started in Game Development. Image sourced from simpleprogrammer.com

JavaScript is a fundamental tool for creating games in a browser. It provides the user with the necessary controls and logic to control characters, interact with objects, or even control a vehicle. This article will demonstrate several games built with JavaScript and tools and engines you can use to create your own game. Consider this article a resource article that links to tutorials and other tools to get you started in the browser game development arena!

Galactic Snake

Here is a picture of a snake game and its tutorial on AppCode.app

This first game is called "Galatic Snake," and it is a game where the user controls a snake that eats objects in space. The point of the game is to grow as long as you can before you die. Dying occurs if you run into your body or are slurped into a black hole. Every time you eat an item, you grow by one segment. It's a simple game. The article on AppCode walks you through how to create the game from scratch, so you can add modifications to the game to make it even more fun! This game is written in pure JavaScript, CSS, and HTML.

Game 2

Battle Royal style game built using an HTML element UI. Image sourced from buildroyal.io

Another game that uses JavaScript and HTML is a battle royal game called Build Royal. The game features a storm that closes in while players fight to the death picking up items and building walls as they go. The map contains buildings and other hideouts which result in different fighting terrains. You can check out the game assets they have been adding to give you an idea of how to create new releases for your browser game. Check out their release log.

Unreal Engine

Asset Development using Unreal Engine. Image sourced from unrealengine.com

Unreal Engine is a popular game development platform. Many developers use this engine to develop games for any medium; you can create a browser game using HTML and JavaScript and bundle the game for consoles and PC installs.

Unreal Engine has a blog about the requirements and how to begin creating a game using HTML. It relies on the Emscripten SDK to power the games and supports experimental multithreaded in significant browsers.

Twine

Twine home page which features games and interactive storytelling created from different authors.Image sourced from twinery.org

Twine is a game engine that allows you to create browser games with interactive storytelling. It features a downloadable desktop app that will enable you to start building your fun with JavaScript or by the drag-and-drop editor.

Cover Art for Beneath Flows. Image sourced on ifdb.org

A game created with Twine features the history and traditions of the Inuit. In Beneath Flows, you wander about the seashore, wary of your mother's stories about the fish woman who lives below the ice and waves.

Conclusion

After reviewing a few games and tools, learning to code with HTML and JavaScript may seem daunting; in reality, you must decide several factors, such as how big your game is if you want to scale it, multiplayer, and the type of game it will be. With those decisions, you can decide which engine you want to use or even one not mentioned in this article. Many online resources can help you understand how to start creating a game today.

Citations & References

Appcode, A. C. (2022, October 16). AppCode. Retrieved January 13, 2023, from https://appcode.app/

Beneath floes. IFDB. (n.d.). Retrieved January 22, 2023, from https://ifdb.org/viewgame?id=pu8btwofyvja347d

Buildroyale.io. Build Royale - Battle Royale in Your Browser. (n.d.). Retrieved January 22, 2023, from https://buildroyale.io/

Saibu, O. (2022, October 4). How to build a javascript retro galactic snake game. AppCode. Retrieved January 22, 2023, from https://appcode.app/how-to-build-a-javascript-retro-galactic-snake-game/

Twine is an open-source tool for telling interactive, nonlinear stories. Twine / An open-source tool for telling interactive, nonlinear stories. (n.d.). Retrieved January 22, 2023, from https://twinery.org/

Unreal Engine 5.1 is now available! Unreal Engine. (n.d.). Retrieved January 22, 2023, from https://www.unrealengine.com/en-US/blog/unreal-engine-5-1-is-now-available