cocos2d-html5基础

来源：互联网发布：黄山学院网络教学平台编辑：程序博客网时间：2024/05/17 08:48

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();//获取屏幕screenSizethis.initBox2d();//初始化box2dthis.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()));            }        }    }});

0 0