1 环境搭建

版本Cocos2d-html5-v2.2，tomcat7.0

配置tomcat，然后直接解压Cocos2d-html5-v2.2.zip，访问解压后的根目录的index.html就可以看到demo

2 cocos2d-html5目录结构简单说明

以samples\games\FruitAttack这个游戏为例

index.html：主页面

cocos2d.js:配置文件，这里可以加载.js文件

main.js：程序的主入口（之所以叫main.js这个名，是在\cocos2d\platform\jsloader.js 中配置的）

3 调试js代码，输出log

1 输出log

火狐浏览器，f12调出控制台，可以在代码中用

var i = 'I am a string';

console.log('变量：', i);

2 输出alert

alert("alert");

3 debug

可以在调试器中查看代码并加断点跟踪代码

4 基本代码实现触屏，主循环，绘制

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Fruit Attack</title>

    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>

    <meta name="viewport" content="width=320,user-scalable=no"/>

    <meta name="screen-orientation" content="portrait"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="full-screen" content="yes"/>

    <meta name="x5-fullscreen" content="true"/>

    <style>

        body, canvas, div {

            -moz-user-select: none;

            -webkit-user-select: none;

            -ms-user-select: none;

            -khtml-user-select: none;

            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

        }

    </style>

</head>

<body style="padding:0; margin: 0; background: #000;">

    <canvas id="gameCanvas" width="800" height="450"></canvas>

</body>

</html>

<script src="cocos2d.js"></script>//注意这里，指定配置文件

cocos2d.js

(function () {

    var d = document;

    var c = {

        COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug

        box2d:false,

        chipmunk:false,

        showFPS:true,

        frameRate:60,

        loadExtension:true,

        renderMode:1,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)

        tag:'gameCanvas', //the dom element to run cocos2d on

        engineDir:'../../../cocos2d/',

        //SingleEngineFile:'',

        appFiles:['src/WelcomeLayer.js','src/GameData.js','src/GameLayer.js'   //注意这里要引入所有用到的.js文件

            ]

    };

    if(!d.createElement('canvas').getContext){

        var s = d.createElement('div');

        s.innerHTML = '<h2>Your browser does not support HTML5 canvas!</h2>' +

            '<p>Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier.Click the logo to download.</p>' +

            '<a href="http://www.google.com/chrome" target="_blank"><img src="http://www.google.com/intl/zh-CN/chrome/assets/common/images/chrome_logo_2x.png" border="0"/></a>';

        var p = d.getElementById(c.tag).parentNode;

        p.style.background = 'none';

        p.style.border = 'none';

        p.insertBefore(s);

        d.body.style.background = '#ffffff';

        return;

    }

    window.addEventListener('DOMContentLoaded', function () {

        //first load engine file if specified

        var s = d.createElement('script');

        /*********Delete this section if you have packed all files into one*******/

        if (c.SingleEngineFile && !c.engineDir) {

            s.src = c.SingleEngineFile;

        }

        else if (c.engineDir && !c.SingleEngineFile) {

            s.src = c.engineDir + 'platform/jsloader.js';

        }

        else {

            alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"');

        }

        /*********Delete this section if you have packed all files into one*******/

            //s.src = 'Packed_Release_File.js'; //IMPORTANT: Un-comment this line if you have packed all files into one

        document.ccConfig = c;

        s.id = 'cocos2d-html5';

        d.body.appendChild(s);

        //else if single file specified, load singlefile

    });

})();

main.js 游戏的入口类

var cocos2dApp = cc.Application.extend({

    config:document['ccConfig'],

    ctor:function (scene) {

        this._super();

        this.startScene = scene;

        cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];

        cc.initDebugSetting();

        cc.setup(this.config['tag']);

        cc.AppController.shareAppController().didFinishLaunchingWithOptions();

    },

    applicationDidFinishLaunching:function () {

        if(cc.RenderDoesnotSupport()){

            //show Information to user

            alert("Browser doesn't support Canvas or WebGL");

            return false;

        }

        // initialize director

        var director = cc.Director.getInstance();

        cc.EGLView.getInstance()._adjustSizeToBrowser();

        cc.EGLView.getInstance().setDesignResolutionSize(320,480,cc.RESOLUTION_POLICY.SHOW_ALL);

        director.setDisplayStats(this.config['showFPS']);

        // set FPS. the default value is 1.0/60 if you don't call this

        director.setAnimationInterval(1.0 / this.config['frameRate']);

        //load resources

        cc.LoaderScene.preload(g_ressources, function(){

            director.replaceScene(new this.startScene());

        }, this);

        return true;

    }

});

