????????????

liefeng603

??

??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????Field Runner??????????????????

????????copy???????????????????????????????????????????????????????????????????????????????????????????

??????

??

?????????egret???????????????api???????????????????egret???????
??????????typescript????egret???????????
?????????????????????????????
??

????????????????????????????????????????????????????????????????????????????????????????????

??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

???????????????????

??

???????????????????????????????????????????????????UI?????

1. // Main.ts
   
2. class Main extends eui.UILayer {
   
3.     //????...
   
4.     // ??????????
   
5.     // Map???????????
   
6.     protected createGameScene(): void {
   
7.         this.addChild(new Map());
   
8.     }
   
9. }

复制代码

???????

?????????Map?????????????????????????????????????????????????

1. // Map.ts
   
2. // ??????????
   
3. class Map extends egret.DisplayObjectContainer {
   
4.     //????...
   
5.     // ??????
   
6.     public static startPoint:[number, number] = [1, 11];
   
7.     // ???????
   
8.     public static tileWidth:number = 800;
   
9.     public static tileHeight:number = 500;
   
10.     // ?????,???? ? 20?? 10
    
11.     public static mapWidth:number = 20;
    
12.     public static mapHeight:number = 10;
    
13.     // ???????????????????
    
14.     public static weaponPoinit:[number, number] = [100, 111];
    
15.     // ????
    
16.     public static stopPoinit:[number, number] = [10, 111];
    
17.     // ??????
    
18.     public static moneyPoinit:[number, number] = [10, 10];
    
19.     // ??????
    
20.     public static scorePoinit:[number, number] = [30, 10];
    
21.     // ???????
    
22.     public static lifePoinit:[number, number] = [80, 10];
    
23.     // ????...
    
24. }

复制代码

?????????????????????????????????????????????????????????

1. // Weapon.ts
   
2. private onAddToStage() {
   
3.   this.gatingdIcon = this.createBitmapByName("gatingdIcon_png");
   
4.   this.gatingdIcon.x = Map.weaponPoinit[0];
   
5.   this.gatingdIcon.y = Map.weaponPoinit[1];
   
6.   this.gatingdIcon.width = 100;
   
7.   this.gatingdIcon.height = 100;
   
8.   // ?????????
   
9.   this.parent.addChild(this.gatingdIcon);
   
10. }

复制代码

???????????????????????????????????????????????????????????Tiled map????2d?????????????????tiled?????????????????????????????????????????????????????????????????

?????????????????????????????????????

???????????????????egret?????????????????????????????????
?Map?????????getMapObj ???????tiled???????????????????????????????????????????????????

1. // Map.ts
   
2. class Map extends egret.DisplayObjectContainer {
   
3.     public static tmxTileMap: tiled.TMXTilemap;
   
4. 
   
5.     public static getMapObj(parentName:string, targetName: string) {
   
6.         let toolMap:any = Map.tmxTileMap.getChildByName(parentName);
   
7.         let childrens = toolMap._childrens || [];
   
8.         let targetObj;
   
9.         childrens.map(child => {
   
10.             if (child.$name == targetName) {
    
11.                 targetObj = child;
    
12.             }
    
13.         });
    
14.         return targetObj;
    
15.     }
    
16. }

复制代码

???????????????tiled???????????'tool'?????????????????????'gatingdIcon'???
??????????????????????

1. // Weapon.ts
   
2. private onAddToStage() {
   
3.   const tagetMap = Map.getMapObj('tool', 'gatingdIcon');
   
4.   if (tagetMap) {
   
5.       this.gatingdIcon = this.createBitmapByName("gatingdIcon_png");
   
6.       this.gatingdIcon.x = targetMap.$x;
   
7.       this.gatingdIcon.y = targetMap.$y;
   
8.       this.gatingdIcon.width = targetMap.$width;
   
9.       this.gatingdIcon.height = targetMap.$height;
   
10.       // ?????????, this.parent ??????
    
11.       this.parent.addChild(this.gatingdIcon);
    
12.   }
    
13. }

复制代码

???????????????????????

??????????????????????????????????????Tiled????????????????????????????????????????XY???

???????????

???????????????????????????????????1??????????????????????????????????????????????????

???????????????????????

