背景与前言
现在什么技术火？Android，ios，HTML5，人工智能，云计算……如此多的技术，而且发展非常快，大家都很迷茫，到底要学什么呢？我也很迷茫，只能走一步算一步。
但是人总是有理想的是吧。我的理想很简单：一步步实现我的下一个理想。大一的时候，我看了一部电影，叫《社交网络》，那时的理想就是让学校找我写代码。现在大三了，实现了这个理想，给我配了电脑，配了办公室。下一个理想，做出一番事业，然后去母校演讲。
做为一个男性，本能里应该对游戏感兴趣。我也很想写一个自己的游戏，想想，走进网吧，大家玩的都是你写的游戏，很有成就感。
再学习了android的cocos2d-x之后，又来研究了一下html5的版本，因为这个版本是有专人维护的，所以以后也不用担心更新问题。
从哪开始？
很多人学一个技术的时候根本不知道从哪里上手，确实，一个技术最难的应该就是入门了，只要入了门，多花点时间很容易就能掌握，这也正是中国的那句古话：师父领进门，修行在个人。
废话了这么多，cocos2d-html5（以后简称cocos2d吧）怎么入门呢？首先可以看官网（http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5），他有一个名叫Getting Started with Cocos2d-html5的文章。一般有一定规模的技术或项目都有这么一个文档，教你怎么快速的上手，那是不是照着这篇文章做就行了呢？在我写这篇日志的时候，那篇文章的教程是一个过时的教程，也就是说看那篇文章是没用的。（一般的项目是可以从这入门的。）
虽然教程过时了，但是它还是给我们指明了一个方向，那就是去看Hello World项目。
Hello World
我认为好的程序员应该养成这样一个习惯：学习新技术或者开发的时候，从hello world开始。
我们下载cocos2d的包，解压之后可以看到一个叫做HelloHTML5World的文件。这里面也就是我们第一个要研究的代码了。
这个项目不需要服务器容器，直接打开index.html就能看到效果。效果其实很简单，但是哪个游戏不是通过一系列的简单效果组成的呢？好了，直接看代码吧。
我们首先要看的是main.js，为什么首先看这个我后面会说的。
它定义了一个cocos2dApp，调用了cc.Application.extend()方法。如果有一定基础的人应该知道extend的意思，也就是继承。这个cocos2dApp继承了cc.Application，关于这个类我们也不多说，用的一般不多，基本只要用到一个方法applicationDidFinishLaunching。看名字就知道，这个方法是在程序加载完成的时候调用的。
在这个方法上面还有一个ctor方法，大家可以猜猜这个方法的作用，对了，就是构造函数。
好了，我们来一步步的解析代码吧。
首先是ctor，构造函数中传进来一个scene，这个scene我们后面就会看到。第一步就是调用父类构造函数，这个是需要注意的，很多错误就是没调用父类的构造函数造成的。下面的代码是一系列的配置，先配置了DEBUG的模式，它是从this.config里取出来的，那这个config是从哪里来的呢？我们会注意到，HelloHTML5World文件夹下还有一个cocos2d.js。这个文件就是配置文件了。继续往下，我们就直接看注释吧。
1 cc.initDebugSetting();//初始化debug设置 2 cc.setup(this.config['tag']);//装载页面上的canvas,这个tag就是canvas的id 3 //当程序资源在读取的时候，显示加载动画 4 cc.Loader.getInstance().onloading = function () { 5 cc.LoaderScene.getInstance().draw(); 6 }; 7 //加载完了之后，调用下面的方法(实际是调用的run方法) 8 cc.Loader.getInstance().onload = function () { 9 cc.AppController.shareAppController().didFinishLaunchingWithOptions(); 10 }; 11 //提前加载资源 12 cc.Loader.getInstance().preload(g_ressources); 13 再看applicationDidFinishLaunching： 14 // 获得导演 15 var director = cc.Director.getInstance(); 16 // 设置是否显示FPS 17 director.setDisplayStats(this.config['showFPS']); 18 // 设置帧率 19 director.setAnimationInterval(1.0 / this.config['frameRate']); 20 // run 21 director.runWithScene(new this.startScene()); 22 return true;
这个cc.Director是一个很重要的类，而且是单例的，每次使用都是getInstance()，这个类我们以后会经常使用，它可以控制游戏的很多东西。这个方法要注意的是最后一定要return true。
最后，new一个实例，传入一个开始场景（在myapp.js中），开始程序
var myApp = new cocos2dApp(HelloWorldScene);
同学们又会找HelloWorldScene在哪。不急。我们先看cocos2d.js：
1 var d = document; 2 //这个c是一个配置对象，程度很多地方会用到 3 var c = { 4 //0表示不开debug，1表示基本debug，2表示debug全开 5 COCOS2D_DEBUG:2, 6 /** 7 * box2d和chipmunk是两个物理引擎 8 */ 9 box2d:false, 10 chipmunk:false, 11 //显示FPS 12 showFPS:true, 13 //帧率 14 frameRate:60, 15 loadExtension:false, 16 //canvas的id 17 tag:'helloWorld', 18 //cocos2d的存放地址 19 engineDir:'http://www.cnblogs.com/cocos2d/', 20 //单独编译成一个文件的话，就使用下面的配置 21 //SingleEngineFile:'', 22 //写的js源文件 23 appFiles:[ 24 'src/resource.js', 25 'src/myApp.js' 26 ] 27 }; 28 window.addEventListener('DOMContentLoaded', function () { 29 //准备加载引擎文件 30 var s = d.createElement('script'); 31 /*********加载文件*******/ 32 //如果是打包成了单文件，则加载单文件 33 if (c.SingleEngineFile && !c.engineDir) { 34 s.src = c.SingleEngineFile; 35 } 36 //否则就启用jsloader，加载所有的引擎文件，并且加载appFiles里的js文件和main.js 37 else if (c.engineDir && !c.SingleEngineFile) { 38 s.src = c.engineDir + 'platform/jsloader.js'; 39 } 40 else { 41 alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"'); 42 } 43 //s.src = 'Packed_Release_File.js'; //只有一个打包好的文件，就只写这句就可以了 44 //将配置存到document的ccConfig里 45 document.ccConfig = c; 46 //给script标签加个id 47 s.id = 'cocos2d-html5'; 48 //将加载文件加到body里 49 d.body.appendChild(s); 50 });
关于这两个文件，相信大家应该都懂了。但是总觉得，这么复杂的配置，哪里记得住啊，以后要用还得翻以前的旧代码啊。Cocos2d已经想到了这点。解压出来的文件中，应该有一个叫template文件夹，这个文件夹里装的就是cocos2d初始配置的模板。
好了，正戏来了，我们来看看那个HelloWorldScene。这个东西就藏在src文件夹下的myApp.js里。HelloWorldScene在这个文件的最下面。继承了cc.Scene这个类我们以后也会经常用，它定义了一个场景，我们要重写onEnter事件。方法里很简单，创建了一个HelloWorld，进行了初始化init() ，然后调用addChild方法，注意，这个方法以后会频繁的使用，作用就是将某个对象加入到当前对象的容器中。
我们又得转镜头到Helloworld，它继承自cc.Layer，这个类我们也会经常用到，它定义了一个层。关于层的概念大家可以参考动画片的制作，有背景层，道具层，人物层，做游戏也是这样的，背景一层，建筑一层，人物一层，界面一层，等等。
我们直接看代码：
1 isMouseDown:false,//用于标志鼠标有没有点下 2 helloLabel:null,//显示的文字 3 circle:null,//上面创建的圆圈精灵 4 sprite:null,//一张图片精灵 5 init:function () { 6 var selfPointer = this; 7 ////////////////////////////// 8 // 1. 必须先调用父类构造方法 9 this._super(); 10 ///////////////////////////// 11 // 2. 增加一个关闭菜单，点击关闭菜单后退出程序 12 // 通过导演获得窗口的大小 13 var size = cc.Director.getInstance().getWinSize(); 14 // 加一个关闭按钮 15 var closeItem = cc.MenuItemImage.create( 16 "res/CloseNormal.png", 17 "res/CloseSelected.png", 18 function () { 19 history.go(-1); 20 },this);//点击时调用后退 21 closeItem.setAnchorPoint(cc.p(0.5, 0.5)); 22 var menu = cc.Menu.create(closeItem);//用按钮创建一个菜单，可以传多个item 23 menu.setPosition(cc.PointZero()); 24 this.addChild(menu, 1);//加到层里 25 closeItem.setPosition(cc.p(size.width - 20, 20)); 26 ///////////////////////////// 27 // 3. 加入文字和图片 28 // 增加一个文字，显示 "Hello World" 29 // 创建一个label 30 this.helloLabel = cc.LabelTTF.create("Hello World", "Arial", 38); 31 // 放在屏幕正中 32 this.helloLabel.setPosition(cc.p(size.width / 2, 0)); 33 // 加到层中 34 this.addChild(this.helloLabel, 5); 35 //LazyLayer是一个很少刷新的层，用于存放类似logo或者地图等不需要经常刷新的层 36 var lazyLayer = new cc.LazyLayer(); 37 this.addChild(lazyLayer); 38 // 设置精灵图片 39 this.sprite = cc.Sprite.create("res/HelloWorld.png"); 40 this.sprite.setPosition(cc.p(size.width / 2, size.height / 2)); 41 this.sprite.setScale(0.5); 42 this.sprite.setRotation(180); 43 lazyLayer.addChild(this.sprite, 0); 44 var rotateToA = cc.RotateTo.create(2, 0);//旋转动画 45 var scaleToA = cc.ScaleTo.create(2, 1, 1);//缩放动画 46 this.sprite.runAction(cc.Sequence.create(rotateToA, scaleToA));//运行动画 47 this.circle = new CircleSprite();//之前写的圆圈精灵 48 this.circle.setPosition(cc.p(40, size.height - 60)); 49 this.addChild(this.circle, 2); 50 this.circle.schedule(this.circle.myUpdate, 1 / 60);//刷新的函数和频率 51 this.helloLabel.runAction(cc.MoveBy.create(2.5, cc.p(0, size.height - 40)));//移动动画 52 this.setTouchEnabled(true);//！！！设置可以点击，设置了这个才能点击 53 this.adjustSizeForWindow();//根据窗口的大小调整自己的尺寸 54 lazyLayer.adjustSizeForCanvas();//根据canvas层调整自己的大小 55 window.addEventListener("resize", function (event) { 56 selfPointer.adjustSizeForWindow();//窗口改变大小时，调整大小 57 }); 58 return true; 59 }
其中的cc.RotateTO,cc.ScaleTo,我们以后再介绍。着重说一下cc.Sprite，这个类是用于创建一个叫精灵的东西，也许大家听到这个词语很奇怪，我怎么没在游戏里看到过精灵？其实，我们控制的玩家本身就是一个精灵，游戏场景的每一个NPC，每个会移动物体都是一个精灵，精灵也是游戏中的最基础的也是最重要的部件了。关于精灵，我以后会专门用一章来讲解它的作用。
后面的方法现在还不需要用到，我们就先不了解。
src下还有一个resource.js。这是干嘛的？打开来看，我们发现它定义了一系列的资源位置和类型，这些资源在cocos2dApp的构造函数中进行预加载，大家看看就懂，我也就不啰嗦了。
结尾
关于这个cocos2d-html5的系列介绍，之后我还计划会讲：
1.解析simple中的一个游戏
2.开发一个简单的游戏
3.物理引擎的介绍
4.开发一个较复杂的游戏