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

随机推荐

LeetCode——Reverse Integer
Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 Have you ...
走入asp.net mvc不归路:[1]项目文件结构
先来了解一下一个asp.net mvc项目的文件结构. 1 项目文件结构一览 2 mvc,顾名思义,一个项目中最重要的就是这三个东西:M(Model,模型),V(View,视图),C(Controll ...
APACHE局域网配置域名访问
/** * * @email 514320008@qq.com * @author jshaibozhong * */ 1,打开APACHE的目录 \Apache2\conf\extra\httpd ...
[leetcode] database解题记录
175 Combine Two Tables 题目:左连接Person表和Address表. select FirstName,LastName,City,State from Person p le ...
ssh免密码访问
ssh-copy-id命令它可以把本地主机的公钥复制到远程主机的authorized_keys文件上,ssh-copy-id命令也会给远程主机的用户主目录(home)和~/.ssh, 和~/.ssh ...
A Practical Introduction to Blockchain with Python
A Practical Introduction to Blockchain with Python // Adil Moujahid // Data Analytics and more http: ...
C语言中的声明与定义的差别
1.对于以下的声明语句 int a; 假设其位置出如今全部的函数体之外,那么它就被称为外部对象a的定义.这个语句说明了a是一个外部整型变量,同一时候为a分配了存储空间.由于外部对象a并没 ...
HDU 6114 Chess 【组合数】（2017"百度之星"程序设计大赛 - 初赛（B））
Chess Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
[翻译]Unity中的AssetBundle详解（三）
构建AssetBundles 在AssetBundle工作流程的文档中,我们有一个示例代码,它将三个参数传递给BuildPipeline.BuildAssetBundles函数.让我们更深入地了解我们 ...
对于iOS 7 隐藏特性和解决之道
当 iOS7 刚发布的时候,全世界的苹果开发人员都立马尝试着去编译他们的app,接着再花上数月的时间来修复任何出现的故障,甚至重做app.这样的结果,使得人们根本无暇去探究 iOS7 所带来的新东西. ...

cocos2d-html5基础