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中增加

<script src="box2d/box2d.js"></script>

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基金会的更多相关文章

  1. Cocos2d html5 笔记 1: overview

    昨天接触到了cocos2d-html5的的东东了, 第一次看其源代码一头雾水,幸好samples目录下面有几个例子,可以从这个入手. MoonWarriors是一个射击类的游戏, 有点像以前玩的雷电, ...

  2. Kbengine

    Kbengine 编辑 KBEngine是一款开源的游戏服务端引擎,使用简单的约定协议就能够使客户端与服务端进行交互, 使用KBEngine插件能够快速与(Unity3D, OGRE, Cocos2d ...

  3. 手把手教你如何使用Cocos2d Console 进行html5项目发布

    手把手教你如何使用Cocos2d Console 进行html5项目发布   1.首先需要先安装Cocos2d Console运行需要的工具. 详情参见 这篇文章 http://www.cocoach ...

  4. 【Cocos2d-HTML5 开发之一】新建HTML5项目及简单阐述与cocos2d/x引擎关系

    真的是有一段时间没写博了,这段时间呢,发生的事情真的挺多,另外自己呢也闲来做了一些自己的喜欢的东西,主要做的还是基于Mac系统的Cocoa框架的各种编辑器吧.(对了,今年初也出了自己第二本书<i ...

  5. html5 cocos2d js Access-Control-Allow-Origin

    1.No 'Access-Control-Allow-Origin' header is present on the requested 近期在接html5的渠道,遇到了跨域的问题,使用 js 的 ...

  6. Cocos2D-html5 公布游戏js编译为jsc

    搞了老半天.这么回事啊.工具都在tools中. jsb模式下是通过打包spidermonkey来执行JS代码的. JS文件都在assets目录中.我们都知道assets目录.打包后的结果,将apk包解 ...

  7. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  8. HTML最新标准HTML5小结

    写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...

  9. HTML5 学习笔记(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  10. 一场属于HTML5守望者的盛宴——记图灵参加HTML5峰会

    2013年8月,北京正是一个火热的季节.一场火热的盛会,HTML5 峰会如约来袭.这是一场属于 HTML5 守望者的盛宴!HTML5作为一项新兴的技术,其未来是光明的,但是道路却是曲折的.需要标准的不 ...

随机推荐

  1. OpenCV两张图片的合并

    转载请注明出处..! http://blog.csdn.net/zhonghuan1992 OpenCV两张图片的合并 原理: 两张图片合并,想想图片是用一个个像素点来存储.每一个像素点有他的值. 那 ...

  2. Java&Android反编工具打包

    Java&Android反编工具: 1.Eclipse反编插件:安装到Eclipse后,可以简要的查看jar包中的*.class; 2.DoAPK:反编*.apk为smali和一些资源文件,可 ...

  3. JDBC连接数据库和释放连接

    用久了hibernate现在对于JDBC是怎么实现数据库的连接和释放,所以特地总结下关于JDBC的知识,目的是用于提醒自己很多Java的基础知识需要健全. package com.ssh.action ...

  4. 使用gSoap规避和改动ONVIF标准类型结构的解析

    ONVIF/gSoap依赖关系及问题 ONVIF是一组服务规范,标准參考 gSoap是一套基于实现SOAP通信接口的工具链 即是,当我们须要訪问ONVIF的Web Service或实现对ONVIF部分 ...

  5. 菜鸟学习spring IOC有感

     一.spring IOC思想引入 事实上对于刚開始学习的人来说,在学习IOC的时候确实有点困难,主要是掌握其思想方面存在一丢丢的障碍,可是假设可以跨过这个障碍,则可以高速掌握当中的思想了.单从字 ...

  6. [TroubleShooting]&#39;trn\bak&#39; is incorrectly formed. SQL Server cannot process this media family.

     SQL Server online consultants came across an interesting scenario where one of our client was una ...

  7. Three.js 3D打印数据模型文件(.STL)载入中

    3DPrint是现在和未来10年度科技产品的主流之中.广泛的. 对于电子商务类3D打印网站.一个主要功能就是商品3D呈现的方式,那是,3D数据可视化技术. HTML5(WebGL)它可以用于构建3D查 ...

  8. Code::Blocks项目配置基础

    File 菜单 New :新建( Empty file/file . class . project . build target ) . Recent projects/files :近期打开的项目 ...

  9. Solr在结果返回函数值

    如果你有一个服务,你的用户能够搜索不同的公司.用户输入一个简单的keyword,能够返回匹配keyword的公司,可是有一天,用户要求返回的公司列表中能够显示公司跟用户的距离,这是该怎么做呢? 1.如 ...

  10. Handler消息源代码分析

    public static final Looper myLooper() { return (Looper)sThreadLocal.get(); } 首先到Handler运行过程的总结: 1. L ...