HTML Web游戏开发之浮光掠影


游戏开发

自打DHTML出来后，开发者就开始在web上弄一些好玩的东西，早在1999年，就有人开始用DHTML做网页游戏，比如：Fun and Games with DHTML 。可惜限于当时浏览器的性能和特性，加上CPU处理能力有限，许多还是停留在设想中，但这并不能挡住开发者前进的脚步，他们并没有 Give Up。随着浏览器性能的改进以及HTML语言本身的发展，加上硬件性能也有了长足的进步，现在如今诸多的 Javascript Game Engines 已经如雨后春笋般的冒出来了。

相较于HTML4，HTML5做了像素控制机制以及图形加速方面的改进，正是这些改进，让WEB游戏开发变得简单，那么，接下来，在本文的上半篇，我们首先要介绍的是两个2D HTML5游戏引擎，下篇我们会介绍一些好玩的3D HTML5游戏引擎。

一、GameJS 开源2D HTML5 游戏引擎

GameJS 的前身是从Python界著名的开源 PyGame 游戏引擎移植而来。如果你熟悉PyGame的开发，那么对于 GameJS 应该可以很快上手。GameJS 可以和服务端的RingoJS集成使用，而RingoJS是用Java写的js运行环境，所以你需要Java 1.5以上版本，同时还svfd安装Ant。下载代码仓库还需要用到GIT.

开始玩

首先从版本仓库中取回GameJS, 进入gamejs目录:

git clone git://github.com/oberhamsi/gamejs.git
cd gamejs

接着获取编译所需要的依赖项:

git submodule init
git submodule update

编译 RingoJs:

ant -f ./server/ringojs/build.xml jar

OK, 现在可以启动GameJS的Web Server了：

gjs-server.sh   (如果是 windows环境用： gjs-server.cmd)

然后你可以在浏览器中访问 http://localhost:8080/ 了。你应该在页面上可以看到游戏例子的链接，这些例子的源代码在GameJS的examples目录下面。 你也可以本地部署你的HTML5游戏(去掉服务端支持)：

gjs-statify.sh <app> <output-directory>

例如，部署GameJS的一个例子程序：

gjs-statify.sh example-draw /var/www/games/foo

供参考学习的一个很小的GameJS游戏代码，点击会变颜色的脉动的圆：

// 一个非常小的 GameJS 应用用于展示GameJS的编程概念
//
// 一个脉动的彩色圆，单击改变颜色
//
// Play: <http://gamejs.org/apps/minimal/>

var gamejs = require('gamejs');

var SCREEN_WIDTH = 400;
var SCREEN_HEIGHT = 400;

// ball 是一个带颜色的圆.
// ball 的颜色可以按照一个色彩列表(Ball.COLORS)进行变化. ball.color 是色彩列表的索引号
// ball constantly pulsates in size.
function Ball(center) {
   this.center = center;
   //设置圆每秒增长的半径大小
   this.growPerSec = Ball.GROW_PER_SEC;
   //圆的半径
   this.radius = this.growPerSec * 2;
   //圆的当前颜色在色彩列表的索引号
   this.color = 0;
   return this;
};
Ball.MAX_SIZE = 200;
Ball.GROW_PER_SEC = 50;
Ball.COLORS = ['#ff0000', '#00ff00', '#0000cc'];
Ball.prototype.nextColor = function() {
   this.color += 1;
   if (this.color > Ball.COLORS.length) {
      this.color = 0;
   }
};
Ball.prototype.draw = function(display) {
   var rgbColor = Ball.COLORS[this.color];
   var lineWidth = 0; // 线宽为零将以指定的颜色填充该圆
   gamejs.draw.circle(display, rgbColor, this.center, this.radius, lineWidth);
};
Ball.prototype.update = function(msDuration) {
   this.radius += this.growPerSec * (msDuration / 1000);
   if (this.radius > Ball.MAX_SIZE || this.radius < Math.abs(this.growPerSec)) {
      this.radius = this.radius > Ball.MAX_SIZE ? Ball.MAX_SIZE : Math.abs(this.growPerSec);
      this.growPerSec = -this.growPerSec;
   }
};

