Cocos2d-HTML5入门第一天

虽然是以H5的身份入职新东家，但是一直都没有好好研究过canvas。头两天做了个下载app的页面给后台，统计Android，IOS和别的os机型点击和下载情况，然后第三天开始就为一个擦奖页面做动态效果，途中各种需求不断改，测试也反馈各种兼容性。到现在入职也不过十来天，已经大概涉猎了几本canvas相关的书籍，这期间对游戏的兴趣又重燃，曾几何时，选修过游戏开发，由于门槛太高，放弃了，而后成为了页面仔。

由于canvas和游戏的相关书籍比较多，这段时间空余时间都在研究H5游戏，lufylegend，easeljs，这两个引擎研究相对多点，都是类A3的，之前的记录都没有写下来，怕以后想翻翻记录找不到了，有点后悔。今天接触了Cocos2d-html5,一来觉得不能重蹈覆辙，二来这引擎和c++还是有嫡亲关系的，姑且为弥补曾经的遗憾尽量去学习，故写下此篇文章。

第一步：下载引擎

http://www.cocos2d-x.org/download 进入这个网站 coco2d-html5已经和coco2d-js整合了，直接点击下载Coco2d-js v3.1版本，当然也可以选择部分文件，一直以来觉得作为新手标配就是整个包。 

解压Coco2d-js v3.1引擎进入frameworks文件夹，打开cocos2d-html5文件，里面已经没有HelloHTML5World目录了，只有一个template，那么就基于这个模板来学习吧！

第二步：提供服务器支持

用谷歌浏览器打开index.html,发现一片漆黑，F12后控制台出现三个错误

很明显两个跨域问题，这种问题要解决，给个服务器支持，作为前端工程师，node和express应该是第一选择，安装这两件东东不在讨论范围，所以直接打开命令行，进入E:\gitwork\game;输入命令

express  hellococohtml5 

带项目建立成功进入hellococohtml5 目录

打开package.json

把依赖的 "jade": "*"换成"ejs": "*"  

然后进入app.js

把var ejs = require(‘ejs‘);加进去

app.set(‘view engine‘, ‘jade‘); 换成app.engine(‘.html‘, ejs.__express); app.set(‘view engine‘, ‘html‘);

解释一下：这里使用ejs模板，然后让ejs模板文件，使用扩展名为html的文件。

在DOS窗口的package.json所在目录下 键入 npm install 下载express和ejs包文件（键入要把注    //"jade": "*"释的整行去掉 ，npm对json有严格的语法要求）

服务器搭建完成

第三步： 把Cocos2d-HTML5部署到服务器

把第一步的frameworks的文件夹复制到服务器根目录下的public文件夹

然后把文件夹里面template目录下的index.html复制到服务器下的view目录

然后修改inde.html目录引进的js路径

现在的index和服务器目录结构看起来是这样的

修改后，刷新inde.html页面，然后又有404

根据提示点击浏览器报的错，定位到CCBoot.js 引进project.js的路径，在文件里面把CCBoot.js引进project.js目录改成frameworks/cocos2d-html5/template/project.json 然后

进入project.js把engineDir和jsList路径也改了，最后把template目录下的main.js下引进的资源文件路径也加上frameworks/cocos2d-html5/template/

So far so good 看起来是这样的

突然发现改引用路径好蛋疼，想不折腾就用webstorm或者部署个tomcat了，要不是因为上次这IED突然关闭，把我的1000多行代码物理乱码了，哥估计现在还没有放弃webstorm，虽然比较重量，但是自带服务器是个不错的选择。

第四步： Hello World

打开浏览器 刷新index.html页面

Hello World 总算出来了 碎觉！