本站文章均为原创,转载务必在明显处注明：（作者新浪微博：) 
转载自 原文链接:  

 本博客最新动态!及时将最新博文通知您！

　　　　　　　　　　　　　　　　　

Cocos2dx html5开发，对于用过2d Or -x的童鞋来说非常easy，Himi这里也没有必要去再跟同学们具体的教学一遍。

所以Himi简单做了一个项目，供给大家參考，源代码下载地址及GIF截图在文章最后！

          强调一点：执行 cocos2dx-html5项目，大家能够本地安装webserver， apache 等，将项目公布在webserver上就可以。或者直接使用火狐浏览器进行调试，火狐浏览器是没有限制的。

 

演示样例项目执行截图：

 

源代码下载地址（含执行后的GIF图）：  

最后直接贴上源代码，方便懒得去下载的童鞋们直接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;i
      
       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