feat:添加render模式

index.html

@@ -55,6 +55,7 @@
     <div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
         <canvas id="canvas" style="width: 100%;height: 100%"></canvas>
     </div>
+    <canvas id="renderCanvas"  style="pointer-events: none; position: absolute; width: 100%;height: 100%"></canvas>
     <!-- 帧率检测 -->
     <!-- <script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script> -->
     <!-- <script src="https://yun.duiba.com.cn/db_games/libs0126/stats.js"></script> -->

src/scenes/GameScene.ts

@@ -4,7 +4,13 @@ import Role from "./components/Role";
 import AddProp from "./components/AddProp";
 import ObstacleProp from "./components/ObstacleProp";
 import MapItem from "./components/MapItem";
-import { getWebData, WebNetName, sendWebNet, sendLog, LOG_TYPE } from "../webNet";
+import {
+  getWebData,
+  WebNetName,
+  sendWebNet,
+  sendLog,
+  LOG_TYPE,
+} from "../webNet";
 import { showPanel, showToast, changeScene } from "../../module/ctrls";
 import { GuidePanel } from "../panels/GuidePanel";
 import { StartScene } from "./StartScene";
@@ -15,8 +21,12 @@ import { Tools } from "../Tools";
 import { playAllSound, stopAllSound, cusPlaySound } from "../common/SoundWeb";
 import { layers } from "../../module/views/layers";
 export class GameScene extends Scene {
-    get groupNames() { return ["GameScene"] };
-    get skinName() { return "GameScene" };
+  get groupNames() {
+    return ["GameScene"];
+  }
+  get skinName() {
+    return "GameScene";
+  }
 
   bg: FYGE.Sprite;
   cloud: FYGE.Sprite;
@@ -33,78 +43,71 @@ export class GameScene extends Scene {
   close: FYGE.Sprite;
   open: FYGE.Sprite;
 
-
   jumpLock = false;
   isonce = false;
 
   public static instance: GameScene;
-    initUi() {
-
-    }
+  initUi() {}
   start(data) {
     super.start();
-        sendLog(LOG_TYPE.EXPOSURE,37)
-        GameScene.instance = this
+    sendLog(LOG_TYPE.EXPOSURE, 37);
+    GameScene.instance = this;
     showPanel(GuidePanel);
 
     if (Tools.isMusic) {
       this.open.visible = true;
-            this.close.visible = false
-            cusPlaySound("bg", true)
+      this.close.visible = false;
+      cusPlaySound("bg", true);
     } else {
       this.open.visible = false;
-            this.close.visible = true
+      this.close.visible = true;
     }
-        this.createPhyWorld()
+    this.createPhyWorld();
     this.bgCon = this.addChild(new FYGE.Container());
-        this.setChildIndex(this.bgCon, 2)
+    this.setChildIndex(this.bgCon, 2);
     this.initMap();
-        this.scorenum.text = "0"
-        this.cdnum.text = StartScene.instance.gameInfo.duration
-
-
+    this.scorenum.text = "0";
+    this.cdnum.text = StartScene.instance.gameInfo.duration;
   }
 
   score;
   time;
 
-
   changeMusic() {
-        this.open.visible = !this.open.visible
-        this.close.visible = !this.close.visible
-        Tools.isMusic = !Tools.isMusic
+    this.open.visible = !this.open.visible;
+    this.close.visible = !this.close.visible;
+    Tools.isMusic = !Tools.isMusic;
     if (Tools.isMusic) {
       // playAllSound()
-            cusPlaySound("bg", true)
+      cusPlaySound("bg", true);
     } else {
-            stopAllSound()
+      stopAllSound();
     }
   }
   upDateInfo() {
-        this.score = 0
-        this.time = StartScene.instance.gameInfo.duration
-        this.scorenum.text = this.score + ""
-        this.cdnum.text = this.time + ""
-        this.startGame()
-        this.countDown(this.time)
+    this.score = 0;
+    this.time = StartScene.instance.gameInfo.duration;
+    this.scorenum.text = this.score + "";
+    this.cdnum.text = this.time + "";
+    this.startGame();
+    this.countDown(this.time);
   }
   countDown(time) {
     this.timer = setTimeout(() => {
       if (Number(this.cdnum.text) <= 0) {
         clearTimeout(this.timer);
         this.composites.remove(this.world, this._role.phyBody);
-                console.log("zale")
-                this.gameOver()
-                return
+        console.log("zale");
+        this.gameOver();
+        return;
       }
-            this.cdnum.text = Number(this.cdnum.text) - 1 + ''
-            this.countDown(Number(this.cdnum.text))
-        }, 1000)
+      this.cdnum.text = Number(this.cdnum.text) - 1 + "";
+      this.countDown(Number(this.cdnum.text));
+    }, 1000);
   }
 