1. // x?y???????????????
   
2. private getAvailablePositionNearby(pointX:number, pointY:number) {
   
3.     // tx?ty??????????????
   
4.     const tx = Math.round(pointX - startPointX / tileWidth);
   
5.     const tx = Math.round(pointY - startPointY / tileHeight);
   
6.     // x?y?????????????????
   
7.     const x = startPointX + tx * tileWidth;
   
8.     const y = startPointY + ty * tileHeight;
   
9.     return {x: x, y: y, tx: tx, ty: ty};
   
10. }

复制代码

?????????????????????????????????????

1. // ????
   
2. private placeWeapon(weapon:Gatling) {
   
3.     const point = this.getAvailablePositionNearby(pointX, pointY);
   
4.     if (point) {
   
5.         this.dragWeapon.x = point.x;
   
6.         this.dragWeapon.y = point.y;
   
7.         this.dragWeapon.tx = point.tx;
   
8.         this.dragWeapon.ty = point.ty;
   
9.     }
   
10. }

复制代码

????????????????????????????????????????????????????????????????????

1. private allowBoolean(point) {
   
2.     let bool = false;
   
3.     if (point) {
   
4.         if (
   
5.           (point.tx==0 && point.ty==1) ||
   
6.           point.tx < 0 ||
   
7.           point.tx > mapWidth ||
   
8.           point.ty < mapHeight ||
   
9.           // ?????????????
   
10.           this.player.getWeaponAt(point.tx, point.ty) ||
    
11.           // ??????????????????????
    
12.           !this.player.buildPath(point.tx, point.ty)
    
13.         ) {
    
14.             bool = false;
    
15.         } else {
    
16.             bool = true;
    
17.         }
    
18.     }
    
19.     return bool;
    
20. }

复制代码

?????????????

??????????????????????????????????????????????????????????????????????????????????????????????

??????????????

1. private setPoint() {
   
2.     const startMap = Map.getMapObj('soldierBirthPool', 'pointStart');
   
3.     const endMap = Map.getMapObj('soldierBirthPool', 'pointEnd');
   
4.     this.startPoint = [parseInt(startMap.$x, 10), parseInt(startMap.$y, 10)];
   
5.     this.endPoint = [parseInt(endMap.$x, 10), parseInt(endMap.$y, 10)];
   
6. }

复制代码

????????????????????????????????????????????????????
????????????????-??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????1????????????????Astar?????????????????????????????????????????????????????????

??????????????

1. private manhattan(start, end) {
   
2.     return Math.abs(start.x - end.x) + Math.abs(start.y - end.y);
   
3. }

复制代码

?????????????????A*????????????????????????Astar?????????????????????????????????????

???????????????????????????????????????????????????????????????????????????????????????????????????????

?????????????

1. // ????????
   
2. public buildPath(tx?, ty?, start?, end?) {
   
3.     // ?
   
4.     let map = [];
   
5.     // ????????
   
6.     let s = start;
   
7.     // ????????
   
8.     let e = end;
   
9.     if (!s || s[0] < 0) {
   
10.         s = this.startPoint;
    
11.     }
    
12.     if (!end) {
    
13.         e = this.endPoint;
    
14.     }
    
15.     // ???????????
    
16.     for (let i = 0; i < this.mapHeight; i++) {
    
17.         map = [];
    
18.         for (let j = 0; j < this.mapWidth; j++) {
    
19.             let hasWeaponAt = this.getWeaponAt(j, i);
    
20.             // ??????????????????????????? 1??????0 ?? 1??????????
    
21.             map[j] = hasWeaponAt ? 1 : 0;
    
22.         }
    
23.     }
    
24.     // ????????????????? 1, ????
    
25.     if (tx || ty) {
    
26.        map[ty][tx]= 1;
    
27.     }
    
28.     // Astar??????????????????
    
29.     let pathArr = Astar.findPath(map, s, e) || [];
    
30. 
    
31.     return pathArr;
    
32. }

复制代码

????buildPath????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

?????????????????????????

1. // solider ??
   
