目录结构

main.js设置启动的场景
project.json配置写好的js文件
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cocos2d-html5</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-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;">
<canvas id="gameCanvas" width="720" height="1280"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js代码
cc.game.onStart = function(){
cc.view.adjustViewPort(true);
cc.view.setDesignResolutionSize(640, 1136, cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);
cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new MenuScene());
}, this);
};
cc.game.run();
函数:cc.view.setDesignResolutionSize 的参数

project.json文件
在jsList中配置写好的文件
{
"project_type": "javascript",
"debugMode": 0,
"showFPS": true,
"frameRate": 60,
"id": "gameCanvas",
"renderMode": 0,
"engineDir": "frameworks/cocos2d-html5",
"modules": [ "cocos2d","ccpool" ],
"jsList": [
"src/resource.js",
"src/sushi/PlayScene.js",
]
}
启动流程

导演
负责游戏的初始化与过程统筹,cc.director是个单例对象
1.设置帧频
cc.director.setAnimationInterval(1/60)
2.获取屏幕的大小
var size=cc.director.getWinSize()
size.width(size.height)
3.替换方式场景启动
cc.director.runScene(new Resolution())
4.栈方式场景启动
cc.director.pushScene(new Resolution())
cc.director.popScene();
5.动画场景
Var animScene=new cc.TransitionSlideInT(1, scene);
cc.director.pushScene(animScene)
节点