function main() {

   // 当鼠标UP事件发生的时候，圆改变颜色
   function handleEvent(event) {
      switch(event.type) {
         case gamejs.event.MOUSE_UP:
            ball.nextColor();
            break;
      };
   };

   // handle events.
   // update models.
   // clear screen.
   // draw screen.
   // called ~ 30 times per second by fps.callback
   // msDuration = actual time in milliseconds since last call
   function gameTick(msDuration) {
      gamejs.event.get().forEach(function(event) {
         handleEvent(event);
      });
      ball.update(msDuration);
      display.clear();
      ball.draw(display);
   };

   // setup screen and ball.
   // ball in screen center.
   // start game loop.
   var display = gamejs.display.setMode([SCREEN_WIDTH, SCREEN_HEIGHT]);
   var ballCenter = [SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2];
   var ball = new Ball(ballCenter);
   //安装FPS回调: gameTick ，帧速：30fps
   gamejs.time.fpsCallback(gameTick, this, 30);
};

// call main after all resources have finished loading
gamejs.ready(main);

GameJS的文档在：http://docs.gamejs.org/， 另外 PyGame 的教程和文档你也可以参考.

二、轻量级短小精悍的CraftyJS 2D JS游戏引擎

CraftyJS 压缩处理（Minified+GZIP）后代码只有10k左右。虽然精悍但是也包含了动画，事件管理，区域重绘，冲突检测，精灵等组件。

开玩

这个很简单，从CraftyJS 下载 crafty.js文件。 它的游戏对象分为实体(Entity)和组件(Component):

var player = Crafty.e();
player.addComponent("2D, gravity");

上面的代码就建立一个 player 实体，并在player实体上添加了两个组件(2D 和 gravirty). OK，这里就解释下它主页上的最小代码的例子，你可以在它的主页上运行这个例子，运行这个例子你可以看到一个铅笔掉了下来，你可以用左右光标键去控制这只笔移动，按上则是跳跃：

//初始化 Crafty 游戏，指定FPS为50,宽度为580, 高度为225
Crafty.init(50, 580, 225);

//创建player(铅笔)实体,这个铅笔是2D，挂在DOM上的，受重力（gravity）影响的,
//可以左右移动(twoway)的图像(image)
//设置它的x位置在Crafty.viewport.width / 2, 宽度和高度都是16
//重力方向是落向floor实体(该实体是在后面创建的)
//设置twoway参数: 有三个控制键，左键，右键，上键
//设置图像元素
var player = Crafty.e("2D, DOM, gravity, controls, twoway, image")
  .attr({x: Crafty.viewport.width / 2, w: 16, h: 16})
  .gravity("floor")
  .twoway(2)
  .image("favicon.png", "no-repeat");

//创建不可见的 floor 实体
var floor = Crafty.e("2D, floor")
  .attr({x:0, y: 225, w: 580, h: 5});

可以去玩玩它的sample应用：Demos

或者去学习下他的教程：Tutorials。当然你也可以去看看他的开发文档：API 文档

随着OpenGL/ES WebGL的标准正式确立，如今Web 3D 游戏开发的序幕也被揭开了:

• Firefox/4.0b8+ 以上的版本以及 Firefox Nighting Building 已经默认支持WebGL
• Safari： WebGL is supported on Mac OS X 10.6 in the WebKit nightly builds.
• Chrome/Chromium： WebGL is available in the stable release of Chrome. BTW: Android上web 浏览器 已经支持WebGL了
• Opera： WebGL is supported on Windows in the Opera 11 preview build

接上随着WebGL（OpenGL ES2.0）标准规范在2011 GDC（游戏开发者大会）上正式发布，支持WebGL的浏览器可以不借助任何插件便可提供硬件图形加速从而提供高质量的3D体验。Web 3D 游戏开发的序幕也被揭开了，WebGL目前是唯一能在各个浏览器中充分利用GPU硬件加速的形式，这更利于HTML5的游戏开发以及各种更酷的直接呈现，不过这仍然算是较新的技术，目前不是所有的浏览器都支持，请留意你的使用的浏览器和版本：

