查看: 331|回复: 1

[HTML5游戏教程] HTML5-CSON圈泡泡游戏教程

[复制链接]
发表于 2016-12-14 14:13:34 | 显示全部楼层 |阅读模式
  功能说明:

  在一分钟内,使用鼠标按着左键,在画布上圈泡泡,其中泡泡的分值分别为10(白)、20(浅蓝)、30(黄)、-10(红)、-20(绿)、-30(深蓝)分,可以一次圈多个泡泡,倒计时结束即计算总分值,该游戏基于cnGameJS。

  效果预览:
bed7191b440d6b1d6b2fcfa1dbb84d0a.jpg

37b7f1e9a814e75313a972cb25b0cbd8.jpg

  实现分析:

  首先每个小球定义一个ball类,由于小球需要使用图片,并且有一定的尺寸和运动,所以使该类继承cnGameJS的sprite类。ball类除了拥有x,y坐标外,还拥有一个z坐标,该坐标用于使小球具有离玩家远近的视觉差。
  1. /*    小球对象    */
  2. var Ball=function(opt){
  3.     this.parent.call(this,opt);
  4.     this.oriPos=[this.x+this.width/2,this.y+this.height/2];
  5.     this.oriSize=opt.size;
  6.     this.z=opt.z||0;
  7.     this.score=opt.score||0;
  8.     this.oriSpeedZ=4+Math.random()*4;
  9.     this.scale=1;
  10.     this.resetXY();
  11. }
  12. cg.core.inherit(Ball,Sprite);
复制代码
  之后我们为小球添加resetXY方法,该方法根据小球的z坐标,改变小球的位置以及尺寸,使小球有远近的视觉差。首先根据z计算缩放比scale,然后根据scale调整x,y和width,height,另外我们使小球z大于1000时,小球消失,这样就避免了小球过大而占据整个屏幕。
  1. cg.core.extendProto(Ball,{
  2.     disappear:function(){//小球被选中消失
  3.         list.remove(this);
  4.     },
  5.     resetXY:function(){//根据Z改变x,y的位置和尺寸
  6.         var oriX=this.oriPos[0];
  7.         var oriY=this.oriPos[1];
  8.         var oriSize=this.oriSize;
  9.         this.scale=((center[0]+this.z)/center[0]);//相对于现时的scale        
  10.         this.x=(oriX-center[0])*this.scale+center[0];
  11.         this.y=(oriY-center[1])*this.scale+center[1];
  12.         this.height=this.width=this.oriSize*this.scale;
  13.         this.speedZ=this.oriSpeedZ*this.scale;
  14.         if(this.z>1000){
  15.             this.disappear();
  16.         }
  17.     },
  18.     update:function(){
  19.         this.parent.prototype.update.call(this);
  20.         this.resetXY();
  21.     }
  22. });
复制代码
  之后,为了管理多个小球,可以增加一个小球管理器。管理器负责动态改变小球到玩家的距离以及使小球在画布随机的位置出现:
  1. /*    小球对象管理器    */
  2. var ballsManager={
  3.     createDuration:200,
  4.     ballSize:30,
  5.     lastCreateTime:Date.now(),
  6.     /*    随机生成小球    */
  7.     createRandomBalls:function(num){
  8.         var now=Date.now();
  9.         if(now-this.lastCreateTime>this.createDuration){
  10.             for(var i=0;i<num;i++){
  11.                 var x=Math.random()* cg.width;
  12.                 var y=Math.random()* cg.height;
  13.                 var randomKind=ballKinds[Math.floor(Math.random()*6)];//随机获得的小球种类和分值   
  14.                 var newBall=new Ball({x:x,y:y,size:this.ballSize,z:-280,score:randomKind[1]});
  15.                 newBall.setCurrentImage(srcObj[randomKind[0]]);//设置图片
  16.                 list.add(newBall);
  17.             }
  18.             this.lastCreateTime=now;
  19.         }
  20.     },
  21.     /*    改变小球位置    */
  22.     changeBallsPos:function(){
  23.         var ballsArr=list.get(function(elem){
  24.             return elem instanceof Ball;                              
  25.         });
  26.         for(var i=0,len=ballsArr.length;i<len;i++){
  27.             var ball=ballsArr[i];
  28.             ball.z+=ball.speedZ;   
  29.         }
  30.     }
  31. }
