Merge pull request #2 from LeeeeeeM/dev

add combo & strip platform
LeeeeeeM · Jul 26, 2024 · 5893bf3 · 5893bf3
2 parents 958053b + 66175ad
commit 5893bf3
Show file tree

Hide file tree

Showing 12 changed files with 294 additions and 98 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { useVisibile } from "./hooks/useVisible";
 import Game from "./Game/Game";
+import { flush, customFlush } from "./platform/utils";
 
 const TaskDemo = () => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -15,7 +16,7 @@ const TaskDemo = () => {
     }
 
     if (canvasRef.current) {
-      const game = new Game(canvasRef.current);
+      const game = new Game(canvasRef.current, flush);
       gameRef.current = game;
       (window as any).game = game;
       game.init();
@@ -42,7 +43,6 @@ const TaskDemo = () => {
       if (game?.isRunning?.()) {
         game.shootBullet();
       }
-      (window as any).game = game;
     };
 
     if (canvasRef.current) {

diff --git a/src/Game/Game.ts b/src/Game/Game.ts
@@ -2,22 +2,14 @@ import { Circle, Quadtree } from "@timohausmann/quadtree-ts";
 import Zombie from "./GameObject/Zombie";
 import Bullet from "./GameObject/Bullet";
 import Player from "./GameObject/Player";
-import GameObject from "./GameObject/GameObject";
-import {
-  BoundInterface,
-  BulletEnhancedInterface,
-  Position,
-  ZombieEnhanceInterface,
-} from "./type";
-import {
-  DEFAULT_BULLET_ENHANCE_OBJECT,
-  DEFAULT_ZOMBIE_BOSS_ENHANCE_OBJECT,
-  DEFAULT_ZOMBIE_ENHANCE_OBJECT,
-} from "./constants";
+import { BoundInterface, BulletEnhancedInterface } from "./type";
+import { DEFAULT_BULLET_ENHANCE_OBJECT } from "./constants";
 import ZombieSpawner from "./Spawner/ZombieSpawner";
 import ZombieBossSpawner from "./Spawner/ZombieBossSpawner";
 import BulletSpawner from "./Spawner/BulletSpawner";
-import { calculateRangeAngles } from "./utils";
+import { calculateAngle, calculateRangeAngles } from "./utils";
+
+let count = 0;
 
 class Game {
   public canvas: HTMLCanvasElement;
@@ -46,32 +38,46 @@ class Game {
 
   private active: boolean;
 
-  private canvasBounds: BoundInterface;
+  private canvasBound: BoundInterface;
+
+  // 画布刷新方法，不依赖与web环境
+  private flush: (fn: FrameRequestCallback) => void;
 
-  constructor(canvas: HTMLCanvasElement) {
+  constructor(
+    canvas: HTMLCanvasElement,
+    flush: (fn: FrameRequestCallback) => void
+  ) {
     this.canvas = canvas;
     this.ctx = this.canvas.getContext("2d")!;
+    this.flush = flush;
+
+    // 四叉树查找
     this.quadTree = new Quadtree({
       width: this.canvas.width,
       height: this.canvas.height,
     });
+
     this.zombies = new Map();
     this.bullets = new Map();
     this.explodeBullets = new Map();
-    this.running = false;
+    // 游戏玩家，目前是一个
     this.player = new Player(this.canvas.width / 2, this.canvas.height - 20);
+    // 锁定的射击对象，目前和玩家 1vs1
     this.shotTargetZombie = null;
-
+    // 游戏对象产生定时器
     this.zombieSpawner = new ZombieSpawner(this, 600);
     this.zombieBossSpawner = new ZombieBossSpawner(this, 10 * 1000);
     this.bulletSpawner = new BulletSpawner(this, 400);
-    this.active = false;
-    this.canvasBounds = {
+
+    this.canvasBound = {
       left: 0,
       right: this.canvas.width,
       top: 0,
       bottom: this.canvas.height,
     };
+    // 游戏状态
+    this.running = false;
+    this.active = false;
   }
 
   isActive() {
@@ -82,6 +88,10 @@ class Game {
     return this.player;
   }
 
+  getTargetZombie() {
+    return this.shotTargetZombie;
+  }
+
   isRunning() {
     return this.running;
   }
@@ -92,7 +102,7 @@ class Game {
   }
 
   init() {
-    // todo 初始化的一些操作
+    // 初始化的一些操作
     this.update = this.update.bind(this);
     this.draw = this.draw.bind(this);
     this.gameLoop = this.gameLoop.bind(this);
@@ -143,7 +153,7 @@ class Game {
     this.update();
     this.draw();
     this.handleCollisions();
-    requestAnimationFrame(this.gameLoop);
+    this.flush(this.gameLoop);
   }
 
   // 更新距离最近的僵尸
@@ -167,21 +177,38 @@ class Game {
 
     for (let [, zombie] of this.zombies) {
       zombie.update();
-      if (zombie.isOffCanvas(this.canvasBounds)) {
+      if (zombie.isOffCanvas(this.canvasBound)) {
         this.zombies.delete(zombie.count);
-        this.quadTree.remove(zombie, true);
+        this.quadTree.remove(zombie);
       } else {
-        this.updateTargetZombie(this.canvas.height - 20, zombie);
-        this.quadTree.update(zombie, true);
+        this.updateTargetZombie(this.player.getStandY(), zombie);
+        this.quadTree.update(zombie);
         // this.quadTree.insert(zombie);
       }
     }
     for (let [, bullet] of this.bullets) {
-      bullet.checkBound(this.canvasBounds);
+      bullet.checkBound(this.canvasBound);
       bullet.update();
 
-      if (bullet.isOffCanvas(this.canvasBounds) && !bullet.hasLeftCollision()) {
+      if (bullet.isOffCanvas(this.canvasBound) && !bullet.hasLeftCollision()) {
         this.bullets.delete(bullet.count);
+        Bullet.release(bullet);
+      }
+    }
+  }
+
+  drawQuadtree(node: Quadtree<Circle>, ctx: CanvasRenderingContext2D) {
+    if (node.nodes.length === 0) {
+      ctx.strokeStyle = `rgba(127,255,212,0.25)`;
+      ctx.strokeRect(
+        node.bounds.x,
+        node.bounds.y,
+        node.bounds.width,
+        node.bounds.height
+      );
+    } else {
+      for (let i = 0; i < node.nodes.length; i = i + 1) {
+        this.drawQuadtree(node.nodes[i], ctx);
       }
     }
   }
@@ -220,14 +247,15 @@ class Game {
           if (zombie.isDead()) {
             this.player.addKill(zombie);
             this.zombies.delete(zombie.count);
-            this.quadTree.remove(zombie, true);
+            this.quadTree.remove(zombie);
             break; // 避免重复删除
           }
         }
       }
 
       // 移除所有的爆炸子弹
       this.explodeBullets.delete(explodeBullet.count);
+      Bullet.release(explodeBullet);
     }
 
     for (let [, bullet] of this.bullets) {
@@ -249,84 +277,45 @@ class Game {
           if (zombie.isDead()) {
             this.player.addKill(zombie);
             this.zombies.delete(zombie.count);
-            this.quadTree.remove(zombie, true);
+            this.quadTree.remove(zombie);
             break; // 避免重复删除
           }
         }
       }
     }
   }
 
-  calculateAngle(source: GameObject | null, target: GameObject | null): number {
-    if (!target || !source) {
-      // 如果没有则默认为90度垂直
-      return Math.PI / 2;
-    }
-    const dx = source.x - target.x;
-    const dy = source.y - target.y;
-    return Math.atan2(dy, dx);
-  }
-
-  drawQuadtree(node: Quadtree<Circle>, ctx: CanvasRenderingContext2D) {
-    if (node.nodes.length === 0) {
-      ctx.strokeStyle = `rgba(127,255,212,0.25)`;
-      ctx.strokeRect(
-        node.bounds.x,
-        node.bounds.y,
-        node.bounds.width,
-        node.bounds.height
-      );
-    } else {
-      for (let i = 0; i < node.nodes.length; i = i + 1) {
-        this.drawQuadtree(node.nodes[i], ctx);
-      }
-    }
-  }
-
   shootBullet() {
     const player = this.player;
     const target = this.shotTargetZombie;
     const angles = calculateRangeAngles(player.trajectoryCount);
-    // const fireTimes = player.fireTimes;
 
     for (let angle of angles) {
-      const adjustedAngle = this.calculateAngle(player, target);
+      const adjustedAngle = calculateAngle(player, target);
       const enhanced: BulletEnhancedInterface = {
         ...DEFAULT_BULLET_ENHANCE_OBJECT,
         damage: player.damage,
         angle: adjustedAngle + angle,
         collisionWallTimes: player.collisionWallTimes,
       };
-      //   for (let i = 0; i < fireTimes; i++) {
-      // const deltaHeight = 20 * i;
-      // const deltaWidth = deltaHeight / Math.tan(enhanced.angle);
-
-      const newBullet = new Bullet(
+      const newBullet = Bullet.createBullet(
         player.getStandX(),
         player.getStandY(),
         enhanced
       );
       this.bullets.set(newBullet.count, newBullet);
-      //   }
     }
   }
 
-  addZombie(x: number) {
-    const enhanced: ZombieEnhanceInterface = {
-      ...DEFAULT_ZOMBIE_ENHANCE_OBJECT,
-    };
-    const newZombie = new Zombie(x, 0, enhanced);
-    this.zombies.set(newZombie.count, newZombie);
-    this.quadTree.insert(newZombie);
+  addBulletInternal(bullets: Bullet[]) {
+    bullets.forEach((bullet) => {
+      this.bullets.set(bullet.count, bullet);
+    });
   }
 
-  addZombieBoss(x: number) {
-    const enhanced: ZombieEnhanceInterface = {
-      ...DEFAULT_ZOMBIE_BOSS_ENHANCE_OBJECT,
-    };
-    const newZombie = new Zombie(x, 0, enhanced);
-    this.zombies.set(newZombie.count, newZombie);
-    this.quadTree.insert(newZombie);
+  addZombieInternal(zombie: Zombie) {
+    this.zombies.set(zombie.count, zombie);
+    this.quadTree.insert(zombie);
   }
 }
 

diff --git a/src/Game/GameObject/Bullet.ts b/src/Game/GameObject/Bullet.ts
@@ -1,14 +1,18 @@
 import GameObject from "./GameObject";
 import { DEFAULT_BULLET_ENHANCE_OBJECT } from "../constants";
 import { GameObjectEnum } from "../enum";
-import { BoundInterface, BulletEnhancedInterface, VelocityVector } from "../type";
+import {
+  BoundInterface,
+  BulletEnhancedInterface,
+  VelocityVector,
+} from "../type";
 
 class Bullet extends GameObject {
   public explodeRadius: number;
-  private speed: number;
-  private angle: number;
   public damage: number;
   public explodeDamage: number;
+  private speed: number;
+  private angle: number;
   private velocity: VelocityVector;
   private collisionWallTimes: number;
   constructor(
@@ -26,6 +30,42 @@ class Bullet extends GameObject {
     this.velocity = this._calculateVelocityVector();
   }
 
+  static bulletPool: Bullet[] = [];
+
+  static bulletPoolCount = 100;
+
+  static createBullet(x: number, y: number, enhanced: BulletEnhancedInterface): Bullet {
+    let newBullet = Bullet.bulletPool.pop();
+    if (!newBullet) {
+      return new Bullet(x, y, enhanced);
+    }
+    newBullet.reset(x, y, enhanced);
+    return newBullet;
+  }
+
+  static release(bullet: Bullet) {
+    if (Bullet.bulletPool.length < Bullet.bulletPoolCount) {
+      Bullet.bulletPool.push(bullet);
+    }
+  }
+
+  reset(
+    x: number,
+    y: number,
+    enhanced: BulletEnhancedInterface = DEFAULT_BULLET_ENHANCE_OBJECT
+  ) {
+    this.x = x;
+    this.y = y;
+    this.r = enhanced.radius;
+    this.explodeRadius = enhanced.explodeRadius;
+    this.collisionWallTimes = enhanced.collisionWallTimes;
+    this.angle = enhanced.angle;
+    this.damage = enhanced.damage;
+    this.explodeDamage = enhanced.explodeDamage;
+    this.speed = enhanced.speed;
+    this.velocity = this._calculateVelocityVector();
+  }
+
   hasLeftCollision() {
     return this.collisionWallTimes > 0;
   }
@@ -89,4 +129,4 @@ class Bullet extends GameObject {
   }
 }
 
-export default Bullet;
+export default Bullet;
diff --git a/src/Game/GameObject/GameObject.ts b/src/Game/GameObject/GameObject.ts
@@ -28,10 +28,6 @@ class GameObject extends Circle {
 
   draw(ctx: CanvasRenderingContext2D) {}
 
-  isZombie() {
-    return this.type === GameObjectEnum.ZOMBIE;
-  }
-
   circleIntersect(other: Circle) {
     const dx = this.x - other.x;
     const dy = this.y - other.y;