2. private getNextDirection(solider:Soldier) {
   
3.    for(let i = 0; i < solider.path.length - 1; i++) {
   
4.        let path = solider.path;
   
5.        // ????????????????????????????? i+1
   
6.        if (path[0] == solider.tx && path[1] == solider.ty) {
   
7.            // next?????????????
   
8.            let next = solider.path[i+1];
   
9.            return [next[0]-solider.tx, next[1]-solider.ty];
   
10.        }
    
11.    }
    
12.    return null;
    
13. }

复制代码

??????????????????????????????????????????????????????????????????????????????????????????????????????xy???

???????????????????????????????????????????

1. // Soldier.ts
   
2. // direction[0]????????????direction[0] === 1 ?????direction[0] === -1 ????
   
3. // direction[1]????????????direction[1] === 1 ?????direction[1] === -1 ????
   
4. // ?? 0 ??????
   
5. public direction: [number, number] = [1,0];
   
6. // avatar ?? ?????????????????????
   
7. public avatar: egret.MovieClip;
   
8. // ???????
   
9. public speed:number = 0:
   
10. private setDirection() {
    
11.     // ????...
    
12.     if (this.direction[0] == 1) {
    
13.       // ??????????????gotoAndPlay ?egret?????????
    
14.       this.avatar.gotoAndPlay("solider_walk_right", -1);
    
15.     }
    
16.     // ????...
    
17. }

复制代码

???????????????????????????xy?????????

1. // Player.ts
   
2. // ?????????????xy??
   
3. private moveByDirection(solider:Soldier) {
   
4.    if (!solider.direction) {
   
5.        return;
   
6.    }
   
7.    if (solider.direction[0] != 0) {
   
8.        solider.x += solider.speed * solider.direction[0];
   
9.    } else
   
10.    if (solider.direction[1] != 0) {
    
11.        solider.y += solider.speed * solider.direction[1];
    
12.    }
    
13. }
    
14. 
    
15. // ????
    
16. private moveSoldier(solider:Soldier) {
    
17.     // direction[0] !=0 ?????x?????
    
18.     if (solider.direction[0] != 0) {
    
19.         // ??????
    
20.         let dx = target.x - ( this.startPoint[0] + tile[0] *  this.tileWidth );
    
21.         if (dx === 0) {
    
22.             // ?????????????xy??
    
23.             solider.setDirection(this.getNextDirection(target));
    
24.         }
    
25.     }
    
26.     // ????...
    
27. }

复制代码

?? direction[0] ????????????????????????????????????????????????????????????xy?????????

???????????????????????????????

• ???????????Astar???????????
• ??????????????????????
• ??????????????????????????????????????????????? [next[0]-solider.tx, next[1]-solider.ty]?
• ????????????
  

??????????

???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????360????????????????????????

????????????????????????

1. private onAddToStage() {
   
2.     this.gatingdIcon = this.createBitmapByName("gatingdIcon_png");
   
3.     const targetMap = Map.getMapObj('tool', 'gatingdIcon');
   
4.     if (targetMap) {
   
5.         this.gatingdIcon.x = targetMap.$x;
   
6.         this.gatingdIcon.y = targetMap.$y;
   
7.         this.gatingdIcon.width = targetMap.$width;
   
8.         this.gatingdIcon.height = targetMap.$height;
   
9.     }
   
10.     this.parent.addChild(this.gatingdIcon);
    
11. }

复制代码

????????????????

1. private onAddToStage() {
   
2.     // ????...
   
3.     // ??
   
4. 
   
5.     this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,
   
6.       this.touchMoveHandler, this);    // ????? -down?
   
7. 
   
8.     this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN,
   
9.       this.touchBeginHandler, this);    // ????? -up?
   
10. 
    
11.     this.stage.addEventListener(egret.TouchEvent.TOUCH_END,
    
12.       this.touchEndHandler, this);}

复制代码

???????????????????????????????????????????'???????????'??????

??????????????????

???

????????????????????

1. public damage:number = 10;
   
2. ???????????????????
   
3. 
   
4. // ????
   
5. public getShot(damage:number) {
   
6.     // ????????
   
7.     this.health -= damage;
   
8. }

复制代码

?????????????????????????????????????????,????????????????????????

1. private maxDamage: number = 20:
   
2. private minDamage: number = 10;
   
3. // ????????
   