• Firefox/4.0b8+ 以上的版本以及 Firefox Nighting Building 已经默认支持WebGL
• Safari： WebGL is supported on Mac OS X 10.6 in the WebKit nightly builds.
• Chrome/Chromium： WebGL is available in the stable release of Chrome. BTW:Android上web 浏览器 已经支持WebGL了
• Opera： WebGL is supported on Windows in the Opera 11 preview build

需要注意的是，虽然Chrome已经完全支持WebGL，但是如果你还在XP下使用，那么有可能你的显卡（GPU）是在黑名单中，是没有打开WebGL的，你需要手工执行命令，以忽略GPU黑名单：

chrome.exe --ignore-gpu-blacklist

GammaJS 最简单的WebGL下开发游戏的开源框架

站点：http://gamma.delfick.com/

GammaJS 以极其简单的开发体验给我留下了深刻印象。他能快速的帮助我们利用WebGL搭建2.5D游戏。

下载：gma-min.js

wget https://github.com/downloads/Royce/GammaJS/gma-min.js

使用:

最基本的架子：

Game.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>My Awesome Game</title>

    <!--
        Include any style sheets here
        <link rel="stylesheet" type="text/css" href="gamma.css" media="all"/>
    -->

    <!-- Include the Gamma Library -->
    <script type="text/javascript" src="gma-min.js"></script>

</head>

<body>

    <!-- The element to contain the rendering canvas is called #gamma by default -->
    <div id="gamma"></div>

    <!-- This javascript file contains the game specification -->
    <script type="text/javascript" src="game.js"></script>

</body>
</html>

game.js:

require(['gma/base', 'gma/manager'],
    function(gma) {
        // The game specification is contained within this function.
        var manager = gma.manager();
        manager.storeLevels({});
        manager.init();
    }
);

在 game.js 我们需要用 require 函数来导入GammaJS 功能库的部分（gma/base, gma/manager），当需要的功能库都被加载后，匿名初始化函数function(gma)就会被执行。在初始化函数中，我们要创建一个gma.manager，它默认会维护一个canvas在id“gamma”的div标签中。

和以前一样，我们先来做一个最简单的“游戏”：

game.js:

require(['gma/base', 'gma/manager'],
    function(gma) {
        // 设置该画布的大小是600x500,可以设置 containerID 来改变默认的div id名称.
        var manager = gma.manager({
           width: 600,
           height: 500
        });
        manager.storeLevels({});
        manager.init();
    }
);

要让游戏跑起来，我们需要初始化游戏设置，比如 level 信息，manager.storeLevels用来存放游戏的level，然后manager.init。

OK，我们首先配置游戏的一个 Level，首先 Level 里面要有游戏角色站立、行走、跳跃的台子(platform)：

var myLevel = {
    entities : [
        {type: 'platform', top:0, left:0, width:30, height:3},
        {type: 'platform', top:0, left:36, width:30, height:3}
    ]
};

platform是默认实体（entities）类型，所以如果实体是台子(platform)则类型可以省略:

var myLevel = {
    entities : [
        {top:0, left:0, width:30, height:3},
        {top:0, left:36, width:30, height:3}
    ]
};

好了，现在我们使用 storeLevels 将 myLevel 加进来。

manager.storeLevels(myLevel);

现在我们的game.js 像这样：

require(['gma/base', 'gma/manager'],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        var myLevel = {
            entities : [
                {top:0, left:0, width:30, height:3},
                {top:0, left:36, width:30, height:3}
            ]
        };
        manager.storeLevels(myLevel);
        manager.init();
    }
);

接下来就轮到我们的主角上场了，首先我们需要在require中添加 gma/entities/character 库引入对角色的支持，然后我们就可以创建角色实例（规定它的位置和大小）:

manager.character = gma.character({
    left     : 0,
    bottom   : 0,
    width    : 3,
    height   : 6,
    depth    : 3
});

接着我们要设置角色在level中的出生点位置(spawn)：

var mylevel = {
    spawn : {
        main : [15, 24]
    }
}

注意，如果没有指定spawn main 的位置，那么默认spawn出生点是(0,0).

