Cocos2d-HTML5系列教程[二] 制作＂Hello World＂

 

就像在上个教程中承诺的那样，在这篇教程中我们会深入的了解并开始编码。和其他教程一样，我们会用Cocos2D-HTML实现HelloWorld。                  

就像在上个教程中承诺的那样，在这篇教程中我们会深入的了解并开始编码。和其他教程一样，我们会用Cocos2D-HTML实现HelloWorld。我在一开始就警告你，这将会是一个看起来比其实际要复杂很多的过程。有相当一部分样板代码需要你保存可以运行的环境，但总的来说它们不是那么困难。在以后的游戏中，你只需要作为模板复制粘帖就行了。

下面的内容将涉及到很多细节，比后面的教程都详细。后面有一个TL;DR（注：Too Long; Didn’t Read 太长，不必细究）概要，所以如果你喜欢的话，只需要简单的看下代码示例，然后跳到此篇文章的尾部读下概要，就可以理解究竟发生了什么。

为了使事情对你自己来说变得容易一些，在安装Cocos2D-html的文件夹下创建游戏工程。如果你是按照我在教程1中来做的，路径将是c:wampwww。为你的工程创建一个新文件夹，我的是MyFirstApp。打开那个文件夹，创建一个子文件夹Classes。

现在你的文件夹已经创建了，我们要创建一些文件。首先，需要创建一个HTML网页用来承载游戏。文件名按照以下约定（使Apache服务器可以默认指向它），我使用的是index.html。在文件中输入下面代码：

<div style="text-align: center;font-size: 0;"> 
<canvas id="gameCanvas" width="600" height="600"> Your browser does not support the canvas tag </canvas> 
</div> 

这是最常备的HTML代码。Body标签中的style属性使canvas标签在屏幕左侧刷新，并且拥有一个白色的背景。这里只有两个真正重要的东西。第一个是canvas标签，我们至少需要一个canvas标签让Cocos2D在上面绘制所有东西。为什么长宽是600像素？这是我blog内容栏的尺寸。因此，很明显，可以随意设定你的canvas的尺寸。最后，我们包含了cocos2d.js脚本。

让我们平滑的过渡到下一个任务，创建另一个文本文件，叫做cocos2d.js。文件中输入以下代码：

