HTML5 game engines

The following are few examples of game engines implemented with HTML5 and JavaScript:

  • Construct 2: One of the first WebGL enabled HTML5 game engines. Exports purely to HTML5 and JavaScript. Uses Canvas only and is extensible with JavaScript plugins.
  • Isongenic Engine: One of the most promising engines out there today. Massively multiplayer networking built in, uses Node.js and MongoDB, and has canvas or DOM-based graphics.
  • Impact
  • CutJS: Lightweight, fast, interactable 2D HTML5 rendering engine for game development. Open-source and cross-platform.
  • Canvace
  • Crafty
  • PlayCanvas: A collaborative, cloud-hosted game engine with a visual editor, in-browser code editing and one click publishing.
  • MightyEngine: 2D game engine supporting Web, Android, iOS platforms. Build in editor to manage projects, assets, maps.
  • Game Develop: A game development software exporting to native and HTML5 games. Uses Pixi.js to render using WebGL or canvas.
  • EnchantJS: A simple Javascript framework for creating 2D and 3D HTML5 games. Has good documentation and easy to follow tutorials for getting started
  • WiMi5: A video game platform that eases the creation, publication and monetization processes of HTML5 games, using a cloud based editor.
  • Phaser: 2D game enginge supporting Web, Android, IOS platforms

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...
  • Pixi.js: 2D rendering engine using WebGL with a canvas fallback.
  • stat.js: Simple JavaScript performance monitor

Useful technologies

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

  • Canvas: 2-D graphics.
  • WebGL: 3-D graphics.
  • Audio: HTML5 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 game play 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, for example.
  • DOM Storage is great for storing data locally on the player's device. This way you can cache game data and allow the game to pick up where the player left off.
  • The 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.
  • Application Cache and the ServiceWorker API: One of the main differences between Web apps and native apps is that native apps can be run offline. Technologies such as Application Cache and Service Worker allow for a website or a 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 sync up all the changes when it gets connected again.
  • Emscripten enables you to port a game written in C or C++ over to JavaScript. The Bananabread demo used Emscripten.
  • The Gamepad API is available in latest versions of Firefox and Chrome. What is most interesting about the Gamepad API is that it 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?
  • The Pointer Lock API is an attempt to improve the mouse as an input device, used 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 and stop it from getting in the way and being a nuisance.

Not every browser supports every part of HTML5. For example, Canvas isn’t supported out of the box by any Internet Explorer below version 9. However, you can use Explorer Canvas to replicate canvas functionality (but that is not ideal and does not perform as well). WebSockets is supported by IE only in IE 10, and it isn’t supported in the stock browser of Android. But again, you can fake this by using Flash for the sockets, such as with Socket.IO. While supported in the latest versions of every other browser, WebGL in Internet Explorer requires at least version 11.

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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Spring相关

Vue路由-命名视图实现经典布局

994
来自专栏个人随笔

Java Eclipse和MyEclipse快捷键

 首先: 常用快捷键 alt+/ - - 万能快捷键 Ctrl+1 - - 快速修复 Eclipse和MyEclipse快捷键 (1)Ctrl+M --切换窗口...

3439
来自专栏菩提树下的杨过

fms4 p2p:图片分享

这其实是http://www.flashrealtime.com/file-share-object-replication-flash-p2p/ 中关于文件分...

1907
来自专栏微信终端开发团队的专栏

iOS 事件处理机制与图像渲染过程

致歉声明: Peter在开发公众号功能时触发了一个bug,导致群发错误。对此我们深表歉意,并果断开除了Peter。以下交回给正文时间: iOS 事件处理机制与...

8939
来自专栏程序员的酒和故事

通过httprouter和redis框架搭建restful api服务

HttpRouter is a lightweight high performance HTTP request router (also called mu...

35310
来自专栏mukekeheart的iOS之旅

Mac和Xcode常用的快捷键

Mac电脑一般都不怎么用鼠标,因此除了触摸屏的各种双指、三指甚至四指的操作之外,快捷键的使用可以带来非常大的便利,本文则主要收集整理了自己在Mac常规和Xcod...

40613
来自专栏DeveWork

禁止/移除 WordPress 4.2 中前台自动加载的 emjo 脚本

如果你更新了WordPress 最新版本的4.2 版本,查看网页源代码你会发现WordPress 会自动在head加载一段用于支持emjo 表情的脚本(JS+C...

18010
来自专栏IMWeb前端团队

sublime的colorscheme

想让 markdown 高亮,找了点插件,比如 https://github.com/jonschlinkert/sublime-markdown-exten...

1718
来自专栏程序员的知识天地

七夕快到了!表白小程序制作详解,撩翻你的女神!

大家可能都会在抖音上刷过,那种表白小程序,但在我看来表白还是亲口说出来比较好,这类小程序只适合在平常的一些小节日给对方一个惊喜。话不多说,现在进入正题:

1131
来自专栏Google Dart

Flutter 构建完整应用手册-设计基础知识 顶

这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。

931

扫码关注云+社区