现在我们的game.js像这样子了：

require([
    'gma/base',
    'gma/manager',
    'gma/entities/character',
    'gma/events'
],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        manager.character = gma.character({
            left     : 0,
            bottom   : 0,
            width    : 3,
            height   : 6,
            depth    : 3
        });

        var myLevel = {
            spawn : {
                main : [15, 24]
            },
            entities : [
                {top:0, left:0, width:30, height:3},
                {top:0, left:36, width:30, height:3}
            ]
        };
        manager.storeLevels(myLevel);
        manager.init();
    }
);

控制角色移动：

现在我们来学习如何来控制角色移动，我们希望按下左键角色向左移动，按下右键向右移动，按下空格键跳跃。首先，我们需要知道这些键的ASCII码值，左键：37；右键：39；空格：32。

使得角色移动和跳的方法是：move和jump。我们需要使得当相应建被按下后相应的方法被调用即可。勾挂键盘事件的是方法是在keyHandler.register（我们需要 gma/events 库）上：

gma.keyHandler.register(37, function (keyEvent) {
    manager.character.move(gma.constants.LEFT, keyEvent);
});

gma.keyHandler.register(39, function (keyEvent) {
    manager.character.move(gma.constants.RIGHT, keyEvent);
});

gma.keyHandler.register(32, manager.character.jump);

事实上，GammaJS提供了Curry函数来使得勾挂移动函数更为简单，下面f1是和f2等价的：

f1 = function (keyEvent) {
    manager.character.move(gma.constants.LEFT, keyEvent);
};
f2 = manager.character.move.curry(gma.constants.LEFT);

因此上面的函数可以简单的写成：

gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));
gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));
gma.keyHandler.register(32, manager.character.jump);

现在我们game.js是这样的了:

require([
    'gma/base',
    'gma/manager',
    'gma/entities/character',
    'gma/events'
],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        manager.character = gma.character({
            left     : 0,
            bottom   : 0,
            width    : 3,
            height   : 6,
            depth    : 3
        });

        var myLevel = {
            spawn : {
                main : [15, 24]
            },
            entities : [
                {top:0, left:0, width:30, height:3},
                {top:0, left:36, width:30, height:3}
            ]
        };
        manager.storeLevels(myLevel);

        gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));
        gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));
        gma.keyHandler.register(32, manager.character.jump);

        manager.init();
    }
);

创建一个敌人

有了一个主要角色，自然得有敌人，这样游戏才会具有一定的趣味性。所以，现在我们来创建一些敌人吧，GammaJS支持如下的敌人实体（每一种敌人有自己的习惯）：

• gma.platformEnemy: 从台子上一端移动到另端
• gma.patrolEnemy: 在指定范围内巡视，需要制定巡视的范围：limitLeft和limitRight
• gma.jumpingEnemy: 指定的位置上跳动的敌人

entities : [
    gma.platformEnemy({bottom:0, left:45, width:3, height:6}),
    gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),
    gma.jumpingEnemy ({bottom:0, left:7,  width:1, height:2}),
    gma.jumpingEnemy ({bottom:3, left:8,  width:1, height:2}),
    gma.jumpingEnemy ({bottom:6, left:9,  width:1, height:2})
]

当许多敌人有相同的属性的时候，我们可以通过使用定制类型（addCustomDefinitions）来设置这些相同的属性，比如jumpingEnemy的宽度和高度都是1和2：

manager.addCustomDefinitions({
    types : {
        jumpingJack: ['jumpingEnemy', {
            width    : 1,
            height   : 2
        }]
    }
});

定义自定类型后，我们就可以这样来使用：

// Now we can reference jumping jack
entities : [
    gma.platformEnemy({bottom:0, left:45, width:3, height:6}),
    gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),
    {type:'jumpingJack', bottom:0, left:21},
    {type:'jumpingJack', bottom:3, left:24},
    {type:'jumpingJack', bottom:6, left:27}
]

材质模板

默认下，所有的实体会被作为蓝色的方块渲染，这个是通过实体的template属性控制的，template的默认值是cube：

