COCOS2D-JS入门-web端项目部署

下载cocos2d-js文件，建议上官网下载（外国官网或者中国官网都可以）

外国官网：http://cocos2d-x.org/download（选择最新版即可，我下载时为3.9版本，大概300多M）

国内官网：http://www.cocos.com/download/cocos2d-x/

因为只写web版本：所以解压后我们只要里面的web文件夹即可，别的可以删掉了，而web文件夹才11多M（如果想写跨平台，还需要学习其他人的教程才可，本随笔不记录跨平台教程）

之后我们要跑起个hello World （想必新学一门编程语言或者框架都要干这个事吧）

打开web目录我们可以看到有个template文件夹，这个就是cocos官网给我们写好的hello案例，打开index.html即可

此时你会打开发现一直在loading对吧？是就对了，因为什么呢，因为官网给的代码有问题，一个很简单的问题:

要想看到这个例子的庐山真面目，需要修改index.html才可以，也就是把js文件的加载位置放到body的最后边，如下：

此时我们在运行这个文件，就可以在浏览器中看到效果了，并且官方的例子还做了移动端自适应：

其实我们也可以不用下载这个完整的包，毕竟对于前端来说还是习惯了引入一个库文件即可的开发习惯。

所以官网也给了我们下载精简版Lite版本和完整版版本以及定制版版本的下载地址页面：http://cocos2d-x.org/filecenter/jsbuilder

并且下载下来的是一个压缩文件，里面带有你选择的js文件以及一个cocos2d-js开发的模板。

只要根据自己喜好去下载即可，但这里有个坑，就是官网的300多M里面自带的demo用lite版本会报错，原因是缺少必要模块。所以只能用完整版，或者自己根据需要用一些自动化构建工具合并压缩你需要的模块，这样也会减少js文件的体积，提高游戏资源的加载速度，毕竟完整版的压缩版本已经达到了1.8M（网站下载大小）的大小了。

在这里发布下我目前合并的版本。压缩完是500多kb：

