cocos2d-html5基金会
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基金会的更多相关文章
- Cocos2d html5 笔记 1: overview
昨天接触到了cocos2d-html5的的东东了, 第一次看其源代码一头雾水,幸好samples目录下面有几个例子,可以从这个入手. MoonWarriors是一个射击类的游戏, 有点像以前玩的雷电, ...
- Kbengine
Kbengine 编辑 KBEngine是一款开源的游戏服务端引擎,使用简单的约定协议就能够使客户端与服务端进行交互, 使用KBEngine插件能够快速与(Unity3D, OGRE, Cocos2d ...
- 手把手教你如何使用Cocos2d Console 进行html5项目发布
手把手教你如何使用Cocos2d Console 进行html5项目发布 1.首先需要先安装Cocos2d Console运行需要的工具. 详情参见 这篇文章 http://www.cocoach ...
- 【Cocos2d-HTML5 开发之一】新建HTML5项目及简单阐述与cocos2d/x引擎关系
真的是有一段时间没写博了,这段时间呢,发生的事情真的挺多,另外自己呢也闲来做了一些自己的喜欢的东西,主要做的还是基于Mac系统的Cocoa框架的各种编辑器吧.(对了,今年初也出了自己第二本书<i ...
- html5 cocos2d js Access-Control-Allow-Origin
1.No 'Access-Control-Allow-Origin' header is present on the requested 近期在接html5的渠道,遇到了跨域的问题,使用 js 的 ...
- Cocos2D-html5 公布游戏js编译为jsc
搞了老半天.这么回事啊.工具都在tools中. jsb模式下是通过打包spidermonkey来执行JS代码的. JS文件都在assets目录中.我们都知道assets目录.打包后的结果,将apk包解 ...
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- HTML最新标准HTML5小结
写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...
- HTML5 学习笔记(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- 一场属于HTML5守望者的盛宴——记图灵参加HTML5峰会
2013年8月,北京正是一个火热的季节.一场火热的盛会,HTML5 峰会如约来袭.这是一场属于 HTML5 守望者的盛宴!HTML5作为一项新兴的技术,其未来是光明的,但是道路却是曲折的.需要标准的不 ...
随机推荐
- 第二期“晋IT”分享成长沙龙
本期主题:微信.打造品牌个体 报名方式:关注微信.回复"我要成长" "晋IT"沙龙费用:全程免费 "晋IT"沙龙文化:共通 共融 合作共赢 ...
- HDOJ 2665 Kth number
静态区间第K小....划分树裸题 Kth number Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- 源码安装apache及配置转发
一. 安装Apache a) 解压:tar -xvf httpd-*; b) ./configure --prefix=/usr/oracle/apache CC="gcc ...
- Word文件交换的电脑打开字体、排版变化的原因和解决方法!
方案: 有时候.我们好不easy用Word写好文档,做好排版发给别人,别人会告诉你格式怎么是乱的啊,标题.正文.页眉页脚什么的格式都变了. 想尽各种办法都没能得到解决,那么出现这样的情况的原因究竟是什 ...
- HttpClient文件上传下载
1 HTTP HTTP 协议可能是如今 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序须要直接通过 HTTP 协议来訪问网络资源. 尽管在 JDK 的 java.net ...
- CSAPP 六个重要的实验 lab5
CSAPP && lab5 实验指导书: http://download.csdn.net/detail/u011368821/7951657 实验材料: http://downlo ...
- Swift语法学习之 类和结构体
类和结构体 本页包括内容: 类和结构体对照 结构体和枚举是值类型 类是引用类型 类和结构体的选择 集合(collection)类型的赋值与复制行为 与其他编程语言所不同的是,Swift 并不要求你为自 ...
- myeclipse如何恢复已删除的文件和代码
这是一篇文章分享秘诀:myeclipse恢复意外删除的文件和代码 [ 恢复误删文件 ] 今天在写代码的时候,不小心把一个包给删除了,然后这个包下全部的文件都没了,相信非常多人都有类似的经历. 幸好my ...
- crm创建基于fetch自己的自定义报告
在解决方案资源管理器,右键点击"报表"目录.然后点击"增加了新的报告". 打开"报表向导". 在"欢迎来到报表向导"前, ...
- HDOJ 4424 Conquer a New Region
并检查集合 侧降序,每增加一个侧面应该推断,其中基本建设方..... Conquer a New Region Time Limit: 8000/4000 MS (Java/Others) Me ...