var myApp = new cocos2dApp(MyGameScene);//注意这里是游戏入口，初始化我们的场景类

WelcomeLayer.js 包含场景类，层类，是游戏的菜单界面

var WelcomeLayer = cc.Layer.extend({

    ctor:function () {

        this._super();

        this.init();

    },

    init:function () {

        var bRet = false;

        if (this._super()) {

            var bgSprite = cc.Sprite.create("res/background.jpg");//添加一个精灵

            bgSprite.setPosition(cc.p(160,240));

            this.addChild(bgSprite);

            var itemStartGame = cc.MenuItemImage.create(//实现一个菜单按键事件

                "res/btn/btnStartGameNor.png",

                "res/btn/btnStartGameDown.png",

                this.menuCallBack,

                this

            );

            itemStartGame.setPosition(cc.p(160, 160));

            var menu = cc.Menu.create(itemStartGame);

            menu.setPosition(cc.p(0, 0));

            this.addChild(menu);

            bRet = true;

        }

        return bRet;

    },

    menuCallBack:function(sender){//菜单点击回调函数

        gSharedEngine.playEffect(EFFECT_BUTTON_CHICK);

        gGameMode = eGameMode.Timer;

        var nextScene = cc.Scene.create();

        var nextLayer = new GameLayer;//注意这里的这个Layer是游戏的主类

        nextScene.addChild(nextLayer);

        cc.Director.getInstance().replaceScene(cc.TransitionSlideInT.create(0.4, nextScene));

    }

});

var MyGameScene = cc.Scene.extend({ //场景类

    onEnter:function () {

        this._super();

        gScoreData.initData();

        var spriteFrameCache = cc.SpriteFrameCache.getInstance();

        spriteFrameCache.addSpriteFrames("res/baseResource.plist","res/baseResource.png");

        var layer = new WelcomeLayer;

        this.addChild(layer);

        gSharedEngine.setMusicVolume(1);

        gSharedEngine.setEffectsVolume(1);

        gSharedEngine.playMusic(MUSIC_BACKGROUND,true);

    }

});

GameLayer.js 游戏的主类，包含主循环，按键，触屏操作

<pre code_snippet_id="371690" snippet_file_name="blog_20140531_5_332859" name="code" class="javascript">var GameLayer = cc.Layer.extend({

    logoSprite:null,//定义类变量

    _size: null,

    ctor:function () {

        this._super();

        this.init();

    },

    init:function () {

        var bRet = false;

        if (this._super()) {

	this._size = cc.Director.getInstance().getWinSize();

	if (sys.capabilities.hasOwnProperty('mouse'))//使用鼠标或者触屏首先要打开权限

             this.setMouseEnabled(true);

        if (sys.capabilities.hasOwnProperty('touches'))

              this.setTouchEnabled(true);

	this.logoSprite = cc.Sprite.create("res/logo.png");

        this.logoSprite.setPosition(cc.p(160,320));

        this.addChild(this.logoSprite);

	//this.schedule(this.logic, 0.5);//游戏logic  //注意这句打开可以打开logic函数，0.5秒调用一次

        this.scheduleUpdate();//启动游戏循环，会自动调用update函数

            bRet = true;

        }

        return bRet;

    },

	//游戏logic

    logic:function () {

        var i = 'I am a string';

	console.log('变量：', i);

	var cpos = this.logoSprite.getPosition();

	this.logoSprite.setPosition(cc.p(cpos.x+5,cpos.y));

    },

    draw:function(){//draw方法会自动调用

      cc.drawingUtil.setDrawColor4B(255,255,255,255);

      cc.drawingUtil.drawCircle(cc.p(100, 100), 32, 0, 10, true);

    }，

    update:function(dt){

       

    },

    onTouchesMoved:function (touches, event) {//触屏方法

        this.processEvent(touches[0]);

    },

    onMouseDragged:function (event) {//鼠标滑动方法

        this.processEvent(event);

    },

	processEvent:function(event) {

		var delta = event.getDelta();

		var curPos = this.logoSprite.getPosition();

		curPos= cc.pAdd(curPos, delta);

		curPos= cc.pClamp(curPos, cc.POINT_ZERO, cc.p(this._size.width, this._size.height));

		console.log('curPosx：', curPos.x);

		this.logoSprite.setPosition(curPos);

	}

});

GameData.js 游戏的资源类，直接用的demo的，没有进行删减

//var gNotification = cc.NotificationCenter.getInstance();

var gSpriteFrameCache = cc.SpriteFrameCache.getInstance();

var gSharedEngine = cc.AudioEngine.getInstance();

var MUSIC_BACKGROUND  = "audio/musicByFoxSynergy.mp3";