manager.addCustomDefinitions({
    types: {
        jumpingJack: ['jumpingEnemy', {
            width    : 1,
            height   : 2
            template : 'cube'
        }]
    }
});

如果你希望定制实体的外观，你首先要在templates中创建自己的材质，下面是创建绿色的方块材质（greencube ）：

manager.addCustomDefinitions({,
    templates : {
        greencube : ['meshTemplate', {
            mesh : gma.unitCubeInfo.mesh,
            material : {color : "#090"}   // Very Green
        }]
    }
});

现在我们将greencube 应用到jumpingJack上：

manager.addCustomDefinitions({
    types : {
        jumpingJack: ['jumpingEnemy', {
            width    : 1,
            height   : 2
            template : 'greencube'
        }]
    }
});

注意：默认cube和 redcube已经在GammaJS中存在。

我们还可以给我们的方块加上贴图：

manager.addCustomDefinitions({
    templates : {
        brickscube : ['meshTemplate', {
            mesh : gma.unitCubeInfo.mesh,
            material : {texture : 'bricks.jpg'}
        }]
    }
});

注意： bricks.jpg必须在和html文件同一文件夹中.

如果希望贴图重复，使用repeatX,repeatY属性：

manager.addCustomDefinitions({
    templates : {
        brickscube : ['meshTemplate', {
            mesh : gma.unitCubeInfo.mesh,
            material : {
                texture : 'bricks.jpg',
                //This will make the bricks double the size
                repeatX : 0.5,
                repeatY : 0.5
            }
        }]
    }
});

OK，现在可以使用新的brickscube材质了：

var myLevel = {
    //...,
    entities : [
        {template:'brickscube', top:0, left:0, width:30, height:3},
        {template:'brickscube', top:0, left:39, width:30, height:3},
        //...
        // Enemy specifications removed for clarity
    ]
};

现在我们的game.js变成这样了：

require([
    'gma/base',
    'gma/manager',
    'gma/entities/character',
    'gma/events',
    'gma/entities/enemy'
],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        manager.character = gma.character({
            left     : 0,
            bottom   : 0,
            width    : 3,
            height   : 6,
            depth    : 3
        });
        manager.addCustomDefinitions({
            templates : {
                greencube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    material : {color : "#090"}
                }],
                brickscube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    texture : {
                        src:'bricks.jpg',
                        repeatX:0.5,
                        repeatY:0.5
                    }
                }]
            },

            types : {
                jumpingJack: ['jumpingEnemy', {
                    width    : 1,
                    height   : 2,
                    template : 'greencube'
                }]
            }
        });

        var myLevel = {
            spawn : {
                main : [15, 24]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color    : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                {template:'brickscube', top:0, left:0, width:30, height:3},
                {template:'brickscube', top:0, left:39, width:30, height:3},
                gma.platformEnemy({bottom:0, left:45, width:3, height:6}),
                gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),
                {type:'jumpingJack', bottom:0, left:21},
                {type:'jumpingJack', bottom:3, left:24},
                {type:'jumpingJack', bottom:6, left:27}
            ]
        };
        manager.storeLevels(myLevel);

        gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));
        gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));
        gma.keyHandler.register(32, manager.character.jump);

        manager.init();
    }
);

定制摄像机

Gamma默认的摄像机总是跟随这角色的移动离角色面前50个距离单位和z轴的50个距离单位。你可以改变某个level中的摄像机的属性：

var myLevel = {
     camera : {
         locZ : 60,
          //跟随指定的角色在指定的位置 x,y[,z]
         attached : ['character',0, 6]
     }
 };

要有灯光

在游戏中在指定的level中添加灯光：

var myLevel = {
    light : {
        myLight : {
            type : GLGE.L_POINT,
            rotY : 1.54,
            color    : "#fff",
            attached : ['character', 0,5,20]
        }
    }
};

