即时战略游戏开发—Rectangle应用实战+Array中被你忽略的方法

 上一次发了一篇Rectangle对象在游戏 开发 中的应用 的文章 ,下面还是围绕Rectangle对象介绍一下在即时战略游戏中的实际应用。同时还将会用到数组对象中平时用的不多的几个方法。

      玩过《红警》或者《帝国时代》的朋友应该都知道，这类游戏有一个框选功能。鼠标 在屏幕上拉一个框，处在方框之内的都被选中。如图：


      我们这个例子的原型是这样的：

      1、坦克的选择有框选和点击选择两种方式。
      2、坦克被选中后会显示自己被选中
      3、鼠标在屏幕上点击时，如果有坦克被选中，坦克将移动到鼠标点击位置附近（是附近不是鼠标点击位置）,同时选择状态自动取消。
      4、如果有新的选择，则之前选择的坦克的选择状态将取消。

       先看一下做好的效果 ，点击这里
     [flash ]http://source.iflashigame.com/c&c/c&c.swf [/flash]
讲解：

      1、坦克的被选择和非选择状态的实现
      在我们的坦克类里面设置一个属性 select,通过set方法来实现。当select=true时，让坦克的帧跳转到第2帧。当select=false时，让坦克的帧跳转到第1帧。

      在坦克类Tank中设定一个私有变量_select，然后设置getter/setter

1.       public function get select():Boolean
   
2.       {
   
3.            return _select;
   
4.       }
   
5.       public function set select(s:Boolean)
   
6.       {
   
7.            _select=s;
   
8.            this.gotoAndStop(_select==true? 2:1)
   
9.       }

复制代码

2、坦克点击选择的实现
      我们没有必要给每一辆坦克都注册鼠标事件 ，只要给放置坦克的容器注册一个鼠标事件就能知道用户点击的是哪一辆坦克。
      MouseEvent有target和currentTarget两个属性。这两个属性有区别，target返回的是最先接收到点击的交互物体，而currentTarget返回的是你addEventListener注册的这个对象。见下图：
     



      3、坦克框选的实现
      基本上我们会需要做这几个步骤：
      A、通过鼠标的MOUSE_MOVE事件实现拉框效果。
      B、通过画的这个框和物体的边界框比较判断那些物体被选择了
      C、让这些物体变为选择的状态
      D、当鼠标再一次被点击时，如果有坦克在选择状态下并且点击的位置是空地，则所有坦克向目标点附近移动，同时取消所有选择状态。

      实现思路是——准备两个数组一个记录所有坦克的引用tankList，一个记录任何时候被选择的坦克的引用selectList。

       这里我们会用到平时使用不多的两个数组里的方法forEach()和filter()，这两个方法将在这里发挥重要的作用。数组对象共有5个你可能没怎么关注的新的方法。如下图：


      来看一下我们在这个例子里面是怎么用的：

1.       selectList=tankList.filter(selectTank); //找出被框选的坦克
   
2.       selectList.forEach(moveTank); //让所有被选中的坦克移动
   
3. 
   
4.       function selectTank(element:*, index:int, arr:Array)
   
5.       {
   
6.            //如果坦克边界与选框相交，则让坦克显示为选择状态
   
7.            if(element.getBounds(this).intersects(rec)==true)
   
8.            {
   
9.                 element.select=true;
   
10.                 return true;
    
11.           }
    
12.            return false;
    
13.       }
    
14. 
    
15.       function moveTank(element:*, index:int, arr:Array)
    
16.       {
    
17.          element.select=false; //移动时取消坦克的选择状态
    
18.           var randomX=targetPoint.x+Math.random()*150-75;
    
19.           var randomY=targetPoint.y+Math.random()*150-75;
    
20.           element.moveTo(randomX,randomY); //让坦克移动
    
21.        }

复制代码

完整代码如下：
==================================================================================
主程序 ：

1. import Tank;
   
2. 
   
3. var map:Sprite=new Sprite(); //定义一个地图 容器
   
4. var tankList:Array=new Array(); //定义一个记录所有坦克的列表
   
5. var selectList:Array=new Array(); //定义一个记录当前选择的坦克的列表
   
6. var targetPoint:Point; //目标点
   
7. var rec:Rectangle; //选择框的矩形对象
   
8. var shape:Shape=new Shape(); //用于显示选择框的Shape对象
   
9. var isMove:Boolean; //选择坦克还是移动坦克
   
10. addChild(map); //把地图放入显示列表
    
11. addChild(shape); //选择框
    
12. 
    
13. //产生20辆坦克
    
14. for (var i=0;i<20;i++)
    
15. {
    
16.     var tank=new Tank();
    
17.     map.addChild(tank);
    
18.     tankList.push(tank); //把坦克的引用记录下来
    
19. }
    
20. 
    
21. addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler)
    
22. addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler)
    
23. 
    
24. function mouseDownHandler(evt:MouseEvent)
    
25. {
    
26.     targetPoint=new Point(evt.currentTarget.mouseX,evt.currentTarget.mouseY);
    
27.     //如果点击在坦克上，则此坦克被选中。否则注册一个鼠标移动事件
    
28.     if((evt.target is Tank)==true)
    
29.     {
    
30.         selectList.forEach(unSelect); //将已选择链表中所有坦克变为非选择状态
    
31.         clearArray(selectList); //清空selectList数组
    
32.         evt.target.select=true
    
33.         selectList.push(evt.target)
    
34.        isMove=false;
    
35.     }
    
36.     else
    
37.     {
    
38.         addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler)
    
39.        isMove=true;
    
40.    }
    
