本站文章均为 李华明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=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;i400 ){
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