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.

HTML5 game engines的更多相关文章

  1. 【译】html5游戏入门

    [译]html5游戏入门 原文链接 简介 如果你想用canvas做个游戏,那么来对地方了. 但是但是你至少知道javascript怎么拼写(╯‵□′)╯︵┻━┻ 既然没问题,那先来玩一下或者下载 创建 ...

  2. 主流HTML5游戏框架的分析和对比

    本文主要选取了Construct2.ImactJS.LimeJS.GameMaker.CreateJS.lycheeJS.Crafty.three.js.melonJS.Turbulenz.Quint ...

  3. [HTML5]HTML结构性元素(Structure)

    参考自:http://techbrood.com/h5b2a?p=html-structure 结构性元素用来组织文档的各个部分 为了让文档层次分明,我们可以把文档中的元素按其内容的作用进行组合,这就 ...

  4. 快速入门系列--MVC--07与HTML5移动开发的结合

    现在移动互联网的盛行,跨平台并兼容不同设备的HTML5越来越盛行,很多公司都在将自己过去的非HTML5网站应用渐进式的转化为HTML5应用,使得一套代码可以兼容不同的物理终端设备和浏览器,极大的提高了 ...

  5. 基于HTML5的WebGL电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...

  6. 基于HTML5的电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网 ...

  7. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  8. 2013年最受欢迎的16个HTML5 WordPress主题

    本文中,我整理了16个最新.最受欢迎的WordPress主题,它们一致的特征是支持HTML5, 它们秉承最佳设计理念以及最新的流行趋势,将它们归纳与此,希望对喜欢HTML5,准备用WordPress做 ...

  9. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

随机推荐

  1. __declspec(dllexport) & __declspec(dllimport)

    __declspec(dllexport) 声明一个导出函数,是说这个函数要从本DLL导出.我要给别人用.一般用于dll中 省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是 ...

  2. 卡尔曼滤波— Constant Velocity Model

    假设你开车进入隧道,GPS信号丢失,现在我们要确定汽车在隧道内的位置.汽车的绝对速度可以通过车轮转速计算得到,汽车朝向可以通过yaw rate sensor(A yaw-rate sensor is ...

  3. Myeclipse 10.7 android(安卓) 开发环境搭建

    1 下载并安装JDK,并且设置环境变量 2 下载安装 installer_r24.3.4-windows.exe (Android SDK Manager) 3 使用 Android SDK Mana ...

  4. [Python]解决python链式extend的技巧

    众所周知python中的list是可以extend的,功能 旨在将两个list合并成一个.譬如[1,2,3].extend([4,5,6])=[1,2,3,4,5,6] 假如有一个list的list, ...

  5. chainOfResponsibility责任链模式

    责任链(Chain of Responsibility)模式 : 责任链模式是对象的行为模式.使多个对象都有机会处理请求,从而避免请求的发送者和接受者直接的耦合关系.将这些处理对象连成一条链,沿着这条 ...

  6. Berkeley 四种产品如何选择?

    Berkeley 四种产品如何选择? 四种产品综览 Berkeley 可供选择的四款产品: DS: 简单的.支持单写单读的数据存储:支持高并发,多进程同时读操作:不支持锁,这就意味着当程序在进行更新和 ...

  7. Codeforces Round #377 (Div. 2) C. Sanatorium 水题

    C. Sanatorium time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. jQuery的deferred对象

    应用场景:处理异步任务 看到一篇阮一峰老师的博客挺好的讲的就是jQuery的deferred对象.坦诚讲之前没有怎么用过这个东东呢. 摘其中几点记录下 (1) $.Deferred() 生成一个def ...

  9. iOS - Swift Range 范围

    前言 Range:结构体,这个结构体用来表示一个区间的范围. public struct Range<Element : ForwardIndexType> : Equatable, Co ...

  10. 流媒体基础实践之——RTMP和HLS分发服务器nginx.conmf配置文件(解决了,只能播放RTMP流而不能够播放HLS流的原因)

    user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; events { worke ...