var EFFECT_BUTTON_CHICK  = "audio/effect_buttonClick.ogg";

var EFFECT_GAME_FAIL  = "audio/effect_game_fail.ogg";

var EFFECT_GAME_WIN  = "audio/effect_game_pass.ogg";

var EFFECT_PATTERN_UN_SWAP  = "audio/effect_unswap.ogg";

var EFFECT_PATTERN_CLEAR  = "audio/effect_clearPattern.ogg";

var EFFECT_PATTERN_BOMB  = "audio/effect_bombPattern.ogg";

var EFFECT_TIME_WARN  = "audio/effect_timewarning.ogg";

var g_ressources = [

    {src:"res/background.jpg"},

    {src:"res/logo.png"},

    {src:"res/btn/btnStartGameDown.png"},

    {src:"res/btn/btnStartGameNor.png"},

    {src:"res/ProgressBarFront.png"},

    {src:"res/ProgressBarBack.png"},

    {src:"res/baseResource.png"} ,

    {src:"res/baseResource.plist"},

    {src:"res/PatternBg.png"},

    {src:"resultLayer/star.png"},

    {src:"resultLayer/btnResultRestart.png"},

    {src:"resultLayer/btnResultRestartDown.png"},

    {src:MUSIC_BACKGROUND},

    {src:EFFECT_BUTTON_CHICK},

    {src:EFFECT_GAME_FAIL},

    {src:EFFECT_GAME_WIN},

    {src:EFFECT_PATTERN_UN_SWAP},

    {src:EFFECT_PATTERN_CLEAR},

    {src:EFFECT_PATTERN_BOMB},

    {src:EFFECT_TIME_WARN}

];

var gScoreData = {lastScore:0,bestScore:0};

var eGameMode = {

    Invalid : -1,

    Challenge:0,

    Timer:1,

    Count:2

};

var gGameMode = eGameMode.Challenge;

gScoreData.setLastScore = function(score){

    this.lastScore = score;

    if (score > this.bestScore)

    {

        this.bestScore = score;

        sys.localStorage.setItem('bestScore',this.bestScore);

    }

    sys.localStorage.setItem('lastScore',this.lastScore);

};

gScoreData.initData = function(){

    if( sys.localStorage.getItem('gameData') == null){

        sys.localStorage.setItem('bestScore','0');

        sys.localStorage.setItem('lastScore','0');

        sys.localStorage.setItem('gameData',33) ;

        return;

    }

    this.bestScore = parseInt(sys.localStorage.getItem('bestScore'));

};

5 触屏方法

触屏方法是加在layer类的子类中

首先，在init中加入触屏权限，这里只加触屏，还可以加键盘，鼠标的权限（注意权限要加在this.scheduleUpdate()前,否则会有触屏方法不起作用）

if (sys.capabilities.hasOwnProperty('touches'))

               this.setTouchEnabled(true);

然后，就可以继承并覆盖触屏方法

onTouchesMoved:function (touches, event) {

        //this.processEvent(touches[0]);

},

onTouchesEnded:function(touches, event){

		console.log('touch end!!!');

        //this.processTouchEndEvent(touches[0].getLocation());

},

processTouchEndEvent:function(pos) {//接收一个位置

	this.logoSprite.setPosition(pos);

},

processEvent:function(event) {

        var delta = event.getDelta();//移动量

	var curPos = this.logoSprite.getPosition();

	curPos= cc.pAdd(curPos, delta);//当前位置+移动位置

	curPos= cc.pClamp(curPos, cc.POINT_ZERO, cc.p(this._size.width, this._size.height));

	this.logoSprite.setPosition(curPos);

},

6 接入box2d

1 引入box2d.js

在index.html中加入

2 接入代码

参考\samples\tests\Box2dTest

只贴gameLayer，注意addFoot()鼠标拾取部分的处理

var TAG_SPRITE_MANAGER = 1;

var PTM_RATIO = 32;