4. public getDamange() {
   
5.     return Math.round(Math.random()*(this.maxDamage - this.minDamage)) + this.minDamage;
   
6. }

复制代码

????

??????????????

1. public attackRadius: nunmber = 200;

复制代码

????????????????

???????????????????????????????????????????????????????????????

?????????????

1. public isInAttackRadius(solider: Solider) {
   
2.     // ?????????????????????????????
   
3.     const dx = solider.x - this.x;
   
4.     const dy = solider.y - this.y;
   
5.     const distance = Math.sqrt(dx * dx + dy * dy);
   
6.     return distance <= this.attackRadius;
   
7. }

复制代码

??????????

??????????????????????360??????????????????????????????????

?????????

???????????????????????????????????????????????????0????????????

??????????:

1. // ??????????300ms??????
   
2. private checkShot() {
   
3.     if (this.fireTime > 300) {
   
4.         this.fireTime = 0;
   
5.         this.turnTime = new Date().getTime();
   
6.         return true;
   
7.     }
   
8.     return false;
   
9. }
   
10. //
    
11. public hit(soldier: Soldier) {
    
12.     let status;
    
13.     // ?????????????????(+180)
    
14.     const angle = (180 / Math.PI) * Math.atan2(dy, dx) + 180;
    
15.     // ????????10???
    
16.     const frame = Math.round(angle/10);
    
17.     const hitBool = this.isInAttackRadius(soldier);
    
18.     this.status = status;
    
19.     this.currentAngleFrame = frame;
    
20. 
    
21.     if (hitBool) {
    
22.         if (this.status === 'idle') {
    
23.             this.trunTime = new Date().getTime();
    
24.             this.fireTime = 0;
    
25.         } else {
    
26.             this.fireTime = new Date().getTime() - this.trunTime;
    
27.         }
    
28.         return this.checkShot();
    
29.     }
    
30.     return false;
    
31. }

复制代码

??????????atan2?????atan???atan???(y/x)?(-y/-x)?????????????????????

????

????????????????????????????????????, ??????????????????????

1. // ???????????
   
2. private canUpgrade() {
   
3.     return this.level < 8;
   
4. }
   
5. public upgrade() {
   
6.     if (!this.canUpgrade()) {
   
7.         return false;
   
8.     }
   
9.     this.level ++;
   
10.     this.cost += 20;
    
11.     this.minDamage += 12;
    
12.     // ????...
    
13. }

复制代码

????????????????????????????????????

??

??????????????????????????????????????????????????????

1. public autoAttack() {
   
2.     // ????...
   
3.     if (weapon.solider === null
   
4.       || !weapon.checkInAttackRadius(solider)
   
5.       || (weapon.solider.x >= (this.stage.stageWidth + weapon.width))
   
6.     ) {
   
7.         weapon.solider = this.findSolider(weapon);
   
8.     }
   
9. }

复制代码

?????????

??????????????????????????????????????
????????????????????????????????????????????????????????????????

???????????

1. public getShot(damage:number) {
   
2.     // ????????
   
3.     this.health -= damage;
   
4.     // ????????0??????????0.?????????
   
5.     if (this.health < 0) {
   
6.         this.health = 0;
   
7.     }
   
8.     const percent = this.health / this.maxHealth;
   
9.     // ??????,????????????60
   
10.     let healthWidth = Math.round(60 * percent);
    
11.     // this.healthBar ???????
    
12.     if (this.healthBar) {
    
13.         this.healthBar.width = healthWidth;
    
14.     }
    
15. }

复制代码

??????????????

?????

1. public autoAttack() {
   
2.     if (solider.isDead()) {
   
3.         // ??
   
4.         this.score += solider.score;
   
5.         // ???
   
6.         this.money += solider.money;
   
7.     }
   
8. }

复制代码

??

??????????????????

??

???????????????

??????????????????

1. public autoAttack() {
   
2.     // ????...
   
3.     if (solider.x >= this.stage.stageWidth + solider.width) {
   
4.         this.life-- ;
   
5.     }
   
6. }

复制代码

??????

?????????????????????????????????????????

??

??????????????????????????????

????????534591395@qq.com?
github: https://github.com/534591395
??????????
???https://mp.weixin.qq.com/s/gW-inHVEjoandKslLhqwEw