蛇换皮

src/pages/GamePage/Components/ElementMgr.ts

@@ -5,12 +5,15 @@ import { EleConfig, EleData, mapSize } from "@/pages/GamePage/config/Config.ts";
 
 const foodWeight = new Weight<EleData>();
 const negWeight = new Weight<EleData>();
-for (let eleConfigKey in EleConfig) {
-  const { neg, weight } = EleConfig[eleConfigKey];
-  if (neg) {
-    negWeight.add(EleConfig[eleConfigKey], weight);
-  } else {
-    foodWeight.add(EleConfig[eleConfigKey], weight);
+
+function initWeight() {
+  for (let eleConfigKey in EleConfig) {
+    const { neg, weight } = EleConfig[eleConfigKey];
+    if (neg) {
+      negWeight.add(EleConfig[eleConfigKey], weight);
+    } else {
+      foodWeight.add(EleConfig[eleConfigKey], weight);
+    }
   }
 }
 
@@ -25,17 +28,19 @@ export class ElementMgr {
 
     this.footCtn = this.root.addChild(new Container());
     this.negCtn = this.root.addChild(new Container());
+
+    initWeight();
   }
 
   start() {
     Tween.get(this, { loop: true })
-      .wait(1000)
+      .wait(1500)
       .call(() => {
         this.flushFood();
       });
 
     Tween.get(this, { loop: true })
-      .wait(1500)
+      .wait(2000)
       .call(() => {
         this.flushNeg();
       })

src/pages/GamePage/Components/Snake.ts

@@ -4,6 +4,8 @@ import { GameConfig, mapSize } from "@/pages/GamePage/config/Config.ts";
 import { Circle } from "detect-collisions";
 import { collisionSys } from "@/pages/GamePage/GamePage.tsx";
 import { Tween } from "@/pages/GamePage/tween";
+import { reaction } from "mobx";
+import gameStore from "@/store/gameStore.ts";
 
 export class Snake extends Container {
   head: Sprite = null;
@@ -26,6 +28,23 @@ export class Snake extends Container {
   init() {
     this.initUI();
     this.initPhy();
+    reaction(
+      () => gameStore.gameInfo.level,
+      (level) => {
+        const { levelCfg } = GameConfig;
+        const { skin } = levelCfg[level];
+        this.setSkin(skin);
+      },
+      { fireImmediately: true }
+    );
+  }
+
+  setSkin(skin: string) {
+    this.bodyScale = 1;
+    this.head.texture = Assets.get(`蛇/${skin}/head.png`);
+    this.bodyArr.forEach((body, i) => {
+      body.texture = Assets.get(`蛇/${skin}/body${i % 2}.png`);
+    });
   }
 
   initUI() {
@@ -118,7 +137,10 @@ export class Snake extends Container {
 
     let len = this.bodyArr.length;
 
-    const newBody = new Sprite(Assets.get("蛇/初级/body0.png"));
+    const { levelCfg } = GameConfig;
+    const { skin } = levelCfg[gameStore.gameInfo.level];
+
+    const newBody = new Sprite(Assets.get(`蛇/${skin}/body${len % 2}.png`));
 
     const pre = this.bodyArr[len - 1] || this.head;
 
@@ -132,7 +154,7 @@ export class Snake extends Container {
   }
 
   positions: PointData[] = []; // 存储历史位置点
-  private readonly SEGMENT_SPACING = 6.3; // 增加节点间距
+  private readonly SEGMENT_SPACING = 5; // 增加节点间距
 
   moveTime = 1 / 60;
   totalTime = 0;

src/pages/GamePage/Game.ts

@@ -93,7 +93,7 @@ export class Game extends Container {
   }
 
   addScore(score: number, pos: PointData) {
-    gameStore.gameInfo.score += score;
+    gameStore.addScore(score);
     const bubble = this.mapCtn.addChild(new ScoreBubble(score));
     bubble.position.set(pos.x + 20, pos.y - 20);
   }

src/pages/GamePage/config/Config.ts

@@ -28,6 +28,28 @@ export const GameConfig = {
   magnetScale: 4,
   initEnergy: 10,
   growthThreshold: 2,
+  levelCfg: [
+    {
+      score: 0,
+      skin: "初级",
+      level: 0,
+    },
+    {
+      score: 30,
+      skin: "红色",
+      level: 1,
+    },
+    {
+      score: 60,
+      skin: "黄色",
+      level: 2,
+    },
+    {
+      score: 90,
+      skin: "蓝色",
+      level: 3,
+    },
+  ],
 }
 
 export const EleConfig: { [key in Ele]: EleData } = {
@@ -41,7 +63,7 @@ export const EleConfig: { [key in Ele]: EleData } = {
     cls: Filiform,
     texture: "元素/丝状菌.png",
     weight: 3,
-    score: 2,
+    score: 20,
   },
   [Ele.Molecule]: {
     cls: Molecule,

src/store/gameStore.ts

@@ -5,6 +5,7 @@ import {Toast} from "@grace/ui";
 import {AESEncrypt} from "@/utils/Crypto.ts";
 import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
 import HomePage from "@/pages/HomePage/HomePage.tsx";
+import { GameConfig } from "@/pages/GamePage/config/Config.ts";
 
 class GameStore {
 
@@ -39,9 +40,28 @@ class GameStore {
   gameInfo: {
     score: number,
     remainTimes: number,
+    level: number,
+    maxScore: number,
   } = {
     score: 0,
     remainTimes: 0,
+    level: 0,
+    maxScore: 0,
+  }
+
+  addScore(s: number) {
+    const score = this.gameInfo.score + s;
+    this.gameInfo.score = score;
+    this.gameInfo.maxScore = Math.max(score, this.gameInfo.maxScore);
+
+    const { levelCfg } = GameConfig;
+
+    for (let i = levelCfg.length - 1; i >= 0; i--) {
+      if (score >= levelCfg[i].score) {
+        this.gameInfo.level = i;
+        break;
+      }
+    }
   }
 
   async submit(score: number) {