上面我们定了一个白色(#fff)的点光源(point light)，它始终在角色的前面5个单位，上面20个单位。我们把这个点光源旋转了180度(1.54 弧度radians)以指向场景.

用方块作为主角似乎太丑了，怎么着也得整个猩猩模型来着，GammaJS支持Collada模型定义，Collada是开放的标准xml模型定义格式。大多数的3D模型应用支持导出成这样的格式(.dae)文件。

你可以下载猩猩模型：https://github.com/Royce/GammaJS/raw/master/media/collada/gorilla/gorilla.dae,
以及对应的贴图文件：https://github.com/Royce/GammaJS/raw/master/media/collada/gorilla/skin.jpg

假定下载的文件放在和html文件同一目录下，现在可以把我们的大猩猩放在templates里了：

manager.addCustomDefinitions({
    templates : {
        gorilla : ['colladaTemplate',
            {
                collada : {
                    document : 'gorilla.dae'
                }
            }
        ]
    }
})

不过我们要调整下，大猩猩的位置不对，中心不对，因此我们把它转180度，移动0.5个unit,缩放0.7倍。

manager.addCustomDefinitions({
    templates : {
        gorilla : ['colladaTemplate',
            {
                collada : {
                    document : 'gorilla.dae'
                },
                yRot : 1.57,
                yOffset : -0.5,
                yScale : 0.7
            }
        ]
    }
})

ok，将大猩猩应用到角色：

manager.character = gma.character({
    left     : 0,
    bottom   : 0,
    width    : 3,
    height   : 6,
    depth    : 3,
    template : 'gorilla'
});

好了，如今，再看看我们的game.js：

require([
    'gma/base',
    'gma/manager',
    'gma/entities/character',
    'gma/events',
    'gma/entities/enemy'
],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        manager.character = gma.character({
            left     : 0,
            bottom   : 0,
            width    : 3,
            height   : 6,
            depth    : 3,
            template : 'gorilla'
        });
        manager.addCustomDefinitions({
            templates : {
                greencube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    material : {color : "#090"}
                }],
                brickscube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    texture : {
                        src:'bricks.jpg',
                        repeatX:0.5,
                        repeatY:0.5
                    }
                }],
                gorilla : ['colladaTemplate',
                    {
                        collada : {
                            document : 'gorilla.dae'
                        },
                        yRot : 1.57,
                        yOffset : -0.5,
                        yScale : 0.7
                    }
                ]
            },

            types : {
                jumpingJack: ['jumpingEnemy', {
                    width    : 1,
                    height   : 2,
                    template : 'greencube'
                }]
            }
        });

        var myLevel = {
            spawn : {
                main : [15, 24]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color    : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                {template:'brickscube', top:0, left:0, width:30, height:3},
                {template:'brickscube', top:0, left:39, width:30, height:3},
                gma.platformEnemy({bottom:0, left:45, width:3, height:6}),
                gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),
                {type:'jumpingJack', bottom:0, left:21},
                {type:'jumpingJack', bottom:3, left:24},
                {type:'jumpingJack', bottom:6, left:27}
            ]
        };
        manager.storeLevels(myLevel);

        gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));
        gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));
        gma.keyHandler.register(32, manager.character.jump);

        manager.init();
    }
);

一个游戏肯定应该是有多个level的，如何定义多个level呢？很简单：

var myLevel = {
    //specification
};
var anotherLevel = {
    //specification
};

然后在初始化函数中：

manager.storeLevels(myLevel);
manager.storeLevels(anotherLevel);

或者这样：

manager.storeLevels([myLevel, anotherLevel]);

当mananger初始化的时候，首先是第一个level会被载入。然后我们只需要从一个level进入另一个level，这被称为门（door），下面演示如何创建一个门：

entities : [
    gma.door({
        bottom:0, left:5, width:3, height:3,
        level:1
    })
]

注意：level 的索引是从0开始的。所以上面的level＝1是进入的第二个level（anotherLevel），现在我们来正式创建anotherLevel，它有一个门返回到第一个level：

var otherLevel = {
    spawn : {
        main : [0, 0]
    },
    camera : {
        attached : ['character', 0, 6, 60]
    },
    light : {
        myLight : {
             type : GLGE.L_POINT,
             rotY : 1.54,
             color    : "#fff",
             attached : ['character', 0,5,20]
        }
     },
    entities : [
        gma.door({bottom:0, left:25, width:0.5, height:9, level:0}),
        {template:'brickscube', top:0, left:0, width:30, height:3}
    ]
};

