init

public/index.html

@@ -18,7 +18,7 @@
             height: 100%;
             overflow: hidden;
             position: absolute;
-            background-color: #9a3636;
+            background-color: #faf4f4;
             /* background: linear-gradient(#93dbb7,#ff0,#b5d89a); */
             /* background: linear-gradient(#93dbb7,#b5d89a); */
             /* 背景图片，解决加载太慢，白屏问题,加了这个下面的__loading__可以删掉了 */

src/Bullet.ts

+import Movable from "./Movable";
+
+export default class Bullet extends Movable {
+    constructor() {
+        super();
+        this.texture = FYGE.Texture.fromUrl('//yun.duiba.com.cn/spark/assets/bullet1.63bb85f32cabe5f986366c2d428c5e2aa2435230.png')
+    }
+}
\ No newline at end of file

src/Enemy.ts

+import Movable from "./Movable";
+
+export default class Enemy extends Movable {
+    constructor() {
+        super();
+        this.texture = FYGE.Texture.fromUrl('//yun.duiba.com.cn/spark/assets/enemy2_fly1.0f4acd3728e90763d98a7328a5a32dbc78ec204e.png')
+    }
+}
\ No newline at end of file

src/Movable.ts

+import Vector2 from "./Vector2";
+
+export default class Movable extends FYGE.Sprite {
+    private _velocity: Vector2;
+
+    set velocity(val: Vector2) { this._velocity = val }
+
+    step() {
+        this.y += this._velocity.y;
+        this.x += this._velocity.x;
+    }
+}
\ No newline at end of file

src/MovableManager.ts

+import Movable from "./Movable";
+
+export default class MovableManager {
+    private _stage: FYGE.Stage;
+    private _movableList: Movable[] = [];
+    constructor(stage: FYGE.Stage) {
+        this._stage = stage;
+        this._stage.addEventListener(FYGE.Event.ENTER_FRAME, this.onEnterFrame);
+    }
+
+    onEnterFrame = () => {
+        this.step();
+        this.checkRemove();
+        console.log('移动对象的数量:',this._movableList.length)
+    }
+
+    private calcCanRemove(item: FYGE.DisplayObject) {
+        if (item.y > 1624) return true;
+        if (item.y < -item.height)  return true;
+        if (item.x > 750)   return true;
+        if (item.x < -item.width)  return true;
+        return false;
+    }
+
+    private checkRemove() {
+        for (let index = 0; index < this._movableList.length; index++) {
+            const item = this._movableList[index];
+            if (this.calcCanRemove(item)) {
+                this._movableList.splice(index, 1);
+                index--;
+            }
+        }
+    }
+
+    private step() {
+        this._movableList.forEach(item => item.step());
+    }
+
+    add(item: Movable) {
+        this._movableList.push(item);
+    }
+
+    remove(item: Movable) {
+        const index = this._movableList.indexOf(item);
+        this._movableList.splice(index, 1);
+    }
+
+}
\ No newline at end of file

src/Vector2.ts

+export default class Vector2 {
+
+    x:number;
+    y:number;
+
+    constructor(x:number,y:number){
+        this.x=x;
+        this.y=y;
+    }
+}
\ No newline at end of file

src/addGame.ts

-export function addGame(stage: FYGE.Stage) {
+import Bullet from "./Bullet";
+import Enemy from "./Enemy";
+import MovableManager from "./MovableManager";
+import Vector2 from "./Vector2";
 
-const INITIAL_POSITION = { x: 0, y: 1000 };//初始位置
-const plane = stage.addChild(FYGE.Sprite.fromUrl('//yun.duiba.com.cn/spark/assets/hero_fly1.f292cb1c04589c6ee395fe29538d5385540755f7.png'));
-plane.position.set(INITIAL_POSITION.x,INITIAL_POSITION.y);
-const SPEED = 2;
-function onEnterFrame() { plane.y -= SPEED;  }
-plane.addEventListener(FYGE.Event.ENTER_FRAME, onEnterFrame);
+export function addGame(stage: FYGE.Stage) {
+    const movableManager = new MovableManager(stage);//创建管理器
+    const bullet = stage.addChild(new Bullet());//创建子弹并设置相关属性
+    bullet.position.set(0, 1000);
+    bullet.velocity = new Vector2(0, -8)
+    const enemy = stage.addChild(new Enemy());//创建敌机并设置相关属性
+    enemy.velocity = new Vector2(4, 2);
+    movableManager.add(bullet);
+    movableManager.add(enemy);
 }
\ No newline at end of file