Egret学习-坦克大战开发

Posted 2020-11-25 woaitech

实现玩家坦克的移动

基本流程

1.鼠标点击目标位置

2.坦克移动到指定位置，不能斜向移动，只能水平或垂直移动

3.可以简单寻路，如果中途遇到障碍，自动转向，

 

鼠标点击目标位置，将位置记录在坦克，在循环中移动到目标位置，同时判断是否遇到障碍，

 给背景添加鼠标点击事件

1 let bg = this.createBitmapByName("bg_jpg");
2 this.addChild(bg);
3 bg.touchEnabled = true;
4 bg.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onBgTouch, this);

事件处理，在坦克中增加targetX, targetY记录下鼠标点击位置

 1     /* 响应背景的点击事件 */
 2     private onBgTouch(e) {
 3         let x = e.stageX;
 4         let y = e.stageY;
 5 
 6         this.player1.targetX = parseInt(x);
 7         this.player1.targetY = parseInt(y) ;
11     }

坦克增加移动方法

 1     public move() {
 2         if(this.x == this.targetX && this.y == this.targetY) {
 3             return;
 4         }
 5 
 6         let xory = false;// true y, false x
 7         let nextx = this.x;
 8         let nexty = this.y;
 9 
10         let osx = Math.abs(this.x - this.targetX);
11         let osy = Math.abs(this.y - this.targetY);
12 
13         // 先移动距离小的
14         if(osx !=0 && osx < 18) {
15             console.log(‘先移动小的x‘);
16             if(this.x > this.targetX) {
17                 nextx = this.x - 1;
18                 this.turn(‘left‘)
19                 xory = false;
20             } else if(this.x < this.targetX) {
21                 nextx = this.x + 1;
22                 this.turn(‘right‘)
23                 xory = false;
24             }
25         } else if(osy !=0 && osy < 18) {
26             console.log(‘先移动小的y‘);
27             if(this.y > this.targetY) {
28                 nexty = this.y - 1;
29                 this.turn(‘up‘)
30                 xory = true;
31             } else if(this.y < this.targetY) {
32                 nexty = this.y + 1;
33                 this.turn(‘down‘)
34                 xory = true;
35             }
36         } else if(this.x > this.targetX) {
37             nextx = this.x - 1;
38             this.turn(‘left‘)
39             xory = false;
40         } else if(this.x < this.targetX) {
41             nextx = this.x + 1;
42             this.turn(‘right‘)
43             xory = false;
44         } else if(this.y > this.targetY) {
45             nexty = this.y - 1;
46             this.turn(‘up‘)
47             xory = true;
48         } else if(this.y < this.targetY) {
49             nexty = this.y + 1;
50             this.turn(‘down‘)
51             xory = true;
52         }
53 
54         console.log(‘x,y --- targetX, targetY‘, this.x, this.y, this.targetX, this.targetY)
55 
56         // 判断是否到边界
57         if(nextx < 18 || nextx > 640 - 18) {
58             console.log(‘到达边界‘);
59             this.targetX = nextx;
60         }
61 
62         if(nexty < 18 || nexty > 640 - 18) {
63             console.log(‘到达边界‘);
64             this.targetY = nexty;
65         }
66 
67         if(this.main.hitQian(nextx, nexty)) {
68             console.log(‘遇到墙‘);
69             if(xory) {
70                 this.targetY = this.y;
71             } else {
72                 this.targetX = this.x;
73             }
74         } else {
75             this.x = nextx;
76             this.y = nexty;
77         }
78     }

// 判断是否遇到砖块或石头

 1     /** 是否遇到墙 */
 2     public hitQian(x, y) {
 3         // 检查下一个点是否墙
 4         let hit = false;
 5         let startx = x - 18;
 6         let endx = x + 18;
 7         let starty = y - 18;
 8         let endy = y + 18;
 9         // 上面的线
10         for(let x = startx; x<endx; x++) {
11             let tile:tiled.TMXTile = this.layerZhuan.getTile(x, starty);
12             if(tile) {
13                 hit = true;
14                 break;
15             } else {
16                 tile = this.layerShitou.getTile(x, starty);
17                 if(tile) {
18                     hit = true;
19                     break;
20                 } 
21             }
22 
23         }
24         // 下面的线
25         for(let x = startx; x<endx; x++) {
26             let tile:tiled.TMXTile = this.layerZhuan.getTile(x, endy);
27             if(tile) {
28                 hit = true;
29                 break;
30             } else {
31                 tile = this.layerShitou.getTile(x, endy);
32                 if(tile) {
33                     hit = true;
34                     break;
35                 } 
36             }
37         }
38         // 左面的线
39         for(let y = starty; y<endy; y++) {
40             let tile:tiled.TMXTile = this.layerZhuan.getTile(startx, y);
41             if(tile) {
42                 hit = true;
43                 break;
44             } else {
45                 tile = this.layerShitou.getTile(startx, y);
46                 if(tile) {
47                     hit = true;
48                     break;
49                 } 
50             }
51         }
52         // 右面的线
53         for(let y = starty; y<endy; y++) {
54             let tile:tiled.TMXTile = this.layerZhuan.getTile(endx, y);
55             if(tile) {
56                 hit = true;
57                 break;
58             } else {
59                 tile = this.layerShitou.getTile(endx, y);
60                 if(tile) {
61                     hit = true;
62                     break;
63                 } 
64             }
65         }
66 
67         return hit;
68     }