Game engines and tools

HTML5 game engines

The following are game engines implemented with HTML5 and JavaScript:

• A-Frame: A web framework for building 3D and VR experiences. With HTML and the Entity-Component ecosystem. Works across HTC Vive, Oculus Rift, desktop, and mobile platforms. From the Mozilla VR team.
• Canvace: An HTML5 game platform for creating 2D and 2.5D games.
• Crafty: A 2D JavaScript–based game framework.
• Cocos2D JS: Provides a consistent development experience for whichever platform you want to distribute to, web or native. "Code once, run everywhere" is incredibly easy and natural in Cocos2D JS. With one single JavaScript code base you can run your game in web browsers and on native platforms including Mac OS X, Windows, iOS and Android. Your game can be published on all major app stores as well as other distribution channels.
• Construct 2: One of the first WebGL–enabled HTML5 game engines, it exports purely to HTML5 and JavaScript. Uses Canvas only and is extensible via JavaScript plugins.
• Div GO: A development engine for 2D and 3D games, based on the Div Games Studio. It includes new functions and variables to enhance vanilla HTML5 and canvas. Div GO also features an integrated development environment with code editor, list of processes and functions, graphics editor, list of running processes, compiler, and generator / packer projects.
• EnchantJS: A simple JavaScript framework for creating 2D and 3D HTML5 games. It has good documentation and easy–to–follow tutorials for getting started.
• GDevelop: A game development platform that exports to native and HTML5. It uses Pixi.js to render projects as WebGL / canvas.
• Isogenic Engine: One of the most promising game engines out there today. It has massively multiplayer networking built in, uses Node.js and MongoDB on the server-side, and can output canvas or DOM–based graphics.
• Impact: A JavaScript game engine that comes with editors and other tools, produces a wide variety of game styles (e.g. 2D and 3D), and can publish to web, Android and iOS.
• melonJS: A fresh and lightweight 2D sprite–based engine with WebGL and Tiled map support.
• MightyEngine: 2D game engine supporting Web, Android, and iOS platforms. It includes a built in editor to manage projects, assets, and maps.
• Phaser: A 2D game engine supporting Web, Android, and IOS platforms.
• PlayCanvas: A collaborative, cloud–hosted game engine with a visual editor, in-browser code editing and one–click publishing.
• Stage.js: A Lightweight and fast HTML5 2D rendering engine for cross-platform game development.
• Superpowers: A 2D and 3D collaborative, open-source, HTML5 game dev environment using TypeScript.
• WiMi5: An online framework to create, publish and monetize HTML5 games. It includes a visual scripting editor so programming is not required. One-click publishing for several Web Market Places. You can also download your game as a zip and publish it where ever you want, including native desktop and mobile platforms. Easy in-app purchases integration. 
• RPG Maker MV: This particular version from the "RPG Maker" series is built on JavaScript. You can add custom code or addons, and deploy projects as Windows, Mac and web application. In addition, anime and manga–style models are included to make use of.
• visual-js: This is JavaScript game engine canvas 2d (native js) / 3d( three.js) . Server part works on node.js. Windows users can use GUI editor (game instance creator) with gui tools (encript , multilanguage , build engine library , build resourse). Try Api examples on jsfiddle. You can create game objects direct on web page (editor mode). Build images resource object with node.js tool. Any app created in this game engine works on all modern browsers. 

HTML5 game tools

• Clay.io: Distribution, Retention, Social and Monetization tools. Easy integration of user accounts, high scores, achievements, cross promotion, in-game payments, analytics etc.
• stat.js: Simple JavaScript performance monitor.

Useful technologies

The following can be useful when developing games based on Web technologies.

• Canvas: 2D graphics.
• WebGL: 3D graphics.
• Audio: <audio> element, Web Audio API.
• WebSockets: Can be used for real-time communication between a player and the game server, to support multi-player games.
• Node.js: Node is often used as a multiplayer game server, controlling the logic and handling the WebSockets connections to the players. It can be used for player authentication and the storage of data so gameplay can persist over multiple game sessions. This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handle Redis and MongoDB for storage.
• DOM Storage: Great for storing data locally on the player's device. This way you can cache game data and allow the game to continue where the player left off.
• Full Screen API : Allows you to expand any HTML element to fill the user's screen, even if the browser isn’t running full-screen itself.
• ServiceWorker API: Traditionally one of the main differences between Web apps and native apps was that unlike web apps, native apps could be run offline. This has changed — technologies such as Service Workers allow for a website or web app to cache necessary assets so it can still run while offline. This includes things like JavaScript files, CSS and images. Combining this technique with intelligent use of things like localStorage will allow your game to continue working even if the Internet connection goes down. You just need to sync up all the changes when it gets connected again.
• Gamepad API: Allows you to control web–based games via a gamepad. This might be just what finally justifies HTML5 gaming on a TV or console. Who wants to use a keyboard and mouse while sitting on the sofa?
• Pointer Lock API: An attempt to improve the mouse as an input device, in situations such as games and 3D visualizations where the mouse position rotates or moves you around a 3D space. As it stands, there would still be a cursor moving around the screen causing all sorts of trouble when you want to click on something in your game. With this API, you can lock your mouse position, or even hide it altogether, using the mouse movement to move the game world instead.

Game template

You can use the Mortar Game Stub template to get a quick start on an HTML5 game, or you can use it to get ideas on best practices.