本站文章均为李华明Himi原创,转载务必在明显处注明：（作者新浪微博：@李华明Himi)
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocos2d-html5/1528.html
? 点击订阅 ? 本博客最新动态!及时将最新博文通知您！
Cocos2dx html5开发，对于用过2d Or -x的童鞋来说非常easy，Himi这里也没有必要去再跟同学们具体的教学一遍。
所以Himi简单做了一个项目，供给大家參考，源代码下载地址及GIF截图在文章最后！
强调一点：执行 cocos2dx-html5项目，大家能够本地安装webserver， apache 等，将项目公布在webserver上就可以。或者直接使用火狐浏览器进行调试，火狐浏览器是没有限制的。
演示样例项目执行截图：
源代码下载地址（含执行后的GIF图）： http://vdisk.weibo.com/s/yZxRoLm4SHuv0
最后直接贴上源代码，方便懒得去下载的童鞋们直接CV～
var CircleSprite = cc.Sprite.extend({
_degree:0,
ctor:function () {
this._super();
},
draw:function () {
cc.drawingUtil.setDrawColor4B(0,0,0,255);
if (this._degree < 0)
this._degree = 360;
cc.drawingUtil.setLineWidth(2);
cc.drawingUtil.drawCircle(cc.PointZero(), 30, cc.DEGREES_TO_RADIANS(this._degree), 60, true);
},
myUpdate:function (dt) {
this._degree -= 6;
}
});
var HpRectSprite = cc.Sprite.extend({
_rectWidth:0,
_rectHeigth:0,
_x:0,
_y:0,
_hp:0,
_maxHp:0,
ctor:function () {
this._super();
},
draw:function () {
cc.drawingUtil.setDrawColor4B(0,0,0,255);
cc.drawingUtil.setLineWidth(2);
var vertices = [cc.p(this._x, this._y),
cc.p(this._x+this._rectWidth, this._y),
cc.p(this._x+this._rectWidth, this._y-this._rectHeigth),
cc.p(this._x, this._y-this._rectHeigth)];
cc.drawingUtil.drawPoly(vertices, 4, true);
cc.drawingUtil.setDrawColor4B(255,0,0,255);
cc.drawingUtil.setLineWidth(7);
var rate = this._hp/this._maxHp;
cc.drawingUtil.drawLine(cc.p(this._x+1, this._y-4), cc.p(this._x+this._rectWidth*rate,this._y-4));
},
});
var gameLayer = cc.Layer.extend({
//game state
gameState:0,//0:map , 1:home(母港) , 2.
//pointer count
pointer_count:10,
//pointers （left to right , up to down）
pointArray:[[],[],[],[],[],[],[],[],[],[]],
//pointer tower name collitision
pointStrCollisitionArray:[[],[],[],[],[],[],[],[],[],[]],
//pointer tower name
pointStrArray:[],
//tower property
towerProperArray:[[],[],[],[],[],[],[],[],[],[]],
//pet property
petProperArray:[],
//random count
randomCount:0,
//tower time
towerTime:[],
enumTag:{
tag_pointer:0,
tag_map:100,
tag_shop:101,
tag_home:102,
tag_bgJumpContent:103,
tag_bgCloseX:104,
tag_towerProperPeople:105,
tag_towerProperDef:106,
tag_towerProperAttCount:107,
tag_towerProperPeopleC:108,
tag_towerProperDefC:109,
tag_towerProperAttCountC:110,
tag_towerProperLine:111,
tag_contentAllPetHpName:112,
tag_contentIntoTower:113,
tag_contentAdd:130,
},
//select tower index
selectTowerIndex:-1,
//select tower isSHow
selectContentIsShow:false,
init:function () {
var selfPointer = this;
this._super();
this.schedule(this.logicUpdate, 1 / 60);
var size = cc.Director.getInstance().getWinSize();
this.pointArray=
[[size.width*0.1,size.height*0.6],[size.width*0.23,size.height*0.6],[size.width*0.33,size.height*0.25],
[size.width*0.46,size.height*0.64],[size.width*0.5,size.height*0.58],[size.width*0.53,size.height*0.45],
[size.width*0.7,size.height*0.6],[size.width*0.8,size.height*0.42],[size.width*0.897,size.height*0.5],
[size.width*0.915,size.height*0.175]];
this.pointStrArray=["翡冷翠","牛曰","里曰热内裤","狼蛋","篱笆","开锣","摸死客","向肛","洞精","稀泥"];
this.towerProperArray=[[1000000,1000000,1000],[5000000,5000000,5000],[20000000,20000000,20000],[5000000,5000000,5000],[5000000,5000000,5000],[20000000,20000000,20000],[1000000,1000000,1000],[100000000,100000000,100000],[1000000,1000000,1000],[20000000,20000000,20000]];
this.towerTime=["01:10:60","01:10:60","01:10:60","01:10:60","01:10:60","01:10:60","01:10:60","01:10:60","01:10:60","01:10:60"];
//name,hp,maxhp
this.petProperArray=[["皮卡丘",10,100],["小皮卡",30,100],["宠物猫咪",50,100],["清晨大怪兽",70,100],["哇哈哈怪兽",90,100],["pet name",100,100]];
//map bg
sprite = cc.Sprite.create(r_worldBG);
sprite.setPosition(cc.p(sprite.getContentSize().width*0.5, size.height- sprite.getContentSize().height*0.5));
sprite.setScale(0.5);
sprite.setRotation(180);
this.addChild(sprite,0,this.enumTag.tag_map);
var rotateToA = cc.RotateTo.create(0.1, 0);
var scaleToA = cc.ScaleTo.create(0.1, 1, 1);
sprite.runAction(cc.Sequence.create(rotateToA, scaleToA));
//circle
var circle = new CircleSprite();
circle.setPosition(cc.p(40, size.height - 60));
this.addChild(circle);
circle.schedule(circle.myUpdate, 1 / 60);
for (var i=0;i<this.pointer_count;i++){
var towerPoint = cc.Sprite.create(r_towerPoint);
towerPoint.setPosition(cc.p(this.pointArray[i][0],this.pointArray[i][1]+size.height));
this.addChild(towerPoint,0,this.enumTag.tag_pointer+i);
var dyTime = Math.random();
if(dyTime<0.2){
dyTime=0.2;
}
var actDown = cc.Sequence.create(
cc.DelayTime.create(dyTime),
cc.MoveTo.create(0.2,cc.p(this.pointArray[i][0],this.pointArray[i][1]+size.height)),
cc.MoveTo.create(0.2,cc.p(this.pointArray[i][0],this.pointArray[i][1])),
cc.MoveTo.create(0.15,cc.p(this.pointArray[i][0],this.pointArray[i][1]+10)),
cc.MoveTo.create(0.15,cc.p(this.pointArray[i][0],this.pointArray[i][1])));
towerPoint.runAction(actDown);
//地名文字
var fontNode =this.createFontWithBg(this.pointStrArray[i],23,this.pointArray[i][0],this.pointArray[i][1]+33,true,dyTime+0.5,i);
this.addChild(fontNode,0,this.pointer_count+i);
}
//shop
var shopBtn= cc.Sprite.create(r_shopBtn);
shopBtn.setPosition(cc.p(size.width - shopBtn.getContentSize().width*0.5, size.height - shopBtn.getContentSize().height*0.5));
this.addChild(shopBtn,0,this.enumTag.tag_shop)
//home
var homeBtn= cc.Sprite.create(r_homeBtn);
homeBtn.setPosition(cc.p(homeBtn.getContentSize().width, homeBtn.getContentSize().height));
this.addChild(homeBtn,0,this.enumTag.tag_home)
//map content
var mapContent=this.createContentWithBg(0,0,300,500,true,0,-80);
this.addChild(mapContent,0,this.enumTag.tag_bgJumpContent);
mapContent.setVisible(false);
//closeX
var closeX = cc.Sprite.create(r_closeX);
this.addChild(closeX,0,this.enumTag.tag_bgCloseX);
closeX.setVisible(false);
//tower proper
var towerProperPeople = cc.LabelTTF.create("人口:", "Arial-bold", 17);
var towerProperDef = cc.LabelTTF.create("城防:", "Arial-bold", 17);
var towerProperAttCount = cc.LabelTTF.create("机甲:", "Arial-bold",17);
this.addChild(towerProperPeople,0,this.enumTag.tag_towerProperPeople);
this.addChild(towerProperDef,0,this.enumTag.tag_towerProperDef);
this.addChild(towerProperAttCount,0,this.enumTag.tag_towerProperAttCount);
towerProperPeople.setVisible(false);
towerProperDef.setVisible(false);
towerProperAttCount.setVisible(false);
towerProperPeople.setColor(cc.c3b(0,0,0));
towerProperDef.setColor(cc.c3b(0,0,0));
towerProperAttCount.setColor(cc.c3b(0,0,0));
var towerProperPeopleC = cc.LabelTTF.create("", "Arial-bold", 17);
var towerProperDefC = cc.LabelTTF.create("", "Arial-bold", 17);
var towerProperAttCountC = cc.LabelTTF.create("", "Arial-bold", 17);
this.addChild(towerProperPeopleC,0,this.enumTag.tag_towerProperPeopleC);
this.addChild(towerProperDefC,0,this.enumTag.tag_towerProperDefC);
this.addChild(towerProperAttCountC,0,this.enumTag.tag_towerProperAttCountC);
towerProperPeopleC.setVisible(false);
towerProperDefC.setVisible(false);
towerProperAttCountC.setVisible(false);
towerProperPeopleC.setColor(cc.c3b(0,0,0));
towerProperDefC.setColor(cc.c3b(0,0,0));
towerProperAttCountC.setColor(cc.c3b(0,0,0));
},
logicUpdate:function (dt) {
if(this.gameState == 0){
this.randomCount++;
if(this.randomCount%180==0){
var resCount= parseInt(Math.random()*5);
for(var i = 0;i<resCount;i++){
var pointerIndex = parseInt(Math.random()*10);
var everyPointer =this.getChildByTag(pointerIndex);
everyPointer.stopAllActions();
var randomDown = cc.Sequence.create(
cc.MoveTo.create(0.2,cc.p(everyPointer.getPositionX(),everyPointer.getPositionY()+10)),
cc.MoveTo.create(0.2,cc.p(everyPointer.getPositionX(),everyPointer.getPositionY())),
cc.MoveTo.create(0.15,cc.p(everyPointer.getPositionX(),everyPointer.getPositionY()+5)),
cc.MoveTo.create(0.15,cc.p(everyPointer.getPositionX(),everyPointer.getPositionY())),
cc.MoveTo.create(0.15,cc.p(everyPointer.getPositionX(),everyPointer.getPositionY()+2)),
cc.MoveTo.create(0.15,cc.p(everyPointer.getPositionX(),everyPointer.getPositionY())));
everyPointer.runAction(randomDown);
}
this.randomCount=0;
}
}else{
}
},
onTouchBegan:function (touch, event) {
//point check
var point =touch.getLocation();
if(this.gameState == 0){
for (var i=0;i<this.pointer_count;i++){
var everyPointer =this.getChildByTag(this.enumTag.tag_pointer+i);
var _rect = cc.rect(this.pointStrCollisitionArray[i][0],this.pointStrCollisitionArray[i][1],
this.pointStrCollisitionArray[i][2], this.pointStrCollisitionArray[i][3]);
if(cc.rectContainsPoint(everyPointer.getBoundingBox(),point) || cc.rectContainsPoint(_rect,point) ){
everyPointer.setTexture(cc.TextureCache.getInstance().addImage(r_towerPointPress));
}
}
//shop & home check
var shopSpr =this.getChildByTag(this.enumTag.tag_shop);
if(cc.rectContainsPoint(shopSpr.getBoundingBox(),point)){
shopSpr.setTexture(cc.TextureCache.getInstance().addImage(r_shopBtnPress));
}
var homeSpr =this.getChildByTag(this.enumTag.tag_home);
if(cc.rectContainsPoint(homeSpr.getBoundingBox(),point)){
homeSpr.setTexture(cc.TextureCache.getInstance().addImage(r_homeBtnPress));
}
var closeXSpr =this.getChildByTag(this.enumTag.tag_bgCloseX);
if(cc.rectContainsPoint(closeXSpr.getBoundingBox(),point)){
closeXSpr.setTexture(cc.TextureCache.getInstance().addImage(r_closeXPress));
}
var towerProperContent =this.getChildByTag(this.enumTag.tag_contentAllPetHpName);
if(this.selectContentIsShow){
var towerAdd =towerProperContent.getChildByTag(this.enumTag.tag_contentAdd);
if(cc.rectContainsPoint(towerAdd.getBoundingBox(),point)){
towerAdd.setTexture(cc.TextureCache.getInstance().addImage(r_addPress));
}
for (var i=0;i<this.petProperArray.length;i++){
var into_tower =towerProperContent.getChildByTag(this.enumTag.tag_contentIntoTower+i);
if(cc.rectContainsPoint(into_tower.getBoundingBox(),point)){
into_tower.setTexture(cc.TextureCache.getInstance().addImage(r_intoTowerPress));
}
}
}
}else{
}
return true;
},
onTouchEnded:function (touch, event) {
var point =touch.getLocation();
if(this.gameState == 0){
//---------- back old img ----------
for (var i=0;i<this.pointer_count;i++){
var everyPointer =this.getChildByTag(this.enumTag.tag_pointer+i);
everyPointer.setTexture(cc.TextureCache.getInstance().addImage(r_towerPoint));
}
var shopSpr =this.getChildByTag(this.enumTag.tag_shop);
var homeSpr =this.getChildByTag(this.enumTag.tag_home);
var closeXSpr =this.getChildByTag(this.enumTag.tag_bgCloseX);
shopSpr.setTexture(cc.TextureCache.getInstance().addImage(r_shopBtn));
homeSpr.setTexture(cc.TextureCache.getInstance().addImage(r_homeBtn));
closeXSpr.setTexture(cc.TextureCache.getInstance().addImage(r_closeX));
var towerProperContent =this.getChildByTag(this.enumTag.tag_contentAllPetHpName);
if(this.selectContentIsShow){
var towerAdd =towerProperContent.getChildByTag(this.enumTag.tag_contentAdd);
towerAdd.setTexture(cc.TextureCache.getInstance().addImage(r_add));
for (var i=0;i<this.petProperArray.length;i++){
var into_tower =towerProperContent.getChildByTag(this.enumTag.tag_contentIntoTower+i);
into_tower.setTexture(cc.TextureCache.getInstance().addImage(r_intoTower));
}
}
//shop & home check & content X
if(cc.rectContainsPoint(shopSpr.getBoundingBox(),point)){
}
if(cc.rectContainsPoint(homeSpr.getBoundingBox(),point)){
var director = cc.Director.getInstance();
var skillScene =skillScene.createSkillLayer();
director.replaceScene(skillScene);
}
if(cc.rectContainsPoint(closeXSpr.getBoundingBox(),point)){
this.hideOrShowContent(false,-1,point);
return;
}
if(this.selectContentIsShow){
var towerAdd =towerProperContent.getChildByTag(this.enumTag.tag_contentAdd);
if(cc.rectContainsPoint(towerAdd.getBoundingBox(),point)){
alert("Himi-Tower Name");
}
var selectIntoIndex=-1;
for (var i=0;i<this.petProperArray.length;i++){
var into_tower =towerProperContent.getChildByTag(this.enumTag.tag_contentIntoTower+i);
if(cc.rectContainsPoint(into_tower.getBoundingBox(),point)){
selectIntoIndex =i;
}
}
if(selectIntoIndex!=-1){
alert("Himi:"+selectIntoIndex);
}
}
//---------- point & tower check ----------
if(!this.selectContentIsShow){
//is touch tower
this.selectTowerIndex=-1;
for (var i=0;i<this.pointer_count;i++){
var everyPointer =this.getChildByTag(this.enumTag.tag_pointer+i);
var _rect = cc.rect(this.pointStrCollisitionArray[i][0],this.pointStrCollisitionArray[i][1],
this.pointStrCollisitionArray[i][2], this.pointStrCollisitionArray[i][3]);
if(cc.rectContainsPoint(everyPointer.getBoundingBox(),point) || cc.rectContainsPoint(_rect,point) ){
everyPointer.setTexture(cc.TextureCache.getInstance().addImage(r_towerPointPress));
this.selectTowerIndex= this.enumTag.tag_pointer+i;
}
}
if(this.selectTowerIndex!=-1){
this.hideOrShowContent(true,this.selectTowerIndex,point);
}
}else{
var contentPosi = this.getChildByTag(this.enumTag.tag_bgJumpContent).getPosition();
if(!(point.x>=contentPosi.x && point.x<=contentPosi.x+255
&& point.y<=contentPosi.y+5 && point.y>=contentPosi.y-465)){
this.hideOrShowContent(false,this.selectTowerIndex,point);
//is touch tower
this.selectTowerIndex=-1;
for (var i=0;i<this.pointer_count;i++){
var everyPointer =this.getChildByTag(this.enumTag.tag_pointer+i);
var _rect = cc.rect(this.pointStrCollisitionArray[i][0],this.pointStrCollisitionArray[i][1],
this.pointStrCollisitionArray[i][2], this.pointStrCollisitionArray[i][3]);
if(cc.rectContainsPoint(everyPointer.getBoundingBox(),point) || cc.rectContainsPoint(_rect,point) ){
everyPointer.setTexture(cc.TextureCache.getInstance().addImage(r_towerPointPress));
this.selectTowerIndex= this.enumTag.tag_pointer+i;
}
}
if(this.selectTowerIndex!=-1){
this.hideOrShowContent(true,this.selectTowerIndex,point);
}
}
}
}else{
}
},
onTouchMoved:function (touch, event) {
},
onTouchCancelled:function (touch, event) {
},
hideOrShowContent:function(_isShow,selectTowerIndex,point){
if(_isShow){
this.selectContentIsShow=true;
var towerX = this.pointArray[this.selectTowerIndex][0];
var towerY = this.pointArray[this.selectTowerIndex][1];
var mapContent=this.getChildByTag(this.enumTag.tag_bgJumpContent);
mapContent.setVisible(true);
var mx=0;
var my=0;
if(point.y<=500 &&point.y>400 ){
my=100;
}else if(point.y<=400 &&point.y>300 ){
my=240;
}else if(point.y<=300 && point.y>200){
my=340;
}else if(point.y<=200 && point.y>100){
my=440;
}else if(point.y<=100){
my=500;
}else{
mapContent.setPosition(cc.p(towerX,towerY));
}
var sWidth =cc.Director.getInstance().getWinSize().width;
if(sWidth-point.x<=300 &&sWidth-point.x>200 ){
mx=-100;
}else if(sWidth-point.x<=200 &&sWidth-point.x>100 ){
mx=-200;
}else if(sWidth-point.x<=100){
mx=-300;
}else{
mapContent.setPosition(cc.p(towerX,towerY));
}
towerX+=mx;
towerY+=my;
mapContent.setPosition(cc.p(towerX,towerY));
var CloseX =this.getChildByTag(this.enumTag.tag_bgCloseX);
CloseX.setVisible(true);
CloseX.setPosition(cc.p(towerX+220,towerY-CloseX.getContentSize().height*0.5));
var properPeople = this.getChildByTag(this.enumTag.tag_towerProperPeople);
var properDef = this.getChildByTag(this.enumTag.tag_towerProperDef);
var properAttCount = this.getChildByTag(this.enumTag.tag_towerProperAttCount);
properPeople.setVisible(true);
properDef.setVisible(true);
properAttCount.setVisible(true);
properPeople.setPosition(cc.p(towerX+30,towerY-CloseX.getContentSize().height*0.5+20));
properDef.setPosition(cc.p(towerX+30,towerY-CloseX.getContentSize().height*0.5));
properAttCount.setPosition(cc.p(towerX+30,towerY-CloseX.getContentSize().height*0.5-20));
var properPeopleC = this.getChildByTag(this.enumTag.tag_towerProperPeopleC);
var properDefC = this.getChildByTag(this.enumTag.tag_towerProperDefC);
var properAttCountC = this.getChildByTag(this.enumTag.tag_towerProperAttCountC);
properPeopleC.setVisible(true);
properDefC.setVisible(true);
properAttCountC.setVisible(true);
properPeopleC.setString(this.getCurrentTowerProperbyIndex(this.selectTowerIndex,0));
properDefC.setString(this.getCurrentTowerProperbyIndex(this.selectTowerIndex,0));
properAttCountC.setString(this.getCurrentTowerProperbyIndex(this.selectTowerIndex,0));
properPeopleC.setPosition(cc.p(towerX+100,towerY-CloseX.getContentSize().height*0.5+20));
properDefC.setPosition(cc.p(towerX+100,towerY-CloseX.getContentSize().height*0.5));
properAttCountC.setPosition(cc.p(towerX+100,towerY-CloseX.getContentSize().height*0.5-20));
//into this.petProperArray.length
var allPetNameAndHp = this.getCurrentContentAllPetNameAndHpBg(properAttCountC.getPositionX()-25,properAttCountC.getPositionY()-50);
this.addChild(allPetNameAndHp,0,this.enumTag.tag_contentAllPetHpName);
}else{
this.selectContentIsShow=false;
var mapContent=this.getChildByTag(this.enumTag.tag_bgJumpContent);
mapContent.setVisible(false);
var closeX=this.getChildByTag(this.enumTag.tag_bgCloseX);
closeX.setVisible(false);
closeX.setPosition(cc.p(-300,-300));
var properPeople = this.getChildByTag(this.enumTag.tag_towerProperPeople);
var properDef = this.getChildByTag(this.enumTag.tag_towerProperDef);
var properAttCount = this.getChildByTag(this.enumTag.tag_towerProperAttCount);
properPeople.setVisible(false);
properDef.setVisible(false);
properAttCount.setVisible(false);
var properPeopleC = this.getChildByTag(this.enumTag.tag_towerProperPeopleC);
var properDefC = this.getChildByTag(this.enumTag.tag_towerProperDefC);
var properAttCountC = this.getChildByTag(this.enumTag.tag_towerProperAttCountC);
properPeopleC.setVisible(false);
properDefC.setVisible(false);
properAttCountC.setVisible(false);
if(this.getChildByTag(this.enumTag.tag_contentAllPetHpName)!=null){
this.removeChildByTag(this.enumTag.tag_contentAllPetHpName);
}
selectTowerIndex=-1;
}
},
getCurrentContentAllPetNameAndHpBg:function(_x,_y){
if(this.getChildByTag(this.enumTag.tag_contentAllPetHpName)!=null){
this.removeChildByTag(this.enumTag.tag_contentAllPetHpName);
}
var petAllHpName = cc.Node.create();
var contentHurry = this.createFontWithBg("XXOOZX",23,_x+10,_y,false);
petAllHpName.addChild(contentHurry);
var contentTowerTime = this.createFontWithBg(this.towerTime[this.selectTowerIndex],23,_x+10,_y-32,false);
petAllHpName.addChild(contentTowerTime);
var contentTowerAdd = cc.Sprite.create(r_add);
contentTowerAdd.setPosition(cc.p(_x+135,_y-13));
petAllHpName.addChild(contentTowerAdd,0,this.enumTag.tag_contentAdd);
for(var i = 0 ;i<this.petProperArray.length;i++){
var name =this.petProperArray[i][0];
var hp = this.petProperArray[i][1];
var hpMax =this.petProperArray[i][2];
var contentHpName = this.createFontWithBg(name,23,_x+10,_y-i*52-70,false);
petAllHpName.addChild(contentHpName);
var intoTower =cc.Sprite.create(r_intoTower);
intoTower.setPosition(cc.p(_x+135,_y-i*52-75));
petAllHpName.addChild(intoTower,0,this.enumTag.tag_contentIntoTower+i);
//hp rect
var hpRectSprite = new HpRectSprite();
hpRectSprite._rectWidth= 100;
hpRectSprite._rectHeigth=8;
hpRectSprite._x= _x-78;
hpRectSprite._y= _y-i*52-148;
hpRectSprite._hp= hp;
hpRectSprite._maxHp= hpMax;
hpRectSprite.setPosition(cc.p(40,60));
petAllHpName.addChild(hpRectSprite);
}
return petAllHpName;
},
getCurrentTowerProperbyIndex:function(_aIndex,index){
return this.towerProperArray[_aIndex][index];
},
createContentWithBg:function(_positionX,_positionY,_contentWidth,_contentHeight,isNeedLine,lineX,lineY){
var node = cc.Node.create();
node.setPosition(cc.p(_positionX,_positionY));
var upLeft = cc.Sprite.create(r_contentUpLeft);
var upRight = cc.Sprite.create(r_contentUpRight);
var contentCenter = cc.Sprite.create(r_contentCenter);
var downLeft = cc.Sprite.create(r_contentDownLeft);
var downRight = cc.Sprite.create(r_contentDownRight);
var centerWidth =contentCenter.getContentSize().width;
var centerHeight =contentCenter.getContentSize().height;
var hengCount = (_contentWidth-centerWidth-centerWidth)/centerWidth;
var shuCount = (_contentHeight-centerHeight-centerHeight)/centerHeight;
for(var i =0;i<hengCount;i++){
for(var j =0; j<shuCount; j++){
var contentCenter = cc.Sprite.create(r_contentCenter);
contentCenter.setPosition(cc.p(centerWidth*i,-centerHeight*j));
node.addChild(contentCenter);
}
if(isNeedLine){
//up line back
var contentUp = cc.Sprite.create(r_contentUp);
contentUp.setPosition(cc.p(centerWidth*i+lineX,lineY));
node.addChild(contentUp);
}
//up line
var contentUp = cc.Sprite.create(r_contentUp);
contentUp.setPosition(cc.p(centerWidth*i,0));
node.addChild(contentUp);
//down line
var contentDown= cc.Sprite.create(r_contentDown);
contentDown.setPosition(cc.p(centerWidth*i,-centerHeight*shuCount));
node.addChild(contentDown);
}
upRight.setPosition(cc.p((centerWidth-1)*hengCount,0));
for(var j =0; j<shuCount; j++){
//left line
var contentLeft= cc.Sprite.create(r_contentLeft);
contentLeft.setPosition(cc.p(0,-centerHeight*(j+1)));
node.addChild(contentLeft);
//right line
var contentRight= cc.Sprite.create(r_contentRight);
contentRight.setPosition(cc.p((centerWidth-1)*hengCount,-centerHeight*(j+1)));
node.addChild(contentRight);
}
downLeft.setPosition(cc.p(0,-centerHeight*shuCount));
downRight.setPosition(cc.p((centerWidth-1)*hengCount,-centerHeight*shuCount));
node.addChild(upLeft);
node.addChild(upRight);
node.addChild(downLeft);
node.addChild(downRight);
return node;
},
createFontWithBg:function(fontString,fontWidth,_positionX,_positionY,isAddFontCollisiton,_dyTime,_collisitionArrayIndex) {
var node = cc.Node.create();
var font = cc.LabelTTF.create(fontString, "Arial", fontWidth);
font.setColor(cc.c3b(0,0,0));
font.setPosition(cc.p(_positionX,_positionY));
var fontWidth =font.getContentSize().width;
var fontBgLeft =cc.Sprite.create(r_fontLeft);
fontBgLeft.setPosition(cc.p(_positionX-fontWidth*0.5,_positionY));
var tempFontMiddle =cc.Sprite.create(r_fontCenter);
var fontMiddleWidth=tempFontMiddle.getContentSize().width;
var countMiddle =fontWidth / fontMiddleWidth;
var middlePX = _positionX - fontWidth*0.5;
var fadeOutTime =0.1;
for(var i =0;i<countMiddle;i++){
var fontBgMiddle =cc.Sprite.create(r_fontCenter);
fontBgMiddle.setPosition(cc.p(middlePX,_positionY));
middlePX+=fontMiddleWidth;
node.addChild(fontBgMiddle);
if(isAddFontCollisiton){
fontBgMiddle.setOpacity(0);
fontBgMiddle.runAction(cc.Sequence.create(cc.DelayTime.create(_dyTime),cc.FadeIn.create(fadeOutTime)));
}
}
var fontBgRight =cc.Sprite.create(r_fontRight);
fontBgRight.setPosition(cc.p(middlePX,_positionY));
node.addChild(fontBgLeft);
if(isAddFontCollisiton){
fontBgLeft.setOpacity(0);
fontBgLeft.runAction(cc.Sequence.create(cc.DelayTime.create(_dyTime),cc.FadeIn.create(fadeOutTime)));
}
node.addChild(fontBgRight);
if(isAddFontCollisiton){
fontBgRight.setOpacity(0);
fontBgRight.runAction(cc.Sequence.create(cc.DelayTime.create(_dyTime),cc.FadeIn.create(fadeOutTime)));
}
node.addChild(font);
if(isAddFontCollisiton){
font.setOpacity(0);
font.runAction(cc.Sequence.create(cc.DelayTime.create(_dyTime),cc.FadeIn.create(fadeOutTime)));
}
//add tower name collisiton x,y,w,h
if(isAddFontCollisiton){
this.pointStrCollisitionArray[_collisitionArrayIndex][0]=_positionX-fontWidth*0.5-3;
this.pointStrCollisitionArray[_collisitionArrayIndex][1]=_positionY-14;
this.pointStrCollisitionArray[_collisitionArrayIndex][2]=font.getContentSize().width+10;
this.pointStrCollisitionArray[_collisitionArrayIndex][3]=font.getContentSize().height;
}
return node;
},
onEnter:function () {
cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this, 0, true);
this._super();
},
onExit:function () {
cc.Director.getInstance().getTouchDispatcher().removeDelegate(this);
this._super();
},
});
var gameScene = cc.Scene.extend({
onEnter:function () {
this._super();
layer = new gameLayer();
layer.init();
this.addChild(layer);
}
});
【COCOS2D-HTML5 开发之三】演示样例项目附源代码及执行的GIF效果图
时间： 2024-11-05 10:08:34