【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);
    }
});