fix: 血条

src/core/render/item.ts

@@ -305,6 +305,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
      */
     pos(x: number, y: number) {
         this.transform.setTranslate(x, y);
+        this.update();
     }
 
     /**

src/plugin/boss/towerBoss.ts

@@ -6,14 +6,7 @@ import { LayerGroup } from '@/core/render/preset/layer';
 import { RenderItem } from '@/core/render/item';
 import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
 import { Transform } from '@/core/render/transform';
-import {
+import { Animation, hyper, power, sleep, Transition } from 'mutate-animate';
-    Animation,
-    hyper,
-    power,
-    sleep,
-    TimingFn,
-    Transition
-} from 'mutate-animate';
 import { Container } from '@/core/render/container';
 import {
     ArrowProjectile,
@@ -139,26 +132,28 @@ export class TowerBoss extends BarrageBoss {
 
         const { x, y } = core.status.hero.loc;
         const cell = 32;
-        this.hitbox = new Hitbox.Rect(x * cell + 4, y * cell + 16, 24, 32);
+        this.hitbox = new Hitbox.Rect(x * cell + 2, y * cell + 2, 28, 28);
         this.state = core.status.hero;
     }
 
     override start() {
         super.start();
-        this.group.remove();
+        requestAnimationFrame(() => {
-        this.group.append(TowerBoss.shader);
+            this.group.remove();
-        TowerBoss.shader.append(this.mapDraw);
+            this.group.append(TowerBoss.shader);
-        this.healthBar.append(this.group);
+            TowerBoss.shader.append(this.mapDraw);
-        this.word.append(this.group);
+            this.healthBar.append(this.group);
-        this.main.append(this.group);
+            this.word.append(this.group);
+            this.main.append(this.group);
 
-        ArrowProjectile.init();
+            ArrowProjectile.init();
-        PortalProjectile.init();
+            PortalProjectile.init();
-        ThunderProjectile.init();
+            ThunderProjectile.init();
-        AttackProjectile.init();
+            AttackProjectile.init();
 
-        TowerBoss.effect.start();
+            TowerBoss.effect.start();
-        TowerBoss.effect.use();
+            TowerBoss.effect.use();
+        });
     }
 
     override end() {
@@ -276,8 +271,10 @@ export class TowerBoss extends BarrageBoss {
         // stageProgress:
         // 0: 开始; 1: 开始血条动画
 
-        this.healthBar.showStart();
+        if (this.stageProgress === 0) {
-        this.stageProgress = 1;
+            this.healthBar.showStart();
+            this.stageProgress = 1;
+        }
 
         if (time > 1500) {
             this.changeStage(TowerBossStage.Stage1, time);
@@ -726,7 +723,6 @@ class Word extends RenderItem {
 
 class HealthBar extends RenderItem {
     private trans: Transition = new Transition();
-    private ani: Animation = new Animation();
     /** 当前血条状态 */
     private status: HealthBarStatus = HealthBarStatus.Start;
 