节点常用基本属性
位置属性
node.x=100
node.y=100
node.setPosition(100,100)
node.getPosition()
node.setPositionX(100)
node.getPositionY()
大小属性:适用:Layer,不适应:sprite
node.width
node.height
锚点与层级
node.setAnchorPoint(0.5,0.5)
node.getAnchorPoint()
node.setLocalZOrder(100)
node.getLocalZOrder()
旋转属性
node.setRotationX(angle)
node.getRotationX()
缩放属性
node.setScale(radio)
node.getScale()
倾斜与不透明
node.setSkewX(skew)
node.getSkewX()
node.setOpacity(opacity)
属性配置
node.attr({
x:100,
y:100,
scale:1.5
})
节点操作
node.addChild(child,localorder,tag)
node.removeChild(child)
node.removeFromParent()
调度器
node.scheduleUpdate()
node.update=function(dt){}
node.schedule(callback,interval,repeat,delay,key)
node.scheduleOnce(callback,interval,key)
调度器演示
var ScheduleScene = cc.Scene.extend({
ctor: function () {
this._super();
cc.spriteFrameCache.addSpriteFrames(res.personPlist);
this.schedule(this.addSprite, 1, 10, 1);
},
update: function () {
this.addSprite();
},
addSprite: function () {
console.log("测试");
var sprite1 = new cc.Sprite("#0001.png");
var size = cc.director.getWinSize();
sprite1.x = this.randomNum(300, 1000);
sprite1.y = this.randomNum(300, 1000);
this.addChild(sprite1);
},
randomNum: function (minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
})
节点坐标

Var toWorldPos=nodeParent.convertToWorldSpace(node.getPosition())
Var toNodePos=node_A.convetToNodeSpace(node_B)
node.getBoundingBox()
返回 cc.rect(x,y,width,height)
场景

场景的过渡方式演示
var TestPeroidScene1 = cc.Scene.extend({
ctor: function () {
this._super();
console.log("第一个场景:ctor");
var buttonLayer = new TestButtonLayer();
this.addChild(buttonLayer);
},
onEnter: function () {
this._super();
console.log("第一个场景:onEnter");
},
onExit: function () {
this._super();
console.log("第一个场景:onExit");
},
onEnterTransitionDidFinish: function () {
this._super();
console.log("第一个场景:onEnterTransitionDidFinish");
},
onExitTransitionDidStart: function () {
this._super();
console.log("第一个场景:onExitTransitionDidStart");
},
});
var TestButtonLayer = cc.Layer.extend({
ctor: function () {
this._super();
var menuitem1 = new cc.MenuItemFont("替换跳到第二场景", this.goSecond);
var menuitem2 = new cc.MenuItemFont("栈方式切换第二场景", this.goSecondStack);
var menuitem3 = new cc.MenuItemFont("替换跳过度切换第二场景", this.goSecondTransitionk);
var menu = new cc.Menu(menuitem1, menuitem2, menuitem3);
menu.alignItemsVerticallyWithPadding(20);
menu.x = 400;
menu.y = 500;
this.addChild(menu);
},
onEnter: function () {
this._super();
},
goSecond: function () {
cc.director.runScene(new TestPeroidScene2());
},
goSecondStack: function () {
cc.director.pushScene(new TestPeroidScene2());
},
goSecondTransitionk: function () {
var animateScene = new cc.TransitionSlideInT(1, new TestPeroidScene2());
cc.director.runScene(animateScene);
}
})
var TestPeroidScene2 = cc.Scene.extend({
ctor: function () {
this._super();
console.log("第二个场景:ctor");
var menuitem1 = new cc.MenuItemFont("替换返回第一场景", this.goFirst);
var menuitem2 = new cc.MenuItemFont("栈方式返回第一场景", this.goFirstStack);
var menuitem3 = new cc.MenuItemFont("替换过度返回第一场景", this.goFirstTransitionk);
var menu = new cc.Menu(menuitem1, menuitem2, menuitem3);
menu.alignItemsVerticallyWithPadding(20);
menu.x = 400;
menu.y = 500;
this.addChild(menu);
},
onEnter: function () {
this._super();
console.log("第二个场景:onEnter");
},
onExit: function () {
this._super();
console.log("第二个场景:onExit");
},
onEnterTransitionDidFinish: function () {
this._super();
console.log("第二个场景:onEnterTransitionDidFinish");
},
onExitTransitionDidStart: function () {
this._super();
console.log("第二个场景:onExitTransitionDidStart");
},
goFirst: function () {
cc.director.runScene(new TestPeroidScene1());
},
goFirstStack: function () {
cc.director.popScene();
},
goFirstTransitionk: function () {
var animateScene = new cc.TransitionSlideInT(1, new TestPeroidScene1());
cc.director.runScene(animateScene);
}
});

图层Layer
Layer 相当于 网页的”DIV”元素,是一个容器的概念
var layer=new cc.Layer();
var layer= cc.LayerColor(cc.color(0,0,0,138),width,height)
layer锚点设置
var TestLayerScene = cc.Scene.extend({
ctor: function () {
this._super();
var layer = new cc.LayerColor(cc.color(255, 0, 0.128), 300, 300);
layer.setAnchorPoint(0.5, 0.5);
layer.ignoreAnchor = false;
var size = cc.director.getWinSize();
layer.x = size.width/2;
layer.y = size.height/2;
this.addChild(layer);
}
});
精灵Sprite
精灵定义
方法一:
var sprite=new cc.Sprite(“res/1.png”);
方法二:
resouce.js中配置图片预导入
var res = {
bg: "/res/background.png",
};
var sprite=new cc.Sprite(res.bg);
方法三:
cc.spriteFrameCache.addSpriteFrames(res.personPlist);
var sprite3 = new cc.Sprite("#0001.png");
坐标:
sprite.x
sprite.y
缩放:
sprite. setScale(0.5)
旋转:
sprite. setRotationX(90)
自定义精灵
var Farm = cc.Sprite.extend({
ctor: function (level) {
switch (level) {
case 1:
this._super("res/house/house_1.png");
break;
case 2:
this._super("res/house/house_2.png");
break;
case 3:
this._super("res/house/house_3.png");
break;
default:
this._super("res/house/house_1.png");
break;
}
}, });
组合精灵定义

FarmScene .js
var FarmScene = cc.Scene.extend({
farm: null,
ctor: function () {
this._super();
var size = cc.director.getWinSize();
this.farm = new Farm();
this.farm.x = size.width / 2;
this.farm.y = size.height / 2;
this.addChild(this.farm);
this.addMenu();
},
addMenu: function () {
var menuItem1 = new cc.MenuItemFont("15", this.changBlood1, this);
var menuItem2 = new cc.MenuItemFont("50", this.changBlood2, this);
var menuItem3 = new cc.MenuItemFont("100", this.changBlood3, this);
var menu = new cc.Menu(menuItem1, menuItem2, menuItem3);
menu.x = 300;
menu.y = 300;
menu.alignItemsVerticallyWithPadding(20);
this.addChild(menu);
},
changBlood1: function () {
this.farm.changeBlood(15);
},
changBlood2: function () {
this.farm.changeBlood(50);
},
changBlood3: function () {
this.farm.changeBlood(100);
},
});
Farm.js
var Farm = cc.Layer.extend({
blood: null,
house: null,
ctor: function () {
this._super();
this.house = new House(1);
this.addChild(this.house);
this.blood = new cc.LayerColor(cc.color(0, 255, 0, 120), 100, 10);
this.blood.y = this.house.height / 2 + 20;
this.blood.x = -this.blood.width / 2;
this.addChild(this.blood);
},
changeBlood: function (width) {
this.blood.width = width;
}
});
House.js
var House = cc.Sprite.extend({
ctor: function (level) {
switch (level) {
case 1:
this._super(res.house1);
break;
case 2:
this._super("res/house/house_2.png");
break;
case 3:
this._super("res/house/house_3.png");
break;
default:
this._super("res/house/house_1.png");
break;
}
},
changeLevel: function (level) {
this.setTexture("res/house/house_"+level+".png");
}
})
动画精灵定义

person.js
var Person = cc.Sprite.extend({
_animation: null,
ctor: function () {
this._super();
cc.spriteFrameCache.addSpriteFrames(res.personPlist);
this._animation = new cc.Animation();
var name = '';
for (var i = 1; i < 8; i++) {
name = "000" + i + ".png";
this._animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame(name));
};
this._animation.setDelayPerUnit(1 / 20);
var action = cc.animate(this._animation).repeatForever();
this.runAction(action);
},
changeSpeed: function (speed) {
this.stopAllActions();
this._animation.setDelayPerUnit(speed);
var action = cc.animate(this._animation).repeatForever();
this.runAction(action);
}
});
PersonScene.js
var PersonScene = cc.Scene.extend({
person: null,
ctor: function () {
this._super();
var size = cc.director.getWinSize();
this.person = new Person();
this.person.x = size.width / 2;
this.person.y = size.height / 2;
this.addChild(this.person);
this.addMenu();
},
addMenu: function () {
var menuItem1 = new cc.MenuItemFont("1/10", this.changSpeed1, this);
var menuItem2 = new cc.MenuItemFont("1/20", this.changSpeed2, this);
var menuItem3 = new cc.MenuItemFont("1/60", this.changSpeed3, this);
var menu = new cc.Menu(menuItem1, menuItem2, menuItem3);
menu.x = 300;
menu.y = 300;
menu.alignItemsVerticallyWithPadding(20);
this.addChild(menu);
},
changSpeed1: function () {
this.person.changeSpeed(1 / 10);
},
changSpeed2: function () {
this.person.changeSpeed(1 / 20);
},
changSpeed3: function () {
this.person.changeSpeed(1 / 60);
},
});
标签Label
var sprite=new cc.LabelTTF(“hello”,”arial”,24)
菜单Menu
var menu=new cc.Menu(menuitem1,menuitem2)
menu.alignItemsVerticallyWithPadding(20);
menu.alignItemsHorizontallyWithPadding(20);
var menuItem1 = new cc.MenuItemFont(“test", this.test03);