开源HTML5游戏引擎Frozen背后的技术

　　Frozen是一款开源的HTML5游戏引擎，通过工具和模块化实现了其简单易用和快速开发的优点，而且大多的主流浏览器皆支持这一游戏引擎。它诞生的目的就是为了将构建现代Web App中使用的技术，应用到游戏开发当中，比如AMD模块、依赖管理、构建进程以及项目脚手架。

Frozen背后的技术

　　那么，Frozen在实现这一目的的同时，存在其背后的技术又有哪些？下面要介绍的就是这些技术及它们在构建Frozen时所起到的作用：

• Node.js和npm：作用于构建进程和开发工作流的依赖管理。
• Grunt：开发工作流的task runner，允许单一入口点进行开发配置。
• Volo：负责客户端的依赖管理和项目脚手架工具。
• Lo-Dash：库内所使用的低级工具库。
• Hammer.js：多点触控库，用于鼠标/触摸/指针事件标准化和手势。
• dcl：用于生成构造函数和提供AOP的简便方法。
• Box2d：用于游戏中的物理计算。
• Dojo：用于AMD载入器和一些库内的公共模块，Dojo构建进程是用来构建一个单独的JS文件。
• JSDoc：生成代码文档。
• Jasmine：使用Jasmine行为驱动，拥有灵巧而明确的语法可以让你轻松的编写测试代码。
• AMD：所有的模块都是使用AMD编写，且单层包括一个AMD模块加载器。

代码示例：

GameCore：

[js] view plaincopy

1. require(['frozen/GameCore'], function(GameCore){  
2.   // game state  
3.   var x = 0;  
4.   var y = 0;  
5.   //setup a GameCore instance  
6.   var game = new GameCore({  
7.     canvasId: 'canvas',  
8.     draw: function(context){  
9.       context.clearRect(0, 0, this.width, this.height);  
10.       context.fillRect(x, y, 50, 50);  
11.     },  
12.     update: function(millis){  
13.       x += 1;  
14.       y += 1;  
15.     }  
16.   });  
17.   //launch the game!  
18.   game.run();  
19. });  

[js] view plaincopy

1. require(['frozen/GameCore', 'dojo/keys'], function(GameCore, keys){  
2.   var x = 100;  
3.   var y = 100;  
4.   var speed = 2.5;  
5.   //setup a GameCore instance  
6.   var game = new GameCore({  
7.     canvasId: 'canvas',  
8.     draw: function(context){  
9.       context.clearRect(0, 0, this.width, this.height);  
10.       context.fillRect(x, y, 50, 50);  
11.     },  
12.     initInput: function(){  
13.       //tells the input manager to listen for key events  
14.       this.inputManager.addKeyAction(keys.LEFT_ARROW);  
15.       this.inputManager.addKeyAction(keys.RIGHT_ARROW);  
16.       this.inputManager.addKeyAction(keys.UP_ARROW);  
17.       this.inputManager.addKeyAction(keys.DOWN_ARROW);  
18.     },  
19.     update: function(millis){  
20.       //just an example showing how to check for presses, could be done more effeciently  
21.       if(this.inputManager.keyActions[keys.LEFT_ARROW].isPressed()){  
22.         x-= speed;  
23.       }  
24.       if(this.inputManager.keyActions[keys.RIGHT_ARROW].isPressed()){  
25.         x+= speed;  
26.       }  
27.       if(this.inputManager.keyActions[keys.UP_ARROW].isPressed()){  
28.         y-= speed;  
29.       }  
30.       if(this.inputManager.keyActions[keys.DOWN_ARROW].isPressed()){  
31.         y+= speed;  
32.       }  
33.     }  
34.   });  
35.   //launch the game!  
36.   game.run();  
37. });  

[js] view plaincopy

1. require(['frozen/GameCore', 'frozen/ResourceManager'], function(GameCore, ResourceManager){  
2.   var x = 0;  
3.   var y = 0;  
4.   var speed = 1;  
5.   //setup a ResourceManager to use in the game  
6.   var rm = new ResourceManager();  
7.   var backImg = rm.loadImage('images/background.png');  
8.   var nyan = rm.loadImage('images/nyan.png');  
9.   //setup a GameCore instance  
10.   var game = new GameCore({  
11.     canvasId: 'canvas',  
12.     resourceManager: rm,  
13.     draw: function(context){  
14.       context.drawImage(backImg, 0, 0, this.width, this.height);  
15.       context.drawImage(nyan, x, y);  
16.     },  
17.     update: function(millis){  
18.       x += speed;  
19.       y += speed;  
20.     }  
21.   });  
22.   //launch the game!  
23.   game.run();  
24. });