Cocos2d-HTML5入门第一天

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

虽然是以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 总算出来了 碎觉！

总结

以上是内存溢出为你收集整理的Cocos2d-HTML5入门第一天全部内容，希望文章能够帮你解决Cocos2d-HTML5入门第一天所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。