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. html5基础的常用的技巧

    html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...

  2. HTML5基础知识及相关笔记

    HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...

  3. html5 基础入门

    html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...

  4. HTML5 基础测试题

          HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 d ...

  5. HTML5基础——笔记

    HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...

  6. html5基础知识点

    1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网 若干台计算机 通过 网线 所连接而成的物理设备 主要服务: 1.Telnet 2.Email 3.WWW(Word ...

  7. html5基础知识

    html5+css3 html5定义很多简便东西和宽松语法:     文档头:         <!doctype html>     文档编码:         <meta cha ...

  8. HTML5 基础

    1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...

  9. HTML5基础学习

    分享一下html5的一些基础,小白上路! 一.html5基本结构 <!DOCTYPE html> ↑声明文档类型为HTML5文件. 文档声明,在HTML文档必不可少.且必须放在文档第一行 ...

  10. HTML5基础-新增标签+新增属性+布局案例

    html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...

随机推荐

  1. Effective C++ 条款四 确定对象被使用前已被初始化

    1.对于某些array不保证其内容被初始化,而vector(来自STL)却有此保证. 2.永远在使用对象前初始化.对于无任何成员的内置类型,必须手工完成.      int x = 0;      c ...

  2. PHP生成excel(1)

    先到PHPExcel官网下载PHPExcel类 http://phpexcel.codeplex.com/ 把excel类包含进来,然后直接使用 <?php require "./PH ...

  3. router的安装和基本配置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 我对hibernate和mybatis框架的比較

    系统在选择操作数据库的框架上面,究竟是选择hibernate,还是mybatis. 首先说下两者的原理,假设你要关联几张表做查询,查出20条记录: 1.假设是mybatis SELECT *   FR ...

  5. Java小日历

    自己写的一个小小日历.执行程序是柯自己主动定位到当前年月日,当点击下个月button是会定位到下个月的这一天,就是说天数不会变.当在一个月中点击某一天时,以下的时间也会随时变化. import jav ...

  6. python dictionary的遍历

    d = {'x':1, 'y':3, 'z':2} for k in d:    print d[k] 直接遍历k in d的话,遍历的是dictionary的keys. 2 字典的键可以是任何不可变 ...

  7. C# delegate Action<T> lambda表达式

    转载以记录:http://blog.csdn.net/educast/article/details/7219854 在使用 Action<T> 委托时,不必显式定义一个封装只有一个参数的 ...

  8. Spring Boot 整合Filter

    两种方法 方法一: 正常创建好Filter类,配置完成 package clc.user.filter; import javax.servlet.Filter; import javax.servl ...

  9. 汉字与区位码互转(天天使用Delphi的String存储的是内码,Windows记事本存储的文件也是内码),几个常见汉字的各种编码,utf8与unicode的编码在线查询,附有读书笔记 good

    汉=BABA(内码)=-A0A0=2626(区位码)字=D7D6(内码)=-A0A0=5554(区位码) 各种编码查询表:http://bm.kdd.cc/ 汉(记住它,以后碰到内存里的数值,就会有敏 ...

  10. 网络转载:局域网安全:解决ARP攻击的方法和原理

    局域网安全:解决ARP攻击的方法和原理 IT世界网2006-01-26 10:17   [故障原因] 局域网内有人使用ARP欺骗的木马程序(比如:传奇盗号的软件,某些传奇外挂中也被恶意加载了此程序). ...