var GameLayer = cc.Layer.extend({

	screenSize:null,

	ballSprite:null,

	footSprite:null,

	mouseX:null,

	mouseY:null,

	mouseJoint:null,

	mouseJointDef:null,

    ctor:function () {

        this._super();

        this.init();

    },

    init:function () {

        var bRet = false;

        if (this._super()) {

		this.setTouchEnabled(true);//开启触屏

		this.screenSize = cc.Director.getInstance().getWinSize();//获取屏幕screenSize

		this.initBox2d();//初始化box2d

		this.addBall();//创建足球

		this.addFoot();//创建脚

		this.scheduleUpdate();//开始游戏循环

        bRet = true;

        }

        return bRet;

    },

	initBox2d:function () {

		//定义box2d常用变量

		var b2Vec2 = Box2D.Common.Math.b2Vec2

            , b2BodyDef = Box2D.Dynamics.b2BodyDef

            , b2Body = Box2D.Dynamics.b2Body

            , b2FixtureDef = Box2D.Dynamics.b2FixtureDef

            , b2World = Box2D.Dynamics.b2World

            , b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape

			, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;

		//创建物理世界

		this.world = new b2World(new b2Vec2(0, -30), true);

        this.world.SetContinuousPhysics(true);

		//创建地表

		var fixDef = new b2FixtureDef;

        fixDef.density = 1.0;

        fixDef.friction = 0.5;

        fixDef.restitution = 0.2;

        var bodyDef = new b2BodyDef;

        //create ground

        bodyDef.type = b2Body.b2_staticBody;

        fixDef.shape = new b2PolygonShape;

        fixDef.shape.SetAsBox(20, 2);

		//console.log('height',this.screenSize.height);

		//console.log('width',this.screenSize.width);

        // upper

        bodyDef.position.Set(10, this.screenSize.height / PTM_RATIO);

        this.world.CreateBody(bodyDef).CreateFixture(fixDef);

        // bottom

        bodyDef.position.Set(10, 0);

        this.world.CreateBody(bodyDef).CreateFixture(fixDef);

        fixDef.shape.SetAsBox(2, 14);

        // left

        bodyDef.position.Set(0, 0);

        this.world.CreateBody(bodyDef).CreateFixture(fixDef);

        // right

        bodyDef.position.Set(this.screenSize.width / PTM_RATIO, 0);

        this.world.CreateBody(bodyDef).CreateFixture(fixDef);

	},

	onTouchesMoved:function (touches, event) {

		console.log('fuck');

		var touchPoint = touches[0].getLocation();

        //this.setPosition(cc.p(touchPoint.x, this.getPosition().y));

		this.mouthX = touchPoint.x;

		this.mouthY = touchPoint.y;

		if (this.mouseJoint != null) {		

				var b2Vec2 = Box2D.Common.Math.b2Vec2;

				this.mouseJoint.SetTarget(new b2Vec2(this.mouthX/PTM_RATIO,this.mouthY/PTM_RATIO));

         }

    },

	addBall:function()

    {

		//this.ballSprite = cc.Sprite.create("res/Icon.png");//创建足球精灵

		this.ballSprite = cc.Sprite.create();//创建足球精灵

        this.ballSprite.setPosition(cc.p(160,200));//temp

        this.addChild(this.ballSprite);

		var b2BodyDef = Box2D.Dynamics.b2BodyDef

            , b2Body = Box2D.Dynamics.b2Body

            , b2FixtureDef = Box2D.Dynamics.b2FixtureDef

            , b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;

        var bodyDef = new b2BodyDef();

        bodyDef.type = b2Body.b2_dynamicBody;

        bodyDef.position.Set(160 / PTM_RATIO, 320 / PTM_RATIO);//temp

        bodyDef.userData = this.ballSprite;

        var body = this.world.CreateBody(bodyDef);

        var dynamicBox = new b2CircleShape();

        dynamicBox.SetRadius(1.0);

        var fixtureDef = new b2FixtureDef();

        fixtureDef.shape = dynamicBox;

        fixtureDef.density = 0.1;

        fixtureDef.friction = 0.9;

        body.CreateFixture(fixtureDef);

    },

	addFoot:function()

	{

		this.footSprite = cc.Sprite.create();//创建脚后跟精灵

        this.footSprite.setPosition(cc.p(160,600));//temp

        this.addChild(this.footSprite);

		var b2BodyDef = Box2D.Dynamics.b2BodyDef

            , b2Body = Box2D.Dynamics.b2Body

            , b2FixtureDef = Box2D.Dynamics.b2FixtureDef

            , b2CircleShape = Box2D.Collision.Shapes.b2CircleShape

			, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef;

		var bodyDef = new b2BodyDef();

        bodyDef.type = b2Body.b2_dynamicBody;

        bodyDef.position.Set(160 / PTM_RATIO, 320 / PTM_RATIO);//temp

        bodyDef.userData = this.footSprite;

        var body = this.world.CreateBody(bodyDef);

        var dynamicBox = new b2CircleShape();

        dynamicBox.SetRadius(0.4);

        var fixtureDef = new b2FixtureDef();

        fixtureDef.shape = dynamicBox;

        fixtureDef.density = 1.0;

        fixtureDef.friction = 0.8;

        body.CreateFixture(fixtureDef);

		this.mouseJointDef = new b2MouseJointDef();

		this.mouseJointDef.bodyA = this.world.GetGroundBody();

        this.mouseJointDef.bodyB = body;

		this.mouseJointDef.target.Set(160 / PTM_RATIO, 320 / PTM_RATIO);

		this.mouseJointDef.maxForce = 10000;

		this.mouseJoint = this.world.CreateJoint(this.mouseJointDef);

	},

	draw:function()

	{

		var pos = this.ballSprite.getPosition();

		cc.drawingUtil.setDrawColor4B(255,255,255,255);

		cc.drawingUtil.drawCircle(cc.p(pos.x, pos.y), 32, 0, 10, true);

		var pos1 = this.footSprite.getPosition();

		cc.drawingUtil.setDrawColor4B(255,255,255,255);

		cc.drawingUtil.drawCircle(cc.p(pos1.x, pos1.y), 12, 0, 10, true);

	},

	update:function(dt){

		//更新物理世界，更新精灵位置，角度

		var velocityIterations = 8;

        var positionIterations = 1;

        this.world.Step(dt, velocityIterations, positionIterations);

        for (var b = this.world.GetBodyList(); b; b = b.GetNext()) {

            if (b.GetUserData() != null) {

                var myActor = b.GetUserData();

                myActor.setPosition(cc.p(b.GetPosition().x * PTM_RATIO, b.GetPosition().y * PTM_RATIO));

                myActor.setRotation(-1 * cc.RADIANS_TO_DEGREES(b.GetAngle()));

            }

        }

    }

});