@@ -734,12 +730,12 @@ class HealthBar extends RenderItem {
      * 初始化
      */
     init() {
-        this.trans.time(600).absolute().mode(power(4, 'out'));
+        this.trans.time(2000).absolute().mode(power(3, 'out'));
         this.trans.value.hp = 0;
-        this.ani.register('opacity', 0);
+        this.trans.value.x = 0;
-        this.ani.time(0).move(0, -24);
+        this.trans.value.y = -16;
 
-        this.size(480, 24);
+        this.size(480, 16);
         this.setHD(true);
         this.setZIndex(100);
     }
@@ -748,7 +744,10 @@ class HealthBar extends RenderItem {
      * 设置剩余血量
      */
     set(value: number) {
-        this.trans.transition('hp', value);
+        this.trans.time(2000).mode(power(3, 'out')).transition('hp', value);
+        this.delegateTicker(() => {
+            this.update();
+        }, 800);
     }
 
     /**
@@ -757,12 +756,15 @@ class HealthBar extends RenderItem {
     async showStart() {
         if (this.status !== HealthBarStatus.Start) return;
         this.delegateTicker(() => {
-            this.pos(this.ani.x, this.ani.y);
+            this.update();
-        }, 1000);
+        }, 2500);
-        this.ani.time(600).mode(hyper('sin', 'out')).absolute().move(0, 0);
+        this.trans
-        await sleep(300);
+            .time(600)
-        this.trans.transition('hp', 10000);
+            .mode(hyper('sin', 'out'))
-        await sleep(700);
+            .absolute()
+            .transition('y', 0);
+        this.trans.time(2000).mode(power(3, 'out')).transition('hp', 10000);
+        await sleep(1700);
         this.status = HealthBarStatus.Running;
     }
 
@@ -772,9 +774,13 @@ class HealthBar extends RenderItem {
     async showEnd() {
         if (this.status !== HealthBarStatus.Running) return;
         this.delegateTicker(() => {
-            this.pos(this.ani.x, this.ani.y);
+            this.update();
-        }, 700);
+        }, 2500);
-        this.ani.time(600).mode(hyper('sin', 'in')).absolute().move(0, -24);
+        this.trans
+            .time(600)
+            .mode(hyper('sin', 'in'))
+            .absolute()
+            .transition('y', -16);
         await sleep(700);
         this.status = HealthBarStatus.End;
     }
@@ -790,18 +796,29 @@ class HealthBar extends RenderItem {
         const r = Math.min(255 * 2 - ratio * 2 * 255, 255);
         const g = Math.min(ratio * 2 * 255, 255);
 
+        ctx.save();
+        ctx.translate(this.trans.value.x, this.trans.value.y);
+        ctx.fillStyle = '#bbb';
+        ctx.fillRect(2, 2, 480 - 4, 16 - 4);
+
         const color = `rgb(${Math.floor(r)},${Math.floor(g)},0)`;
-        ctx.globalAlpha = this.ani.value.opacity;
         ctx.fillStyle = color;
-        ctx.fillRect(2, 2, 480 - 4, 24 - 4);
+        ctx.fillRect(2, 2, (480 - 4) * ratio, 16 - 4);
+
+        ctx.font = '12px "normal"';
+        ctx.textBaseline = 'middle';
+        ctx.textAlign = 'right';
+        ctx.fillStyle = '#fff';
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 2;
+        ctx.strokeText(`${Math.floor(hp)} / 10000`, 472, 8);
+        ctx.fillText(`${Math.floor(hp)} / 10000`, 472, 8);
 
         ctx.lineWidth = 4;
         ctx.strokeStyle = '#fff';
-        ctx.strokeRect(0, 0, 480, 24);
+        ctx.shadowBlur = 4;
-
+        ctx.shadowColor = '#000';
-        ctx.font = '16px "normal';
+        ctx.strokeRect(0, 0, 480, 16);
-        ctx.textBaseline = 'middle';
+        ctx.restore();
-        ctx.textAlign = 'right';
-        ctx.fillText(`${hp} / 10000`, 472, 12);
     }
 }

src/plugin/boss/towerBossProjectile.ts

@@ -163,6 +163,11 @@ export class ArrowProjectile extends Projectile<TowerBoss> {
      */
     setData(direction: ProjectileDirection) {
         this.direction = direction;
+        if (direction === ProjectileDirection.Horizontal) {
+            this.hitbox.setSize(102, 32);
+        } else {
+            this.hitbox.setSize(32, 102);
+        }
     }
 
     isIntersect(hitbox: Hitbox.HitboxType): boolean {
@@ -181,6 +186,7 @@ export class ArrowProjectile extends Projectile<TowerBoss> {
         if (this.damaged) return false;
         target.hp -= this.damage;
         this.damaged = true;
+        core.drawHeroAnimate('hand');
         return true;
     }
 
@@ -647,6 +653,7 @@ export class ThunderBallProjectile extends Projectile<TowerBoss> {
         if (this.damaged) return false;
         this.damaged = true;
         target.hp -= this.damage;
+        core.playSound('electron.mp3');
         return true;
     }
 
@@ -890,6 +897,7 @@ export class ChainProjectile extends Projectile<TowerBoss> {
         if (this.damaged) return false;
         target.hp -= this.damage;
         this.damaged = true;
+        core.playSound('electron.mp3');
         return true;
     }