好了，到现在为止，在我们的game.js中有两个level了：

require([
    'gma/base',
    'gma/manager',
    'gma/entities/character',
    'gma/events',
    'gma/entities/enemy',
    'gma/entities/door'
],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        manager.character = gma.character({
            left     : 0,
            bottom   : 0,
            width    : 3,
            height   : 6,
            depth    : 3,
            template : 'gorilla'
        });
        manager.addCustomDefinitions({
            templates : {
                greencube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    material : {color : "#090"}
                }],
                gorilla : ['colladaTemplate',
                {
                    collada : {
                        document : 'gorilla.dae'
                    },
                    yRot : 1.57,
                    yOffset : -0.5,
                    yScale:0.7
                }],
                brickscube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    texture : {
                        src:'bricks.jpg',
                        repeatX:0.5,
                        repeatY:0.5
                    }
                }]
            },

            types : {
                jumpingJack: ['jumpingEnemy', {
                    width    : 1,
                    height   : 2,
                    template : 'greencube'
                }]
            }
        });

        var myLevel = {
            spawn : {
                main : [15, 24]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color    : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                gma.door({bottom:0, left:55, width:0.5, height:9, level:1}),
                {template:'brickscube', top:0, left:0, width:30, height:3},
                {template:'brickscube', top:0, left:39, width:30, height:3},
                gma.platformEnemy({bottom:0, left:45, width:3, height:6}),
                gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),
                {type:'jumpingJack', bottom:0, left:21},
                {type:'jumpingJack', bottom:3, left:24},
                {type:'jumpingJack', bottom:6, left:27}
            ]
        };

        var otherLevel = {
            spawn : {
                main : [0, 0]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color    : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                gma.door({bottom:0, left:25, width:0.5, height:9, level:0}),
                {template:'brickscube', top:0, left:0, width:30, height:3}
            ]
        };

        manager.storeLevels(myLevel);
        manager.storeLevels(otherLevel);

        gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));
        gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));
        gma.keyHandler.register(32, manager.character.jump);
        manager.init();
    }
);

我们现在还需要什么？还少一个显示的HUP（Heads Up Display），让我们在右下角显示FPS：

manager.hud.setup({
    bottom_right: {
        fps : manager.getFPS
    }
});

HUD的显示类型可由CSS控制:

/* Setup the bars */

#top_hud, #bottom_hud {
    height:2em;
    position:absolute;
    left:0em;
    width:100%;
    background-color: black;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
}

#top_hud {
    top:0em;
}
#bottom_hud {
    bottom:0em;
}

/* Setup left and right part of each bar */

#bottom_hud dl, #top_hud dl {
    margin: 0.3em;
}

#bottom_hud dl.left, #top_hud dl.left {
    float: left;
}
#bottom_hud dl.right, #top_hud dl.right {
    float: right;
}

/* Setup labels for each item */

#bottom_hud dt, #top_hud dt,
#bottom_hud dd, #top_hud dd {
    display: inline-block;
    line-height: 1.4em;
    margin: 0;
}

#bottom_hud dt, #top_hud dt {
    padding-right: 0.5em;
}

#bottom_hud dd, #top_hud dd {
    text-align: right;
}
dl.left dd {
    padding-right: 1em;
}
dl.right dt {
    padding-left: 1em;
}

将这个CSS保存为game.css文件放在game.js所在的目录下，取消html中的注释：

<!--
    Include any style sheets here
    <link rel="stylesheet" type="text/css" href="gamma.css" media="all"/>
-->

ok，现在是这个没啥意思的游戏最后一个，当前，如果角色如果从台子上掉了下去，那么角色就会处于永远的掉之中，不会结束。怎么停止这个状态？很简单，在台子下面放一个“死亡台子”（deathPlatform），只要角色掉在这个台子上就会被杀掉：

// Create a deathplatform type
types : {
    lava : ['deathPlatform', {template : 'redcube', depth:50}]
}
// Add this lava / death platform to the list of entities
entities : [
    {type:'lava', top:-10, left:-50, width:1000, height:50},
]

