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

随机推荐

pcapReader——源代码分析
一.简单介绍 pcapReader是ndpi开源中的一个example. 大家能够从<ndpi directory>/example/pcapReader.c中找到它的源码.通过pcapl ...
java之static变量与全局、局部变量的区别
static变量与全局.局部变量的区别全局变量(外部变量)的说明之前再冠以static 就构成了静态的全局变量.全局变量本身就是静态存储方式,静态全局变量当然也是静态存储方式.这两者在存储方式上并无 ...
Android Auto Scroll ViewPager (Smooth)
项目信息项目地址 https://github.com/benniaobuguai/android-auto-scroll-viewpager 特性支持自动平滑切换海报.相册等,无限次循环轮播手 ...
令人赞叹的 MySQL
原文链接译文链接感谢艾凌风小伙伴校稿令人赞叹的 MySQL 一个很棒的 MySQL 软件.库以及资源列表. 这个列表接受并鼓舞 pull requests,请看 CONTRIBUTING 文 ...
UUID GUID
http://baike.baidu.com/link?url=xkck9gR5bzOx0oBKP1qNJwGGq3IO56V4i8cg9zTSpSDMVBMA0F7jr0AdkQTGyk7F0FGj ...
v-model在其它元素以及类型上的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c
cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c
update外联表，用另一个表数据更新本表数据
update s set s.classbid = lc.itemidfrom dbo.Lv_servers as s INNER JOIN dbo.Lv_LineChannel as lc O ...
java和jar命令
IDEA打可运行jar http://bglmmz.iteye.com/blog/2058785 -jar参数运行应用时classpath的设置方法你是否在使用java -jar参数运行打包好的ja ...
scrollView 代理方法的实现顺序的些许区别

cocos2d-html5基础