COCOS2D-HTML5 开发之三示例项目附源码及运行的GIF效果图
Posted 李华明Himi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了COCOS2D-HTML5 开发之三示例项目附源码及运行的GIF效果图相关的知识，希望对你有一定的参考价值。
本站文章均为 李华明Himi 原创,转载务必在明显处注明：（作者新浪微博： @李华明Himi )
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocos2d-html5/1528.html
☞ 点击订阅 ☜ 本博客最新动态!及时将最新博文通知您！
Cocos2dx html5开发，对于用过2d Or -x的童鞋来说很容易，Himi这里也没有必要去再跟同学们详细的教学一遍。
所以Himi简单做了一个项目，供给大家参考，源码下载地址及GIF截图在文章最后！
强调一点：运行 cocos2dx-html5项目，大家可以本地安装web服务器， apache 等，将项目发布在web服务器上即可。或者直接使用火狐浏览器进行调试，火狐浏览器是没有限制的。
示例项目运行截图：
源码下载地址（含运行后的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效果图的主要内容，如果未能解决你的问题，请参考以下文章
SSM 三大框架系列：Spring 5 + Spring MVC 5 + MyBatis 3.5 整合（附源码）
毕业设计-基于SSM框架大学教务管理平台项目开发实战教程(附源码)