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

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

//注意这里，指定配置文件

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 游戏的主类，包含主循环，按键，触屏操作

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()));  
        }  
    }

}
});