cocos2d-html5基础的更多相关文章

html5基础的常用的技巧
html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...
HTML5基础知识及相关笔记
HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构头部(head) 头部是网页的 ...
html5 基础入门
html5 基础入门前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...
HTML5 基础测试题
HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 d ...
HTML5基础——笔记
HTML5基础——笔记近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
html5基础知识点
1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网若干台计算机通过网线所连接而成的物理设备主要服务: 1.Telnet 2.Email 3.WWW(Word ...
html5基础知识
html5+css3 html5定义很多简便东西和宽松语法: 文档头: <!doctype html> 文档编码: <meta cha ...
HTML5 基础
1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...
HTML5基础学习
分享一下html5的一些基础,小白上路! 一.html5基本结构 <!DOCTYPE html> ↑声明文档类型为HTML5文件. 文档声明,在HTML文档必不可少.且必须放在文档第一行 ...
HTML5基础-新增标签+新增属性+布局案例
html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...

随机推荐

iPhone 适配之路
(1)1x时代 2007年,初代iPhone公布,屏幕的宽高是320*480像素.这个分辨率一直到iPhone3GS也保持不变. 那时编写iOS的App应用程序.仅仅支持绝对定位. 比方一个butto ...
easyUI datagrid组件能否有display:none的隐藏效果
这个项目用了JQ easyUI datagrid 组件,我今天做了一个页面,页面有个div层,div里放了一个easyUI datagrid,页面初始化时div隐藏(display:none),通过点 ...
Apache Qpid 高可用集群
一.RHCS RHCS是Red Hat Cluster Suite(红帽子集群套件)的缩写.RHCS是一个功能完备的集群应用解决方案,它从应用的前端访问到后端的数据存储都提供了一个行之有效的集群架构实 ...
visual studio 2013 update 3正式版出来了
微软的更新速度还是蛮快的吗.新版本号出来了,大家快下载体验一下吧,详细下载地址在http://www.visualstudio.com/zh-cn/downloads/download-visual- ...
设计模式学习笔记——Observer观察者模式
观察者模式里面有两个东西:观察者(Observer)和目标(Subject).当目标发生变化的时候,观察者随之起舞,也作出相应的变化.此为观察者模式. 这是怎么做到的?主要是目标里面存有一份观察者的名 ...
更改scroll样式
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 2px; height: 80%; background: #fff; } /*定 ...
传统maven项目创建
转自:https://blog.csdn.net/wangfengtong/article/details/77098238 需求表均同springmvc案例此处只是使用maven 注意,以下所有需 ...
React引入，运行
1.引入 <script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script> ...
hiho Mission Impossible 6（模拟未提交验证。。）
题意:模拟文本操作思路:模拟 #include<iostream> #include<stdio.h> #include<string.h> using name ...
solr安装-tomcat单机版
今天又装了一次solr,之前太忙没顾得上写安装文档,今天抽时间记录下来安装过程,供小白们参考. 1. 准备工作 1. 服务器:linux 2.web服务器apache-tomcat,我的路径:/usr ...

cocos2d-html5基础