-
   startGame() {
-        this.isonce = false
+    this.isonce = false;
     this.addRole();
 
     this.addEventListener(FYGE.Event.ENTER_FRAME, this.onFarm, this);
@@ -115,7 +118,7 @@ export class GameScene extends Scene {
 
   addRole() {
     let offset = (1624 - this.stage.viewRect.height) / 2;
-        let role = this._role = new Role();
+    let role = (this._role = new Role());
     role.fx = 380;
     role.fy = 980 - offset;
 
@@ -130,84 +133,123 @@ export class GameScene extends Scene {
   addPropsMap = new Map();
   obstaclePropMap = new Map();
   private createPhyWorld() {
-        const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter;
-        this.engine = Engine.create(
-            {
-                enableSleeping: true
-            }
-        );
+    const { Engine, Render, Runner, Composite, Bodies, World, Composites } =
+      Matter;
+
+    this.engine = Engine.create({
+      enableSleeping: true,
+    });
     this.world = this.engine.world;
     this.engine.gravity.y = 1.5;
 
+    // 创建一个渲染器
+    const render = Render.create({
+      //   element: document.body,
+
+      canvas: document.getElementById("renderCanvas"),
+      engine: this.engine,
+      options: {
+        width: document.body.clientWidth,
+        height: document.body.clientHeight,
+        pixelRatio:window.devicePixelRatio, // 设置像素比
+        background: "rgba(255,255,255,0.3)", // 全局渲染模式时背景色
+        wireframeBackground: "rgba(255,255,255,0.3)", // 线框模式时背景色
+        hasBounds: false,
+        wireframes: false, // 线框模式
+        showSleeping: true, // 刚体睡眠状态
+        showDebug: false, // Debug 信息
+        showBroadphase: false, // 粗测阶段
+        showBounds: true, // 刚体的界限
+        showVelocity: false, // 移动刚体时速度
+        showCollisions: false, // 刚体碰撞点
+        showSeparations: false, // 刚体分离
+        showAxes: false, // 刚体轴线
+        showPositions: true, // 刚体位置
+        showAngleIndicator: false, // 刚体转角指示
+        showIds: true, // 显示每个刚体的 ID
+        showVertexNumbers: false, // 刚体顶点数
+        showConvexHulls: false, // 刚体凸包点
+        showInternalEdges: false, // 刚体内部边界
+        showMousePosition: false, // 鼠标约束线
+      },
+    });
+    Render.run(render);
+
     /** 真正运行 */
     this.runner = Runner.create();
     Runner.run(this.runner, this.engine);
     // @ts-ignore
     this.composites = Composite;
 
-        Matter.Events.on(this.engine, "collisionStart", this.onCollisionStart.bind(this));
+    Matter.Events.on(
+      this.engine,
+      "collisionStart",
+      this.onCollisionStart.bind(this)
+    );
     Matter.Events.on(this.engine, "tick", this.onCollisionTick.bind(this));
-
-
-    }
-    onCollisionTick(e) {
   }
+  onCollisionTick(e) {}
   onCollisionStart(e) {
     let pairs = e.pairs;
     pairs.map((p) => {
       // 🌹与人的碰撞
       if (p.bodyB == this._role.phyBody || p.bodyA == this._role.phyBody) {
-                if (p.bodyB.gameType?.split("_")[0] == 'addProp' || p.bodyA.gameType?.split("_")[0] == 'addProp') {
-                    console.log("加分")
-                    let body = p.bodyB.gameType?.split("_")[0] == 'addProp' ? p.bodyB : p.bodyA;
+        if (
+          p.bodyB.gameType?.split("_")[0] == "addProp" ||
+          p.bodyA.gameType?.split("_")[0] == "addProp"
+        ) {
+          console.log("加分");
+          let body =
+            p.bodyB.gameType?.split("_")[0] == "addProp" ? p.bodyB : p.bodyA;
           let prop = this.addPropsMap.get(body.id);
-                    let num = 1
+          let num = 1;
           if (body.gameType.split("_")[1] == "tian") {
-                        num = 1
+            num = 1;
           } else {
-                        num = 2
+            num = 2;
           }
-                    this._role.addScore('+' + num, '#ffffff')
+          this._role.addScore("+" + num, "#ffffff");
           if (Tools.isMusic) {
-                        cusPlaySound("get", false)
+            cusPlaySound("get", false);
           }
 
-                    this.scorenum.text = Number(this.scorenum.text) + num + '';
-                    this.score += num
+          this.scorenum.text = Number(this.scorenum.text) + num + "";
+          this.score += num;
           this.composites.remove(this.world, prop.phyBody);
           prop.destroy();
-                    this.bgCon.removeChild(prop)
+          this.bgCon.removeChild(prop);
           this.addPropsMap.delete(body.id);
-
-                } else if (p.bodyB.gameType == 'dieProp' || p.bodyA.gameType == 'dieProp') {
+        } else if (
+          p.bodyB.gameType == "dieProp" ||
+          p.bodyA.gameType == "dieProp"
+        ) {
           // 死亡💀
-                    console.log("死亡")
+          console.log("死亡");
           if (Tools.isMusic) {
-                        cusPlaySound("fail", false)
+            cusPlaySound("fail", false);
           }
-                    let body = p.bodyB.gameType == 'dieProp' ? p.bodyB : p.bodyA;
+          let body = p.bodyB.gameType == "dieProp" ? p.bodyB : p.bodyA;
           let prop = this.obstaclePropMap.get(body.id);
           this.composites.remove(this.world, prop.phyBody);
           prop.destroy();
-                    this.bgCon.removeChild(prop)
+          this.bgCon.removeChild(prop);
           this.obstaclePropMap.delete(body.id);
           // this.removeWorld()
           this.composites.remove(this.world, this._role.phyBody);
           clearTimeout(this.timer);
-                    this.gameOver()
+          this.gameOver();
         } else {
           if (!this.jumpLock) {
             if (Tools.isMusic) {
-                            cusPlaySound("jump", false)
+              cusPlaySound("jump", false);
             }
-                        this._role.jump()
+            this._role.jump();
             this.jumpLock = true;
             setTimeout(() => {
-                            this.jumpLock = false
-                        }, 300)
+              this.jumpLock = false;
+            }, 300);
           }
         }
-
       }
     });
   }
@@ -217,18 +259,12 @@ export class GameScene extends Scene {
     this.createLineItem(stageHeight - 240, 380, false);
 
     for (let i = 0; i < 10; i++) {
-
       if (i < 4) {
-                this.createLineItem(stageHeight - (240 * (i + 2)), 0, false);
-
+        this.createLineItem(stageHeight - 240 * (i + 2), 0, false);
       } else {
-                this.createLineItem(stageHeight - (240 * (i + 2)));
-
+        this.createLineItem(stageHeight - 240 * (i + 2));
       }
-
     }
-
-
   }
   mapList = [];
   createLineItem(h, x?: number, isprop = true) {
@@ -243,158 +279,167 @@ export class GameScene extends Scene {
           let addProp = new AddProp();
           addProp.fx = nx;
           addProp.fy = h - 25;
-                    this.bgCon.addChildAt(addProp, 0)
+          this.bgCon.addChildAt(addProp, 0);
           this.composites.add(this.world, [addProp.phyBody]);
           this.addPropsMap.set(addProp.phyBody.id, addProp);
           break;
         case rate >= 19 && rate <= 20:
           // 添加障碍元素
-                    let obstacleProp = new ObstacleProp()
+          let obstacleProp = new ObstacleProp();
           obstacleProp.fx = nx;
           obstacleProp.fy = h - 40;
-                    this.bgCon.addChildAt(obstacleProp, 0)
+          this.bgCon.addChildAt(obstacleProp, 0);
           this.composites.add(this.world, [obstacleProp.phyBody]);
 
-                    this.obstaclePropMap.set(obstacleProp.phyBody.id, obstacleProp)
-                    break
+          this.obstaclePropMap.set(obstacleProp.phyBody.id, obstacleProp);
+          break;
         default:
-
-                    break
-
+          break;
       }
     }
 
     let mapItem = new MapItem();
     mapItem.fx = nx;
-        mapItem.fy = h
-        this.bgCon.addChildAt(mapItem, 0)
+    mapItem.fy = h;
+    this.bgCon.addChildAt(mapItem, 0);
     this.composites.add(this.world, [mapItem.phyBody]);
 
-
     let spriteItem = this.createOtherItem(nx, h);
-        this.mapList.push([mapItem, spriteItem])
-
+    this.mapList.push([mapItem, spriteItem]);
   }
 
   createOtherItem(x, h) {
     let dx = Math.floor(Math.random() * 280 + 90);
 
     if (dx + 90 > x - 90) {
-            dx = dx + 310
+      dx = dx + 310;
     }
 
     let mapItem = new MapItem();
     mapItem.fx = dx;
-        mapItem.fy = h
+    mapItem.fy = h;
     this.bgCon.addChildAt(mapItem, 0);
     this.composites.add(this.world, [mapItem.phyBody]);
 
-        return mapItem
+    return mapItem;
   }
   timer = null;
   onFarm() {
     let roleY = this._role.y + this.bgCon.y;
 
     if (roleY < 600) {
-            this.moveMap(600 - roleY)
+      this.moveMap(600 - roleY);
     }
 
     let lastLine = this.mapList[0],
       lastItem = lastLine[0];
     if (lastItem.y + this.bgCon.y > this.stage.stageHeight + 10) {
-            lastLine.forEach(item => {
+      lastLine.forEach((item) => {
         this.composites.remove(this.world, item.phyBody);
         item.destroy();
-                this.bgCon.removeChild(item)
-            })
+        this.bgCon.removeChild(item);
+      });
 
-            this.mapList.shift()
+      this.mapList.shift();
     }
 
-
     let firstLine = this.mapList[this.mapList.length - 1],
       firstItem = firstLine[0];
 
     if (firstItem.y + this.bgCon.y > -100) {
-            this.createLineItem(firstItem.y - 240)
+      this.createLineItem(firstItem.y - 240);
     }
 
     // console.log(this._role.y,this.bgCon.y,layers.stageHeight)
-        if (this._role.y >= -(this.bgCon.y-1624)) {
+    if (this._role.y >= -(this.bgCon.y - 1624)) {
       if (!this.isonce) {
         this.composites.remove(this.world, this._role.phyBody);
-                console.log("siwang")
+        console.log("siwang");
         clearTimeout(this.timer);
-                this.gameOver()
+        this.gameOver();
         // 复活需要初始化
-                this.isonce = true
+        this.isonce = true;
       }
     }
-
   }
   moveMap(y) {
     this.bgCon.y = this.bgCon.y + y;
   }
 
-    removeWorld(){
-        this.composites.clear(this.world)
+  removeWorld() {
+    this.composites.clear(this.world);
     // console.log(this.composites)
 
     this.mapList = [];
-        this.addPropsMap.clear()
-        this.obstaclePropMap.clear()
-        console.log(this.obstaclePropMap)
-        console.log(this.addPropsMap)
-        console.log(this.mapList)
-
+    this.addPropsMap.clear();
+    this.obstaclePropMap.clear();
+    console.log(this.obstaclePropMap);
+    console.log(this.addPropsMap);
+    console.log(this.mapList);
   }
   //游戏结束
   async gameOver() {
     this.removeEventListener(FYGE.Event.ENTER_FRAME, this.onFarm, this);
-        this.removeWorld()
-        let startInfo = getWebData(WebNetName.startGame).data.currInfo
-        let timestamp = new Date().getTime()
+    this.removeWorld();
+    let startInfo = getWebData(WebNetName.startGame).data.currInfo;
+    let timestamp = new Date().getTime();
     //签名方式: md5(score=分值&startId=游戏开始id&timestamp=timestamp&key=key)
     //其中key的值为开始游戏接口里返回的key+固定值9ef16b33920749fb26e8fc2f2913150a,   例如1234569ef16b33920749fb26e8fc2f2913150a
-        let sign = duiba_md5(`score=${this.score}&startId=${startInfo.startId}&timestamp=${timestamp}&key=${startInfo.key + "9ef16b33920749fb26e8fc2f2913150a"}`)
-        const { success, data, message } = await sendWebNet(WebNetName.submitGame, { score: this.score, sign: sign, code: startInfo.code, timestamp: timestamp ,startId:startInfo.startId})
+    let sign = duiba_md5(
+      `score=${this.score}&startId=${
+        startInfo.startId
+      }&timestamp=${timestamp}&key=${
+        startInfo.key + "9ef16b33920749fb26e8fc2f2913150a"
+      }`
+    );
+    const { success, data, message } = await sendWebNet(WebNetName.submitGame, {
+      score: this.score,
+      sign: sign,
+      code: startInfo.code,
+      timestamp: timestamp,
+      startId: startInfo.startId,
+    });
 
     this._role.die(() => {
-            this.bgCon.removeChildren()
-            this.bgCon.y = 0
+      this.bgCon.removeChildren();
+      this.bgCon.y = 0;
       if (!success) {
-                showToast(message || "网络异常，请重试~")
-                changeScene(StartScene)
-                return
+        showToast(message || "网络异常，请重试~");
+        changeScene(StartScene);
+        return;
       }
       if (data.pass) {
-                showPanel(SuccessPanel)
+        showPanel(SuccessPanel);
       } else {
-                showPanel(FailPanel)
+        showPanel(FailPanel);
       }
-        })
-
-
+    });
   }
   initEvents() {
     super.initEvents();
     this.left.addEventListener(FYGE.MouseEvent.CLICK, () => {
-            sendLog(LOG_TYPE.CLICK,37)
-            this._role.leftMove()
-        })
+      sendLog(LOG_TYPE.CLICK, 37);
+      this._role.leftMove();
+    });
     this.right.addEventListener(FYGE.MouseEvent.CLICK, () => {
-            sendLog(LOG_TYPE.CLICK,37)
-            this._role.rightMove()
-        })
-        this.open.addEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this)
-        this.close.addEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this)
-
+      sendLog(LOG_TYPE.CLICK, 37);
+      this._role.rightMove();
+    });
+    this.open.addEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this);
+    this.close.addEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this);
   }
   removeEvents() {
     super.removeEvents();
-        this.open.removeEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this)
-        this.close.removeEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this)
-        stopAllSound()
+    this.open.removeEventListener(
+      FYGE.MouseEvent.CLICK,
+      this.changeMusic,
+      this
+    );
+    this.close.removeEventListener(
+      FYGE.MouseEvent.CLICK,
+      this.changeMusic,
+      this
+    );
+    stopAllSound();
   }
 }
-

yarn.lock

@@ -1058,6 +1058,11 @@
   resolved "http://npm.dui88.com:80/@types%2fnode/-/node-18.15.5.tgz#3af577099a99c61479149b716183e70b5239324a"
   integrity sha512-Ark2WDjjZO7GmvsyFFf81MXuGTA/d6oP38anyxWOL6EREyBKAxKoFHwBhaZxCfLRLpO8JgVXwqOwSwa7jRcjew==
 
+"@types/node@^16.18.18":
+  version "16.18.18"
+  resolved "http://npm.dui88.com:80/@types%2fnode/-/node-16.18.18.tgz#06cb0eeb5a0175d26d99b7acf4db613ca30cb07f"
+  integrity sha512-fwGw1uvQAzabxL1pyoknPlJIF2t7+K90uTqynleKRx24n3lYcxWa3+KByLhgkF8GEAK2c7hC8Ki0RkNM5H15jQ==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "http://npm.dui88.com:80/@webassemblyjs%2fast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"