基本信息
源码名称:html5圈泡泡游戏源码.zip
源码大小:0.29M
文件格式:.zip
开发语言:js
更新时间:2019-10-05
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
cnGame.init("canvas", { width:600, height: 500,bgColor:"rgba(0,0,0,1)"});//初始化框架 var cg=cnGame,input=cg.input,ctx=cg.context,Line=cg.shape.Line,Text=cg.shape.Text,Sprite=cg.Sprite,Polygon=cg.shape.Polygon,list=cg.spriteList; var center=[cg.width/2,cg.height/2];//canvas中点 /* 图片资源字典 */ var srcObj={ tenBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_tenBall.png",//十分球 twentyBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_twentyBall.png",//二十分球 thirdtyBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_thirdtyBall.png",//三十分球 sTenBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_sTenBall.png",//减十分球 sTwentyBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_sTwentyBall.png",//减二十分球 sThirdtyBall:"http://images.cnblogs.com/cnblogs_com/Cson/290336/o_sThirdtyBall.png"//减三十分球 } /* 小球种类 */ var ballKinds=[["tenBall",10],["twentyBall",20],["thirdtyBall",30],["sTenBall",-10],["sTwentyBall",-20],["sThirdtyBall",-30]]; /* 小球对象 */ var Ball=function(opt){ this.parent.call(this,opt); this.oriPos=[this.x+this.width/2,this.y+this.height/2]; this.oriSize=opt.size; this.z=opt.z||0; this.score=opt.score||0; this.oriSpeedZ=4+Math.random()*4; this.scale=1; this.resetXY(); } cg.core.inherit(Ball,Sprite); cg.core.extendProto(Ball,{ disappear:function(){//小球被选中消失 list.remove(this); }, resetXY:function(){//根据Z改变x,y的位置和尺寸 var oriX=this.oriPos[0]; var oriY=this.oriPos[1]; var oriSize=this.oriSize; this.scale=((center[0]+this.z)/center[0]);//相对于现时的scale this.x=(oriX-center[0])*this.scale+center[0]; this.y=(oriY-center[1])*this.scale+center[1]; this.height=this.width=this.oriSize*this.scale; this.speedZ=this.oriSpeedZ*this.scale; if(this.z>1000){ this.disappear(); } }, update:function(){ this.parent.prototype.update.call(this); this.resetXY(); } }); /* 小球对象管理器 */ var ballsManager={ createDuration:200, ballSize:30, lastCreateTime:Date.now(), /* 随机生成小球 */ createRandomBalls:function(num){ var now=Date.now(); if(now-this.lastCreateTime>this.createDuration){ for(var i=0;i<num;i++){ var x=Math.random()* cg.width; var y=Math.random()* cg.height; var randomKind=ballKinds[Math.floor(Math.random()*6)];//随机获得的小球种类和分值 var newBall=new Ball({x:x,y:y,size:this.ballSize,z:-280,score:randomKind[1]}); newBall.setCurrentImage(srcObj[randomKind[0]]);//设置图片 list.add(newBall); } this.lastCreateTime=now; } }, /* 改变小球位置 */ changeBallsPos:function(){ var ballsArr=list.get(function(elem){ return elem instanceof Ball; }); for(var i=0,len=ballsArr.length;i<len;i++){ var ball=ballsArr[i]; ball.z+=ball.speedZ; } } } /* 游戏对象 */ var gameObj=(function(){ var prePos; //鼠标上次的位置 var currentPos;//鼠标该次的位置 var circle;//圆对象 var hasClosed; var closedLineSegsArr=[];//闭合轨迹组成线段的数组 var polygon;//多边形选中区域 var startTime;//倒计时开始时间 var isPosSame=function(){//判断是否和上一次的位置一样 return currentPos[0]==prePos[0]&¤tPos[1]==prePos[1]; }; /* 倒计时 */ var countDown=function(countTime){//秒数形式传入 var now=Date.now(); startTime=startTime||now; return Math.ceil(countTime-(now-startTime)/1000);//秒数形式返回 }; /* 判断轨迹是否包含了圆 */ var isCover=function(lines,ball){ var ballCenter=[]; ballCenter[0]=ball.x+ball.width/2; ballCenter[1]=ball.y+ball.height/2; debugger; var count=0;//相交的边的数量 var lLine=new Line({start:[ballCenter[0],ballCenter[1]],end:[0,ballCenter[1]],lineWidth:5});//左射线 for(var i=0,len=lines.length;i<len;i++){ if(lLine.isCross(lines[i])){ count++; } } if(count%2==0){//不包含 return false; } return true;//包含 } /* 判断线段是否相连接 */ var isJoin=function(lineSeg1,lineSeg2){ return ((lineSeg1.end[0]==lineSeg2.start[0])&&(lineSeg1.end[1]==lineSeg2.start[1])); } /* 重置线段 */ var resetLineSegs=function(lines,i,j,point){ lines[i].end[0]=point[0]; lines[i].end[1]=point[1]; lines[i+1].start[0]=point[0]; lines[i+1].start[1]=point[1]; lines[j].start[0]=point[0]; lines[j].start[1]=point[1]; lines[j-1].end[0]=point[0]; lines[j-1].end[1]=point[1]; for(var m=i+1;m<j;m++){ closedLineSegsArr.push(lines[m]); } } /* 返回轨迹是否闭合 */ var isClose=function(lines){ var hasClose=false; for(var i=0;i<lines.length;i++){ var l1=lines[i]; for(var j=i+2;j<lines.length;j++){ var l2=lines[j]; if(l2){ var point=l1.isCross(l2);//交点坐标 if(point){//非连接的相交 resetLineSegs(lines,i,j,point); hasClosed=true; return true; } } } } return false; }; return { /* 初始化 */ initialize:function(){ var self=this; this.score=0; this.countDownTime=60; this.scoreText=new Text({text:"Score:",x:30,y:40,style:"rgb(200,195,195)"}); this.scoreText.setOptions({font:"30px Calibri"}); list.add(this.scoreText); this.timeText=new Text({text:"60",x:500,y:50,style:"#fff"}); this.timeText.setOptions({font:"60px Calibri"}); list.add(this.timeText); currentPos=prePos=[input.mouse.x,input.mouse.y]; input.onMouseUp("left",function(){//松开鼠标左键时,如果是线段,则删除 var lines=list.get(function(elem){//获取线段集合 return elem instanceof Line; }); if(isClose(lines)){//轨迹闭合了 var ballsArr=list.get(function(elem){ return elem instanceof Ball; }); for(var i=0;i<ballsArr.length;i++){ var ball=ballsArr[i]; var ballCenter=[ball.x+ball.width/2,ball.y+ball.height/2]; if(polygon&&polygon.isInside(ballCenter)&&ball.z>-220){ ball.disappear();//小球消失 self.addScore(ball.score); } }; } list.remove(function(elem){//线段消失 return elem instanceof Line; }); list.remove(polygon);//多边形消失 hasClosed=false; closedLineSegsArr=[]; }); }, /* 得分 */ addScore:function(s){ this.score+=s; }, /* 更新 */ update:function(){ this.scoreText.setOptions({text:"Score:"+this.score});//设置分数内容 var timeLeft=countDown(this.countDownTime);//倒计时 this.timeText.setOptions({text:timeLeft}); if(timeLeft<=0){//倒计时结束,结束游戏 this.end(); return; } currentPos=[input.mouse.x,input.mouse.y]; if(!isPosSame()&&input.mouse.left_pressed){//如果和上次位置不一样并且按着鼠标左键,则生成线段 var newLineSeg=new Line({start:prePos,end:currentPos,lineWidth:5}); list.add(newLineSeg); var lines=list.get(function(elem){//获取线段集合 return elem instanceof Line; }); if(!hasClosed){ if(isClose(lines)){ var pointsArr=[]; for(var i=0,len=closedLineSegsArr.length;i<len;i++){ pointsArr.push([closedLineSegsArr[i].start[0],closedLineSegsArr[i].start[1]]); } polygon=new Polygon({pointsArr:pointsArr,style:"rgba(241,46,8,0.5)"}); list.add(polygon); } } } ballsManager.createRandomBalls(Math.floor((Math.random()*4)));//随机生成小球 ballsManager.changeBallsPos(); prePos=currentPos; }, /* 游戏结束 */ end:function(){ cg.loop.end(); alert("Game over!Your score is:"+this.score); } }; })(); var beginText=new Text({text:"press Enter to start",x:100,y:200,style:"rgb(200,195,195)"}); beginText.setOptions({font:"50px Calibri"}); beginText.draw(); input.preventDefault("enter"); input.onKeyDown("enter",function(){ cnGame.loader.start(gameObj, { srcArray: srcObj }); });