欢迎访问 licqi IT技术
我们一直在努力

【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);="" dytime="Math.random();" if(dytime<0.2){="" }="" 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);="" 地名文字="" 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="" 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="" 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="" mapcontent="this.createContentWithBg(0,0,300,500,true,0,-80);" this.addchild(mapcontent,0,this.enumtag.tag_bgjumpcontent);="" mapcontent.setvisible(false);="" closex="" this.addchild(closex,0,this.enumtag.tag_bgclosex);="" closex.setvisible(false);="" tower="" proper="" towerproperpeople="cc.LabelTTF.create("人口:"," "arial-bold",="" 17);="" towerproperdef="cc.LabelTTF.create("城防:"," 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));="" towerproperpeoplec="cc.LabelTTF.create(""," towerproperdefc="cc.LabelTTF.create(""," towerproperattcountc="cc.LabelTTF.create(""," 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){" rescount="parseInt(Math.random()*5);" for(var="" i="0;i=contentPosi.x && point.x<=contentposi.x+255 &&="" 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);" _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="" hideorshowcontent:function(_isshow,selecttowerindex,point){="" if(_isshow){="" this.selectcontentisshow="true;" towerx="this.pointArray[this.selectTowerIndex][0];" towery="this.pointArray[this.selectTowerIndex][1];" mapcontent="this.getChildByTag(this.enumTag.tag_bgJumpContent);" mapcontent.setvisible(true);="" mx="0;" my="0;" if(point.y400 ){
				my=100;
			}else if(point.y300 ){
				my=240;
			}else if(point.y200){
				my=340;
			}else if(point.y100){
				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.x200 ){
				mx=-100;
			}else if(sWidth-point.x100 ){
				mx=-200;
			}else if(sWidth-point.x<=100){ mx="-300;" }else{="" mapcontent.setposition(cc.p(towerx,towery));="" }="" towerx+="mx;" towery+="my;" var="" closex="this.getChildByTag(this.enumTag.tag_bgCloseX);" closex.setvisible(true);="" closex.setposition(cc.p(towerx+220,towery-closex.getcontentsize().height*0.5));="" properpeople="this.getChildByTag(this.enumTag.tag_towerProperPeople);" properdef="this.getChildByTag(this.enumTag.tag_towerProperDef);" 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));="" properpeoplec="this.getChildByTag(this.enumTag.tag_towerProperPeopleC);" properdefc="this.getChildByTag(this.enumTag.tag_towerProperDefC);" 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="" allpetnameandhp="this.getCurrentContentAllPetNameAndHpBg(properAttCountC.getPositionX()-25,properAttCountC.getPositionY()-50);" this.addchild(allpetnameandhp,0,this.enumtag.tag_contentallpethpname);="" this.selectcontentisshow="false;" mapcontent="this.getChildByTag(this.enumTag.tag_bgJumpContent);" mapcontent.setvisible(false);="" closex.setvisible(false);="" closex.setposition(cc.p(-300,-300));="" properpeople.setvisible(false);="" properdef.setvisible(false);="" properattcount.setvisible(false);="" 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){="" petallhpname="cc.Node.create();" contenthurry="this.createFontWithBg("XXOOZX",23,_x+10,_y,false);" petallhpname.addchild(contenthurry);="" contenttowertime="this.createFontWithBg(this.towerTime[this.selectTowerIndex],23,_x+10,_y-32,false);" petallhpname.addchild(contenttowertime);="" 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++){="" name="this.petProperArray[i][0];" hp="this.petProperArray[i][1];" hpmax="this.petProperArray[i][2];" contenthpname="this.createFontWithBg(name,23,_x+10,_y-i*52-70,false);" petallhpname.addchild(contenthpname);="" 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);="" rect="" 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){="" this.towerproperarray[_aindex][index];="" createcontentwithbg:function(_positionx,_positiony,_contentwidth,_contentheight,isneedline,linex,liney){="" node="cc.Node.create();" node.setposition(cc.p(_positionx,_positiony));="" upleft="cc.Sprite.create(r_contentUpLeft);" upright="cc.Sprite.create(r_contentUpRight);" contentcenter="cc.Sprite.create(r_contentCenter);" downleft="cc.Sprite.create(r_contentDownLeft);" downright="cc.Sprite.create(r_contentDownRight);" centerwidth="contentCenter.getContentSize().width;" centerheight="contentCenter.getContentSize().height;" hengcount="(_contentWidth-centerWidth-centerWidth)/centerWidth;" shucount="(_contentHeight-centerHeight-centerHeight)/centerHeight;" j="0;" j<shucount;="" j++){="" contentcenter.setposition(cc.p(centerwidth*i,-centerheight*j));="" node.addchild(contentcenter);="" if(isneedline){="" up="" line="" back="" contentup="cc.Sprite.create(r_contentUp);" contentup.setposition(cc.p(centerwidth*i+linex,liney));="" node.addchild(contentup);="" contentup.setposition(cc.p(centerwidth*i,0));="" down="" 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));="" left="" contentleft="cc.Sprite.create(r_contentLeft);" contentleft.setposition(cc.p(0,-centerheight*(j+1)));="" node.addchild(contentleft);="" right="" 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);="" node;="" createfontwithbg:function(fontstring,fontwidth,_positionx,_positiony,isaddfontcollisiton,_dytime,_collisitionarrayindex)="" {="" font="cc.LabelTTF.create(fontString," "arial",="" fontwidth);="" font.setcolor(cc.c3b(0,0,0));="" font.setposition(cc.p(_positionx,_positiony));="" fontwidth="font.getContentSize().width;" fontbgleft="cc.Sprite.create(r_fontLeft);" fontbgleft.setposition(cc.p(_positionx-fontwidth*0.5,_positiony));="" tempfontmiddle="cc.Sprite.create(r_fontCenter);" fontmiddlewidth="tempFontMiddle.getContentSize().width;" countmiddle="fontWidth" fontmiddlewidth;="" middlepx="_positionX" -="" fontwidth*0.5;="" fadeouttime="0.1;" 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)));="" fontbgright="cc.Sprite.create(r_fontRight);" fontbgright.setposition(cc.p(middlepx,_positiony));="" node.addchild(fontbgleft);="" fontbgleft.setopacity(0);="" fontbgleft.runaction(cc.sequence.create(cc.delaytime.create(_dytime),cc.fadein.create(fadeouttime)));="" node.addchild(fontbgright);="" fontbgright.setopacity(0);="" fontbgright.runaction(cc.sequence.create(cc.delaytime.create(_dytime),cc.fadein.create(fadeouttime)));="" node.addchild(font);="" font.setopacity(0);="" font.runaction(cc.sequence.create(cc.delaytime.create(_dytime),cc.fadein.create(fadeouttime)));="" add="" tower="" collisiton="" x,y,w,h="" 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;" onenter:function="" ()="" cc.director.getinstance().gettouchdispatcher().addtargeteddelegate(this,="" 0,="" true);="" this._super();="" onexit:function="" cc.director.getinstance().gettouchdispatcher().removedelegate(this);="" });="" gamescene="cc.Scene.extend({" layer="new" gamelayer();="" layer.init();="" this.addchild(layer);="" });


赞(0) 打赏
未经允许不得转载:licqi IT技术 » 【COCOS2D-HTML5 开发之三】示例项目附源码及运行的GIF效果图
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