当角色死掉后，怎么重生呢？我们将重生的过程绑定到按键“r”上，当按下“r”就让角色重生：

gma.keyHandler.register(82, function(e) {
    manager.respawn("main");
});

现在，我们终于完成了我们的游戏：

require([
    'gma/base',
    'gma/manager',
    'gma/entities/character',
    'gma/events',
    'gma/entities/enemy',
    'gma/entities/door'
],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        manager.character = gma.character({
            left     : 0,
            bottom   : 0,
            width    : 3,
            height   : 6,
            depth    : 3,
            template : 'gorilla'
        });
        manager.addCustomDefinitions({
            templates : {
                greencube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    material : {color : "#090"}
                }],
                gorilla : ['colladaTemplate',
                {
                    collada : {
                        document : 'gorilla.dae'
                    },
                    yRot : 1.57,
                    yOffset : -0.5,
                    yScale:0.7
                }],
                brickscube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    texture : {
                        src:'bricks.jpg',
                        repeatX:0.5,
                        repeatY:0.5
                    }
                }]
            },

            types : {
                jumpingJack: ['jumpingEnemy', {
                    width    : 1,
                    height   : 2,
                    template : 'greencube'
                }],
                lava : ['deathPlatform', {template : 'redcube', depth:50}]
            }

        });

        manager.hud.setup({
            bottom_right: {
                fps : manager.getFPS
            }
        });

        var myLevel = {
            spawn : {
                main : [15, 24]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color    : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                gma.door({bottom:0, left:55, width:0.5, height:9, level:1}),
                {template:'brickscube', top:0, left:0, width:30, height:3},
                {template:'brickscube', top:0, left:39, width:30, height:3},
                {type:'deathPlatform', top:-10, left:-50, width:1000, height:50, depth:50},
                gma.platformEnemy({bottom:0, left:45, width:3, height:6}),
                gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),
                {type:'jumpingJack', bottom:0, left:21},
                {type:'jumpingJack', bottom:3, left:24},
                {type:'jumpingJack', bottom:6, left:27}
            ]
        };

        var otherLevel = {
            spawn : {
                main : [0, 0]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color    : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                gma.door({bottom:0, left:25, width:0.5, height:9, level:0}),
                {template:'brickscube', top:0, left:0, width:30, height:3},
                {type:'deathPlatform', top:-10, left:-50, width:1000, height:50, depth:50}
            ]
        };

        manager.storeLevels(myLevel);
        manager.storeLevels(otherLevel);

        gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));
        gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));
        gma.keyHandler.register(32, manager.character.jump);
        gma.keyHandler.register(82, function(e) { manager.respawn("main"); });
        manager.init();
    }
);

更完整的例子在:这里

本教程翻译自： 这里

还有很多好玩的3D引擎，限于时间就不一一介绍了，下面就罗列下：

• Minko Engine:
  • Build cross-platform 3D apps for HTML5, iOS, Android, Windows, OS X and Linux using a single C/C++ code base.
  • Source Code
• Goo Engine
  • Source Code
• CooperLicht: Open Source WebGL 3D engine with editor
• Blend4Web 做演示不错
• Babylon.js: JavaScript 3D games engine
• Voxel.JS:
  • a collection of projects that make it easier than ever to create 3D voxel games like Minecraft.
  • Source coe on Github
• Enchant.js: A simple JavaScript framework for creating games and apps
• KickJS: WebGL based game engine
  • Source code on GitHub
• Famo.us: HTML5 3D development Framework
  • University
  • Source code on GitHub
• PlayCanvas.js
• Three.js
• Turbulenz: Open source HTML5 2D/3D game engine since 2009
• Google O3D
• OSG.JS: a WebGL framework based on OpenSceneGraph concepts
  • Source code on GitHub
• X3DOM: integrating and manipulating (X)3D scenes as HTML5 DOM elements
• SceneJS - WebGL Scene Graph Library
• C3DL: a Canvas 3D JavaScript library
• PhiloJS: a WebGL Framework for Data Visualization
• GLGE
• JigLibJS 物理引擎－ 强烈推荐去看看