Egret学习-坦克大战开发

Posted 2020-11-25 woaitech

现在开始写具体实现代码

1.加载TiledMap

 1     /**
 2      * 创建游戏场景
 3      * Create a game scene
 4      */
 5     private createGameScene() {
 6         let sky = this.createBitmapByName("bg_jpg");
 7         this.addChild(sky);
 8 
 9         /*加载地图*/
10         /*初始化资源加载路径*/
11         this.url = "resource/640bg.tmx";
12         /*初始化请求*/
13         this.request = new egret.HttpRequest();
14         /*监听资源加载完成事件*/
15         this.request.once( egret.Event.COMPLETE,this.onMapComplete,this);
16         /*发送请求*/
17         this.request.open(this.url,egret.HttpMethod.GET);
18         this.request.send();
19     }

2.在加载完成后将地图添加到游戏

/*地图加载完成*/
private onMapComplete(event:egret.Event) {
        /*获取到地图数据*/
        var data:any = egret.XML.parse(event.currentTarget.response);
        /*初始化地图*/
        this.tmxTileMap = new tiled.TMXTilemap(640, 640, data, this.url);
        this.tmxTileMap.render();
        this.tmxTileMap.once(egret.Event.ADDED_TO_STAGE, this.onMapAddToStage, this);
        /*将地图添加到显示列表*/
        this.addChild(this.tmxTileMap);
} 

3.地图显示后，还要添加一些初始的游戏角色，玩家坦克，敌方坦克

 1         let groups = this.tmxTileMap.getObjects();
 2         let group0 = groups[0];
 3         group0.draw();
 4         // 3为tiledmap中的对象Id
 5         let pl1:tiled.TMXObject = group0.getObjectById(3);
 6         // 创建玩家坦克
 7         let tank1 = new Tank(‘player1‘, ‘up‘, ‘player‘);
 8         tank1.x = pl1.x + 17.5;
 9         tank1.y = pl1.y + 17.5;
10         this.tmxTileMap.addChild(tank1);

4.需要创建坦克类，封装一些基本的操作

1）基本的属性，

图片前缀player，坦克图片名称类似player_up_png,一个方向一个，共四个方向

方向，当前坦克的方向

阵营，玩家，敌方

2）基本方法

转向

代码如下

 1 class Tank extends egret.DisplayObjectContainer {
 2 
 3     /* 图片前缀 */
 4     private name_prefix:string;
 5     /* 方向 */
 6     private dir:string;
 7     /* 阵营 */
 8     private camp:string;
 9 
10     private img:egret.Bitmap;
11 
12     public constructor(prefix:string, dir:string, camp:string) {
13         super();
14         this.name_prefix = prefix;
15         this.dir = dir;
16         this.camp = camp;
17         this.anchorOffsetX = 17.5;
18         this.anchorOffsetY = 17.5;
19         this.once(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
20     }
21 
22     private onAddToStage() {
23         this.img = new egret.Bitmap();
24         this.img.texture = RES.getRes(this.name_prefix + ‘_‘ + this.dir + ‘_png‘);
25         this.addChild(this.img);
26     }
27 
28     /** 转向 */
29     public turn(dir) {
30         if(this.dir === dir) {
31             return;
32         }
33         this.dir = dir
34         this.img.texture = RES.getRes(this.name_prefix + ‘_‘ + this.dir + ‘_png‘);
35     }
36 }

 

this.anchorOffsetX = 17.5;

this.anchorOffsetY = 17.5;
设置显示对象的锚点，egret默认的锚点为左上角，根据坦克的大小为35，所以修改到对象的中心