var fileLiteArr = [
    './web/Base64Images.js',
    './web/CCBoot.js',
    './web/cocos2d/core/event-manager/CCEventHelper.js',
    './web/CCDebugger.js',
    './web/cocos2d/core/utils/BinaryLoader.js',
    './web/cocos2d/core/platform/CCClass.js',
    './web/cocos2d/core/platform/CCCommon.js',
    './web/cocos2d/core/cocoa/CCGeometry.js',
    './web/cocos2d/core/platform/CCTypesPropertyDefine.js',
    './web/cocos2d/core/platform/CCSAXParser.js',
    './web/cocos2d/core/platform/CCLoaders.js',
    './web/cocos2d/core/platform/CCConfig.js',
    './web/cocos2d/core/platform/miniFramework.js',
    './web/cocos2d/core/platform/CCMacro.js',
    './web/cocos2d/core/platform/CCTypesWebGL.js',
    './web/cocos2d/core/platform/CCTypes.js',
    './web/cocos2d/core/platform/CCEGLView.js',
    './web/cocos2d/core/platform/CCScreen.js',
    './web/cocos2d/core/platform/CCVisibleRect.js',
    './web/cocos2d/core/platform/CCInputManager.js',
    './web/cocos2d/core/platform/CCInputExtension.js',
    './web/cocos2d/core/cocoa/CCAffineTransform.js',
    './web/cocos2d/core/support/CCPointExtension.js',
    './web/cocos2d/core/support/CCVertex.js',
    './web/cocos2d/core/support/TransformUtils.js',
    './web/cocos2d/core/event-manager/CCTouch.js',
    './web/cocos2d/core/event-manager/CCEvent.js',
    './web/cocos2d/core/event-manager/CCEventListener.js',
    './web/cocos2d/core/event-manager/CCEventManager.js',
    './web/cocos2d/core/event-manager/CCEventExtension.js',
    './web/cocos2d/core/base-nodes/BaseNodesPropertyDefine.js',
    './web/cocos2d/core/renderer/RendererCanvas.js',
    './web/cocos2d/core/renderer/RendererWebGL.js',
    './web/cocos2d/core/base-nodes/CCNode.js',
    './web/cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js',
    './web/cocos2d/core/base-nodes/CCNodeWebGLRenderCmd.js','./web/cocos2d/core/base-nodes/CCAtlasNode.js',
    './web/cocos2d/core/base-nodes/CCAtlasNodeCanvasRenderCmd.js',
    './web/cocos2d/core/base-nodes/CCAtlasNodeWebGLRenderCmd.js',
    './web/cocos2d/core/textures/TexturesWebGL.js',
    './web/cocos2d/core/textures/TexturesPropertyDefine.js',
    './web/cocos2d/core/textures/CCTexture2D.js',
    './web/cocos2d/core/textures/CCTextureCache.js',
    './web/cocos2d/core/textures/CCTextureAtlas.js',
    './web/cocos2d/core/scenes/CCScene.js',
    './web/cocos2d/core/scenes/CCLoaderScene.js',
    './web/cocos2d/core/layers/CCLayer.js',
    './web/cocos2d/core/layers/CCLayerCanvasRenderCmd.js',
    './web/cocos2d/core/layers/CCLayerWebGLRenderCmd.js',
    './web/cocos2d/core/sprites/SpritesPropertyDefine.js',
    './web/cocos2d/core/sprites/CCSprite.js',
    './web/cocos2d/core/sprites/CCSpriteCanvasRenderCmd.js',
    './web/cocos2d/core/sprites/CCSpriteWebGLRenderCmd.js',
    './web/cocos2d/core/sprites/CCBakeSprite.js',
    './web/cocos2d/core/sprites/CCAnimation.js',
    './web/cocos2d/core/sprites/CCAnimationCache.js',
    './web/cocos2d/core/sprites/CCSpriteFrame.js',
    './web/cocos2d/core/sprites/CCSpriteFrameCache.js',
    './web/cocos2d/core/sprites/CCSpriteBatchNode.js',
    './web/cocos2d/core/sprites/CCSpriteBatchNodeCanvasRenderCmd.js',
    './web/cocos2d/core/sprites/CCSpriteBatchNodeWebGLRenderCmd.js',
    './web/cocos2d/core/CCConfiguration.js',
    './web/cocos2d/core/CCDirector.js',
    './web/cocos2d/core/CCDirectorCanvas.js',
    './web/cocos2d/core/CCDirectorWebGL.js',
    './web/cocos2d/core/CCCamera.js',
    './web/cocos2d/core/CCScheduler.js',
    './web/cocos2d/core/utils/CCProfiler.js',
    './web/cocos2d/core/CCDrawingPrimitivesCanvas.js',
    './web/cocos2d/core/CCDrawingPrimitivesWebGL.js',
    './web/cocos2d/core/labelttf/LabelTTFPropertyDefine.js',
    './web/cocos2d/core/labelttf/CCLabelTTF.js',
    './web/cocos2d/core/labelttf/CCLabelTTFCanvasRenderCmd.js',
    './web/cocos2d/core/labelttf/CCLabelTTFWebGLRenderCmd.js',
    './web/cocos2d/core/CCActionManager.js',
    './web/cocos2d/kazmath/utility.js',
    './web/cocos2d/kazmath/vec2.js',
    './web/cocos2d/kazmath/vec3.js',
    './web/cocos2d/kazmath/vec4.js',
    './web/cocos2d/kazmath/ray2.js',
    './web/cocos2d/kazmath/mat3.js',
    './web/cocos2d/kazmath/mat4.js',
    './web/cocos2d/kazmath/plane.js',
    './web/cocos2d/kazmath/quaternion.js',
    './web/cocos2d/kazmath/aabb.js',
    './web/cocos2d/kazmath/gl/mat4stack.js',
    './web/cocos2d/kazmath/gl/matrix.js',
    './web/cocos2d/shaders/CCShaders.js',
    './web/cocos2d/shaders/CCShaderCache.js',
    './web/cocos2d/shaders/CCGLProgram.js',
    './web/cocos2d/shaders/CCGLStateCache.js',
    './web/cocos2d/shape-nodes/CCDrawNode.js',
    './web/cocos2d/shape-nodes/CCDrawNodeCanvasRenderCmd.js',
    './web/cocos2d/shape-nodes/CCDrawNodeWebGLRenderCmd.js',
    './web/cocos2d/actions/CCAction.js',
    './web/cocos2d/actions/CCActionInterval.js',
    './web/cocos2d/actions/CCActionInstant.js',
    './web/cocos2d/actions/CCActionCamera.js',
    './web/cocos2d/actions/CCActionEase.js',
    './web/cocos2d/actions/CCActionCatmullRom.js',
    './web/cocos2d/actions/CCActionTween.js',
    './web/cocos2d/menus/CCMenuItem.js',
    './web/cocos2d/menus/CCMenu.js',
    './web/cocos2d/audio/CCAudio.js'
];

以上就是我目前压缩的版本，用这个跑官方的的demo就不会报错了，至于工具可以选择grunt，gulp或者webpack等前端构建工具进行合并压缩。

好了，这样我们的COCOS2D-html5的开发环境就部署好了，也算是学习web游戏的第一步就迈出去了，接下来就要看你自己找学习资料或者书籍努力了！