复制代码
  关于小球管理就介绍到这里,之后主要介绍怎样实现鼠标的圈选。

  如果我们在每次帧更新时,根据鼠标现时的位置以及上一次的位置绘制一条线段,那么鼠标的移动轨迹就可以被一条曲线表示出来,该曲线由每次绘制的线段组成,因此我们也可以说该曲线是一条由多条线段首尾相连组成的曲线。因此我们可以首先实现一个线段类:
  1. /*    直线    */
  2.         var line=function(options){
  3.             if (!(this instanceof arguments.callee)) {
  4.                 return new arguments.callee(options);
  5.             }
  6.             this.init(options);
  7.         }
  8.         line.prototype = {
  9.             /**
  10.             *初始化
  11.             **/
  12.             init: function(options) {   
  13.                 this.start=[0,0];
  14.                 this.end=[0,0];   
  15.                 this.style="red";
  16.                 this.lineWidth=1;
  17.                 this.context=cg.context;
  18.                 options = options || {};
  19.                 cg.core.extend(this,options);
  20.             },
复制代码
  该类保存线段的起始点坐标和结束点坐标,以及宽度,样式等。

  之后需要考虑的就是怎样实现圈选了。当我们用鼠标画出一个圈时,每条小线段就组成了一个闭合的多边形,这时我们就可以说鼠标圈出了一个闭合区域,之后就可以进一步计算哪些小球在该区域里面。

  但是怎样判断鼠标是否圈出了一个闭合区域呢?这里使用的方法是:遍历每一条线段,从该线段的下一条再下一条线段开始遍历余下的线段,判断它们中是否有线段和开始的那条线段相交,如果相交,则证明曲线闭合了。注意这里从线段的下条再下条线段开始遍历是为了跳过线段首尾相连的情况。(例如,第一条线段肯定和第二条线段相交,因此从第三条线段开始判断,跳过相邻线段收尾相交的情况),代码如下:
  1. /*    返回轨迹是否闭合    */
  2.     var isClose=function(lines){   
  3.         var hasClose=false;
  4.         for(var i=0;i<lines.length;i++){
  5.             var l1=lines[i];
  6.             for(var j=i+2;j<lines.length;j++){
  7.                 var l2=lines[j];
  8.                 if(l2){
  9.                     var point=l1.isCross(l2);//交点坐标
  10.                     if(point){//非连接的相交
  11.                         resetLineSegs(lines,i,j,point);
  12.                         hasClosed=true;
  13.                         return true;
  14.                     }
  15.                 }
  16.             }
  17.         }
  18.         return false;
  19.     };
复制代码
  isCross方法返回线段交点的坐标,我们获得该坐标后,还需要把多边形修正成为真正的多边形,因为用鼠标圈出来的多边形并不是一个真正的多边形,它的开始和结束部分很可能会有突出的地方,如下图:
69d422f002787911a0c8deaf3e90a8bb.jpg
  我们假设鼠标从绿色部分开始圈一个圈,到蓝色部分结束。这样的话轨迹就并不是一个严格的多边形,因为它多出了蓝色和绿色的部分。因此我们需要对圈出来的多边形进行一个修正操作,使其变成一个真正的闭合多边形:
  1. /*    重置线段    */
  2.     var resetLineSegs=function(lines,i,j,point){
  3.         lines[i].end[0]=point[0];
  4.         lines[i].end[1]=point[1];
  5.         lines[i+1].start[0]=point[0];
  6.         lines[i+1].start[1]=point[1];
  7.         
  8.         lines[j].start[0]=point[0];
  9.         lines[j].start[1]=point[1];
  10.    
  11.         lines[j-1].end[0]=point[0];
  12.         lines[j-1].end[1]=point[1];
  13.         for(var m=i+1;m<j;m++){
  14.             closedLineSegsArr.push(lines[m]);
  15.         }   
  16.     }
复制代码
  当我们判断到两条线段相交后,可以获取到这两条线段的索引,这里分别为i和j(i<j),point为交点。在新增加的resetLineSegs方法中,首先改变i线段的结束坐标,使其刚好为交点,再改变j线段的起始坐标,使其为交点,并且使i线段后面的线段的起始坐标以及j线段前面线段的结束坐标为交点,这样就可以使多边形真正闭合。之后把闭合多边形各个边的对象保存在一个数组中,我们后面就要使用这些边,构造多边形对象了。
  1. for(var i=0,len=closedLineSegsArr.length;i<len;i++){
  2.     pointsArr.push([closedLineSegsArr[i].start[0],closedLineSegsArr[i].start[1]]);   
  3. }
  4. polygon=new Polygon({pointsArr:pointsArr,style:"rgba(241,46,8,0.5)"});
复制代码
  通过多边形的边对象的数组,可以获取到多边形每个顶点的坐标,并根据这些坐标构造多边形对象,之后的工作就是判断小球是否在多边形里面了。

  判断小球是否在多边形里,可以转化为判断小球的中点是否在多边形里,这里使用的方法叫射线法,意思是从一点向左发射出一条射线,如果射线和多边形有奇数个交点,则证明点在多边形内部。根据该定理实现的isInside方法如下:
  1. /**
  2.             *判断某点是否在多边形内(射线法)
  3.             **/
  4.             isInside:function(point){
  5.                 var lines=this.getLineSegs();

  6.                 var count=0;//相交的边的数量
  7.                 var lLine=new Line({start:[point[0],point[1]],end:[-9999,point[1]]});//左射线
  8.                 var crossPointArr=[];//相交的点的数组
  9.                 for(var i=0,len=lines.length;i<len;i++){
  10.                     var crossPoint=lLine.isCross(lines[i]);
  11.                     if(crossPoint){
  12.                         for(var j=0,len2=crossPointArr.length;j<len2;j++){
  13.                             //如果交点和之前的交点相同,即表明交点为多边形的顶点
  14.                             if(crossPointArr[j][0]==crossPoint[0]&&crossPointArr[j][1]==crossPoint[1]){
  15.                                 break;   
  16.                             }
  17.                            
  18.                         }
  19.                         if(j==len2){
  20.                             crossPointArr.push(crossPoint);   
  21.                             count++;
  22.                         }
  23.                         
  24.                     }
  25.                 }
  26.         
  27.                 if(count%2==0){//不包含
  28.                     return false;
  29.                 }
  30.                 return true;//包含
  31.             },
复制代码
  另外需要注意的是,由于射线与多边形相交交点个数是通过射线和多边形的每条边是否相交来判断,所以如果射线通过多边形的顶点,我们得出的结果就是相交了两次(通过顶点使射线与两条边都有相交)。因此我们需要记录判断过的交点,每次判断时检查该交点是否已经出现过,若出现过则不纳入计数,这样就基本实现了判断小球是否在鼠标圈选的多边形区域内。

  大概就说这么多了,欢迎交流~
源码下载
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

发表于 2016-12-15 14:58:16 | 显示全部楼层
群组增加群二维码/设置聊天背景/消息免打扰/视频讲
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

网站推荐上一条 /1 下一条

关注蚂蚁HTML5社区官方微信
关注蚂蚁HTML5社区官方微信

邮箱:Admin@zzfriend.com QQ:791577401 木子牛HTML5工作室 版权所有

© 2014-2017 MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表