var cccc = cc = cc || {}; 
//Cocos2d directory 
//Cocos2d文件夹 
cc.Dir = './';//in relate to the html file or use absolute 
//相对于html文件的路径或绝对路径 
cc.loadQue = [];//the load que which js files are loaded 
//加载队列，储存加载的js文件 
cc.COCOS2D_DEBUG = 2; 
cc._DEBUG = 1; 
cc._IS_RETINA_DISPLAY_SUPPORTED = 0; 
//html5 selector method 
//html5 selector 方法 
cc.$ = function (x) { 
return document.querySelector(x); 
}; 
cc.$new = function (x) { 
return document.createElement(x); 
}; 
cc.loadjs = function (filename) { 
//add the file to the que 
//将文件加入到队列 
var script = cc.$new('script'); 
script.src = cc.Dir + filename; 
script.order = cc.loadQue.length; 
cc.loadQue.push(script); 
script.onload = function () { 
//file have finished loading, 
//if there is more file to load, we should put the next file on the head 
//文件加载结束，如果还有需要加载的文件，需要将其放到head中 
if (this.order + 1 < cc.loadQue.length) { 
cc.$('head').appendChild(cc.loadQue[this.order + 1]); 
//console.log(this.order); 
} 
else { 
cc.setup("gameCanvas"); 
//we are ready to run the game 
//我们准备好开始运行游戏 
cc.Loader.shareLoader().onloading = function () { 
cc.LoaderScene.shareLoaderScene().draw(); 
}; 
cc.Loader.shareLoader().onload = function () { 
cc.AppController.shareAppController().didFinishLaunchingWithOptions(); 
}; 
//preload ressources 
//预加载资源 
cc.Loader.shareLoader().preload([ 
//{type:"image", src:"Resources/HelloWorld.png"}, 
]); 
} 
}; 
if (script.order === 0)//if the first file to load, then we put it on the head 
//如果是第一个文件要进行加载，将其放到head中 
{ 
cc.$('head').appendChild(script); 
} 
}; 
// Engine files, 
// They can be packeted to a single file using the Ant tool. 
// The shell files and Closure Compiler which Ant needs are provided in tools folder and cocos2d folder. 
// 引擎文件,可以使用Ant工具将它们打包成一个文件。Ant需要的shell文件和Closure编译器在工具文件夹和cocos2d文件夹中提供了。 
cc.loadjs('../cocos2d/platform/CCClass.js');//0 
cc.loadjs('../cocos2d/platform/CCCommon.js');//1 
cc.loadjs('../cocos2d/platform/platform.js');//2 
cc.loadjs('../cocos2d/cocoa/CCGeometry.js');//3 
cc.loadjs('../cocos2d/cocoa/CCSet.js');//4 
cc.loadjs('../cocos2d/platform/CCTypes.js');//5 
cc.loadjs('../cocos2d/cocoa/CCAffineTransform.js');//5 
cc.loadjs('../cocos2d/support/CCPointExtension.js');//12 
cc.loadjs('../cocos2d/base_nodes/CCNode.js');//6 
cc.loadjs('../cocos2d/platform/ccMacro.js');//7 
cc.loadjs('../cocos2d/platform/ccConfig.js');//7 
cc.loadjs('../cocos2d/textures/CCTexture2D.js');//12 
cc.loadjs('../cocos2d/textures/CCTextureCache.js');//12 
cc.loadjs('../cocos2d/actions/CCAction.js');//7 
cc.loadjs('../cocos2d/actions/CCActionInterval.js');//7 
cc.loadjs('../cocos2d/actions/CCActionManager.js');//7 
cc.loadjs('../cocos2d/actions/CCActionEase.js');//7 
cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCScene.js');//8 
cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCLayer.js');//9 
cc.loadjs('../cocos2d/layers_scenes_transitions_nodes/CCTransition.js'); 
cc.loadjs('../cocos2d/sprite_nodes/CCSprite.js');//10 
cc.loadjs('../cocos2d/label_nodes/CCLabelTTF.js');//11 
cc.loadjs('../cocos2d/text_input_node/CCIMEDispatcher.js');//12 
cc.loadjs('../cocos2d/touch_dispatcher/CCTouchDelegateProtocol.js');//12 
cc.loadjs('../cocos2d/touch_dispatcher/CCTouchHandler.js');//12 
cc.loadjs('../cocos2d/touch_dispatcher/CCTouchDispatcher.js');//12 
cc.loadjs('../cocos2d/keypad_dispatcher/CCKeypadDelegate.js');//12 
cc.loadjs('../cocos2d/keypad_dispatcher/CCKeypadDispatcher.js');//12 
cc.loadjs('../cocos2d/CCDirector.js');//13 
cc.loadjs('../cocos2d/CCScheduler.js');//14 
cc.loadjs('../cocos2d/CCLoader.js');//14 
cc.loadjs('../cocos2d/CCDrawingPrimitives.js');//15 
cc.loadjs('../cocos2d/platform/CCApplication.js');//16 
cc.loadjs('../cocos2d/platform/CCSAXParser.js');//16 
cc.loadjs('../cocos2d/platform/AppControl.js');//18 
cc.loadjs('../cocos2d/menu_nodes/CCMenuItem.js'); 
cc.loadjs('../cocos2d/menu_nodes/CCMenu.js'); 
cc.loadjs('../CocosDenshion/SimpleAudioEngine.js'); 
// User files  
// 用户文件 
cc.loadjs('Classes/AppDelegate.js');//17 
cc.loadjs('MyFirstApp.js');//19 

这段代码几乎涵盖了最基本的Cocos2D-HTML例子，注释和其它东西。我推荐你直接使用它，而不是去重新发明轮子。