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 ...

随机推荐

[BLE]CC2640之ADC功能实现和供电电压的採集
一.开篇 Write programs that do one thing and do it well ~~~~~ 发现非常多人关于使用CC2640/CC2650的过程中比較难以应对的问题就是实现A ...
卸载 linux http
当我们想卸载httpd 的时候,使用rpm -qa httpd 的时候,我们发现有很多的依赖包.我们耐心的想一个一个的卸载的时候(使用rpm -e httpd-*),还会进入死循环.解决的办法是:使用 ...
Spring Boot与Micronaut性能比较
文章转载出处:微信公众号——锅外的大佬链接:https://mp.weixin.qq.com/s/MdBByJ0ju-rROKg7jsWygA 今天我们将比较两个在JVM上构建微服务的框架:Spri ...
[Pyhton]weakref 弱引用
文档中的解释: https://docs.python.org/2/library/weakref.html wiki 中的解释: 在计算机程序设计中,弱引用.与强引用相对.是指不能确保其引用的对象不 ...
ubuntu编译airplay
1.alsa/asoundlib.h: No such file or directory 缺少一个库: apt-get install libasound2-dev 2.fatal error: ...
Lily HBase Indexer同步HBase二级索引到Solr丢失数据的问题分析
一.问题描述二.分析步骤2.1 查看日志2.2 修改Solr的硬提交2.3 寻求StackOverFlow帮助2.4 修改了read-row="never"后,丢失部分字段2.5 ...
简说 call() 、apply() 、bind()
对于这三个方法,我想一部分人还是比较陌生的. 所以今天来个简单的介绍~ 我们可以将call()和apply()看作是某个对象的方法,通过调用方法的形式来间接调用函数.call()和apply()的第一 ...
Linux内核中工作队列的使用work_struct,delayed_work【转】
本文转载自:http://blog.csdn.net/zahuopuboss/article/details/43268983 初始化工作队列调度工作队列取消工作队列 #include <l ...
ZOJ3209 Treasure Map —— Danc Links 精确覆盖
题目链接:https://vjudge.net/problem/ZOJ-3209 Treasure Map Time Limit: 2 Seconds Memory Limit: 32768 ...
星星dom
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>星星&l ...

cocos2d-html5基础