41. }
    
42. function mouseMoveHandler(evt:MouseEvent)
    
43. {
    
44.     var recWidth=evt.currentTarget.mouseX-targetPoint.x;
    
45.     var recHeight=evt.currentTarget.mouseY-targetPoint.y;
    
46.     shape.graphics.clear();
    
47.     shape.graphics.beginFill(0x99ccff,0.2);
    
48.     shape.graphics.lineStyle(2, 0x000000,0.8);            
    
49.     shape.graphics.drawRect(targetPoint.x,targetPoint.y, recWidth, recHeight)
    
50.     shape.graphics.endFill();
    
51. }
    
52. function mouseUpHandler(evt:MouseEvent)
    
53. {
    
54.     removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler)
    
55.     rec=shape.getBounds(this);
    
56.     shape.graphics.clear();
    
57.     if(rec.width>0&&rec.height>0)//重新框选
    
58.    {
    
59.         selectList.forEach(unSelect);
    
60.        clearArray(selectList);
    
61.         selectList=tankList.filter(selectTank);
    
62.        rec.width=rec.height=0;
    
63.    }
    
64.     else if(selectList.length>0&&isMove==true)
    
65.     {
    
66.         selectList.forEach(moveTank)
    
67.         clearArray(selectList);
    
68.     }
    
69. }
    
70. //用来筛选哪些坦克被选中的过滤方法
    
71. function selectTank(element:*, index:int, arr:Array)
    
72. {
    
73.     if(element.getBounds(this).intersects(rec)==true)
    
74.    {
    
75.         element.select=true;
    
76.        return true;
    
77.     }
    
78.     return false;
    
79. }
    
80. //取消坦克的选择状态的方法
    
81. function unSelect(element:*, index:int, arr:Array)
    
82. {
    
83.       element.select=false;
    
84. }
    
85. //移动坦克的方法
    
86. function moveTank(element:*, index:int, arr:Array)
    
87. {
    
88.     element.select=false;
    
89.     var randomX=targetPoint.x+Math.random()*150-75;
    
90.     var randomY=targetPoint.y+Math.random()*150-75;
    
91.     element.moveTo(randomX,randomY);
    
92. }
    
93. function clearArray(arr:Array)
    
94. {
    
95.     while(arr.length>0)
    
96.    {
    
97.        arr.shift();
    
98.     }
    
99. }

复制代码

==================================================================================
坦克类

1. package
   
2. {
   
3. /**
   
4. * 一个简单的坦克类的模型
   
5. * 作者:闪刀浪子
   
6. * blog:http://hi.baidu.com/mr_ziqiang
   
7. */
   
8. import flash.display.MovieClip
   
9. import flash.geom.Point
   
10. import flash.events.Event;
    
11. 
    
12. public class Tank extends MovieClip
    
13. {
    
14.    private var speed:int; //坦克的速度
    
15.    private var targetPoint:Point; //目标点
    
16.    private var _select:Boolean; //此坦克是否被选中，选中则显示被选中状态
    
17.    /**
    
18.    * Tank类构造函数
    
19.    * 初始化的时候随机产生一个坐标
    
20.    */
    
21.    public function Tank()
    
22.    {
    
23.     this.mouseChildren=false; //这里记得禁用子对象的鼠标点击
    
24.     this.x=300*Math.random()+10; //设置坦克出现的时候在左上角100*100大小范围类随机
    
25.     this.y=300*Math.random()+10;
    
26.     this.scaleX=this.scaleY=1+Math.random(); //体积大的就是红警中最牛的猛犸坦克了
    
27.     speed=(3-scaleX)*4; //呵呵，体积越大速度当然要越慢了
    
28.    }
    
29.    public function moveTo(tx:Number,ty:Number)
    
30.    {
    
31.     this.removeEventListener(Event.ENTER_FRAME,onMove);
    
32.     targetPoint=new Point(tx,ty);
    
33.     this.addEventListener(Event.ENTER_FRAME,onMove);
    
34.    }
    
35.    private function onMove(evt:Event)
    
36.    {
    
37.     var dx = targetPoint.x - this.x;
    
38.     var dy = targetPoint.y - this.y;
    
39.     var radian = Math.atan2(dy, dx);//求新角度  
    
40.     body.rotation=radian*180/Math.PI; //我的坦克类里有一个body的mc,方便转向的时候绿框不随着转
    
41.     if (dx * dx + dy * dy <= speed * speed)
    
42.     {
    
43.      this.x=targetPoint.x;
    
44.      this.y=targetPoint.y;
    
45.      this.removeEventListener(Event.ENTER_FRAME,onMove);
    
46.     }
    
47.     else
    
48.     {
    
49.      var vx = Math.cos(radian) * speed;//求增量
    
50.      var vy = Math.sin(radian) * speed;
    
51.    
    
52.      this.x += vx;
    
53.      this.y += vy;
    
54.     }   
    
55.    }
    
56.    public function get select():Boolean
    
57.    {
    
58.     return _select;
    
59.    }
    
60.    public function set select(isSelect:Boolean)
    
61.    {
    
62.     _select=isSelect;
    
63.     if(_select==true)
    
64.     {
    
65.      this.gotoAndStop(2);
    
66.     }
    
67.     else
    
68.     {
    
69.      this.gotoAndStop(1);
    
70.     }
    
71.    }  
    
72. }
    
73. }

复制代码