1.友军的移动边界设定 2.暂停功能 3.支持分数,4. 区分子弹

src/lib/MovableManager.ts

@@ -2,17 +2,38 @@ import Enemy from "../planewar/Enemy";
 import Hero from "../planewar/Hero";
 import Bullet from "../weapon/Bullet";
 import Movable from "./Movable";
+import ScoreClass from "../tools/Score";
 
+let scoreClass;
 export default class MovableManager extends FYGE.EventDispatcher {
   private _stage: FYGE.Stage;
   public Score: 0;
   private _movableList: Movable[] = [];
   hero: Hero;
+
   constructor(stage: FYGE.Stage) {
     super();
     this._stage = stage;
     this.Score = 0;
+    scoreClass = new ScoreClass(stage);
+
     this._stage.addEventListener(FYGE.Event.ENTER_FRAME, this.onEnterFrame);
+
+    this._stage.addEventListener(
+      FYGE.MouseEvent.MOUSE_DOWN,
+      this.touchStage,
+      this
+    );
+    this._stage.addEventListener(
+      FYGE.MouseEvent.MOUSE_MOVE,
+      this.touchStage,
+      this
+    );
+    this._stage.addEventListener(
+      FYGE.MouseEvent.MOUSE_UP,
+      this.touchStage,
+      this
+    );
   }
 
   onEnterFrame = () => {
@@ -43,6 +64,99 @@ export default class MovableManager extends FYGE.EventDispatcher {
     this.dispatchEvent("gameover");
   }
 
+  private addScore() {
+    this.Score += 10;
+    console.log("this.Score", this.Score);
+    scoreClass.change(this.Score);
+  }
+
+  /**
+   * 判断是否超出边界
+   */
+  judgeEdge() {
+    const { width, height, x, y } = this.hero;
+    // console.log("this.hero", this.hero);
+    const dx = width,
+      dy = height;
+    const { stageWidth: wW, stageHeight: wH } = this._stage;
+    // console.log("wW", wW);
+    // console.log("wH", wH);
+
+    // console.log("dx", dx);
+    // console.log("dy", dy);
+
+    // console.log("x", x);
+    // console.log("y", y);
+    if (x < 0) {
+      console.log("x < 0");
+
+      this.hero.x = 0;
+    } else if (x > wW - dx) {
+      console.log("x > wW");
+      this.hero.x = wW - dx;
+    }
+
+    if (y < dy) {
+      this.hero.y = 0;
+    } else if (y > wH - dy) {
+      this.hero.y = wH - dy;
+    }
+  }
+
+  /**
+   * 鼠标点到的差值 移动要减去这个差值，不然会瞬间偏移
+   * @type {{x: number, y: number}}
+   */
+  mouseDP = { x: 0, y: 0 };
+
+  /**
+   * 在stage上触摸
+   * @param {MouseEvent} e
+   */
+  touchStage(e) {
+    switch (e.type) {
+      case FYGE.MouseEvent.MOUSE_DOWN:
+        this.mouseDP.x = e.localX - this.hero.x;
+        this.mouseDP.y = e.localY - this.hero.y;
+        console.log("MOUSE_DOWN");
+        console.log("mouseDP", this.mouseDP);
+        break;
+
+      case FYGE.MouseEvent.MOUSE_UP:
+        console.log("MOUSE_UP");
+
+      case FYGE.MouseEvent.MOUSE_MOVE:
+        console.log("MOUSE_MOVE");
+
+        const px = e.localX - this.mouseDP.x;
+        const py = e.localY - this.mouseDP.y;
+        console.log("px", px);
+        console.log("py", py);
+
+        // this.hero.position.set(px, py);
+        this.judgeEdge();
+        break;
+    }
+  }
+
+  destroy() {
+    this._stage.removeEventListener(
+      FYGE.MouseEvent.MOUSE_DOWN,
+      this.touchStage,
+      this
+    );
+    this._stage.removeEventListener(
+      FYGE.MouseEvent.MOUSE_MOVE,
+      this.touchStage,
+      this
+    );
+    this._stage.removeEventListener(
+      FYGE.MouseEvent.MOUSE_UP,
+      this.touchStage,
+      this
+    );
+  }
+
   checkHitByBullet() {
     const enemyBulletList = this._movableList.filter(
       (i) => i instanceof Bullet && i.host instanceof Enemy
@@ -68,10 +182,10 @@ export default class MovableManager extends FYGE.EventDispatcher {
       for (let j = 0; j < heroBulletList.length; j++) {
         const onHeroBullet = heroBulletList[j];
         if (this.checkHit(oneEnemy, onHeroBullet)) {
-          this.Score += 10;
+          this.addScore();
+
           this.remove(oneEnemy);
           this.remove(onHeroBullet);
-          console.log("this.Score", this.Score);
           return;
         }
       }

src/main.ts

 import { addGame } from "./planewar/addGame";
-var canvas: any = document.getElementById("canvas")
-canvas.width = document.body.clientWidth * 1
-canvas.height = document.body.clientHeight * 1
+var canvas: any = document.getElementById("canvas");
+canvas.width = document.body.clientWidth * 1;
+canvas.height = document.body.clientHeight * 1;
 var stage = new FYGE.Stage(
-    canvas,
-    750,
-    1624,
-    canvas.width,
-    canvas.height,
-    FYGE.RENDERER_TYPE.CANVAS,
-    false,
-    false
-)
-
+  canvas,
+  750,
+  1624,
+  canvas.width,
+  canvas.height,
+  FYGE.RENDERER_TYPE.CANVAS,
+  false,
+  false
+);
+let pause = false;
+let Game = new addGame(stage);
 var mouseEvent = stage.onMouseEvent.bind(stage);
 canvas.addEventListener("touchstart", mouseEvent, false);
-canvas.addEventListener('touchmove', mouseEvent, false);
-canvas.addEventListener('touchend', mouseEvent, false);
+canvas.addEventListener("touchmove", mouseEvent, false);
+canvas.addEventListener("touchend", mouseEvent, false);
 
 stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this);
 
 function onInitStage() {
-   new addGame(stage)
+  Game;
 }
 
 (function loop() {
-    FYGE.Tween.flush()
+  if (!pause) {
+    FYGE.Tween.flush();
     stage.flush();
-    requestAnimationFrame(loop);
-})();
\ No newline at end of file
+  }
+  requestAnimationFrame(loop);
+})();
+
+function pauseGame() {
+  pause = !pause;
+  console.log("收到暂停", pause);
+}
+
+window.addEventListener("pause", pauseGame);

src/planewar/Enemy.ts

@@ -18,11 +18,11 @@ export default class Enemy extends Movable implements IWeaponHost {
 
     const weapon = new Weapon(this);
 
-    // const bg = new FYGE.Graphics;
-    // bg.beginFill(0x00ff00, 0.2)
-    // bg.drawRect(0, 0, 69, 88)
-    // bg.endFill()
-    // this.addChild(bg)
+    const bg = new FYGE.Graphics();
+    bg.beginFill(0x00ff00, 0.2);
+    bg.drawRect(0, 0, 69, 88);
+    bg.endFill();
+    this.addChild(bg);
 
     this.addEventListener(FYGE.Event.REMOVED_FROM_STAGE, () => {
       // console.log('敌人消失了')
@@ -42,6 +42,16 @@ export default class Enemy extends Movable implements IWeaponHost {
     return new Vector2(0, 0);
   }
 
+  // 子弹背景
+  getShootBg() {
+    const bg = new FYGE.Graphics();
+    bg.beginFill(0x00ff00, .3);
+    bg.drawRect(0, 0, 18, 42);
+    bg.endFill();
+
+    return bg;
+  }
+
   getShootPoint() {
     return new FYGE.Point(this.x + this.width / 2, this.y + this.height);
   }

src/planewar/EnemyFactory.ts

@@ -20,7 +20,8 @@ export default class EnemyFactory {
       (Math.random() - 0.5) * 2,
       Math.random() * 5 + 2
     );
-    enemy.acceleration = new Vector2(0, 0.1);
+    // 敌军加速度
+    enemy.acceleration = new Vector2(0, .05);
   };
 
   destroy() {

src/planewar/Hero.ts

@@ -37,9 +37,18 @@ export default class Hero extends DragDropable implements IWeaponHost {
     return new Vector2(0, 0);
   }
 
-  getDropPoint() {
+  getDropPoint(drag: FYGE.MouseEvent) {
+    // console.log("stageX", drag.stageX);
+    // console.log("stageY", drag.stageY);
+
     return {};
   }
 
-  onDragEnd() {}
+  getShootBg() {
+    return "";
+  }
+
+  onDragEnd(drag: DragDropable) {
+    // console.log(111, drag);
+  }
 }

src/planewar/addGame.ts

@@ -2,6 +2,8 @@ import DragDropManager from "../dragdrop/DragDropManager";
 import MovableManager from "../lib/MovableManager";
 import Background from "./Background";
 import EnemyFactory from "./EnemyFactory";
+import Score from "../tools/Score";
+import Pause from "../tools/Pause";
 import Hero from "./Hero";
 
 export function addGame(stage: FYGE.Stage) {
@@ -9,26 +11,30 @@ export function addGame(stage: FYGE.Stage) {
   const dragDropManager = new DragDropManager();
 
   const background = new Background(stage, movableManager);
-
   const hero = stage.addChild(new Hero(movableManager));
-  // const hero2 = stage.addChild(new Hero(movableManager));
-  // const hero3 = stage.addChild(new Hero(movableManager));
-  hero.position.set(300, 1000);
-  // hero2.position.set(250, 1000);
-  // hero3.position.set(350, 1000);
+  hero.position.set(300, stage.stageHeight - 200);
 
   const enemyFactory = new EnemyFactory(stage, movableManager);
 
   dragDropManager.add(hero);
+  this.pause = false;
+
+  // 当前分数
+  const score = new Score(stage);
+  // 暂停
+  const pause = new Pause(stage);
 
   movableManager.hero = hero;
 
   function onGamOver() {
-    alert("gameOver");
     console.log("Score", movableManager.Score);
-
+    alert(`gameOver 您获得的分数为${movableManager.Score}`);
+    this.pause = true;
     dragDropManager.remove(hero);
+    pause.destroy(stage);
     enemyFactory.destroy();
+    movableManager.destroy();
   }
+
   movableManager.addEventListener("gameover", onGamOver);
 }

src/tools/Pause.ts

+let PauseText;
+
+export default class Pause {
+  constructor(stage: FYGE.Stage) {
+    PauseText = new FYGE.TextField();
+    PauseText.text = "暂停";
+    PauseText.fillColor = "#000000";
+    PauseText.size = 50;
+    PauseText.x = 50;
+    PauseText.y = 30;
+    stage.addChild(PauseText);
+
+    PauseText.addEventListener(FYGE.MouseEvent.CLICK, this.pause, this);
+  }
+
+  pause() {
+    console.log("暂停");
+    // 目前点击一次不能点击了
+    window.dispatchEvent(new Event("pause"));
+  }
+
+  reset() {}
+
+  destroy(stage) {
+    PauseText.removeEventListener(FYGE.MouseEvent.CLICK, this.pause, this);
+    stage.removeChild(PauseText);
+  }
+}

src/tools/Score.ts

+let scoreText;
+let score = 0;
+
+export default class Score {
+  constructor(stage: FYGE.Stage) {
+    scoreText = new FYGE.TextField();
+    scoreText.text = `当前分数:0`;
+    scoreText.x = 250;
+    scoreText.y = 30;
+    scoreText.size = 45;
+    stage.addChild(scoreText);
+  }
+
+  change(changeScore) {
+    score = changeScore;
+    scoreText.text = `当前分数:${score}`;
+    console.log("change---scoreText.text", scoreText.text);
+  }
+
+  reset() {}
+
+  destroy() {}
+}

src/weapon/IWeaponHost.ts

@@ -7,4 +7,5 @@ export interface IWeaponHost extends FYGE.Sprite {
   getShootVelocity(): Vector2;
   getShootAcceleration(): Vector2;
   getShootInterval();
+  getShootBg();
 }

src/weapon/Weapon.ts

@@ -36,6 +36,11 @@ export default class Weapon {
     bullet.acceleration = this._host.getShootAcceleration();
     const shootPoint = this._host.getShootPoint();
     bullet.position.set(shootPoint.x, shootPoint.y);
+
+    // 添加子弹背景
+    const shootBg = this._host.getShootBg();
+    shootBg && bullet.addChild(shootBg);
+
     this._host.movableManager.add(bullet);
   };