0913

index.html

@@ -67,7 +67,12 @@
 		var canvas = document.getElementById("canvas");
 		canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
 		canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
-		var main = new Main(canvas);
+		var main = new Main(canvas, {
+            points: 1000,
+            newUser: false,
+            spNum: 1,
+            hasCompleteGame: false
+        });
 		var mouseEvent = main.stage.onMouseEvent.bind(main.stage);
 		canvas.addEventListener("touchstart", mouseEvent, false);
 		canvas.addEventListener('touchmove', mouseEvent, false);

module/views/layers.ts

@@ -116,13 +116,13 @@ class Layers extends FYGE.Container {
      * 舞台中心点位置x
      */
     get stageCenterX(): number {
-        return this.stage.viewRect.x + this.stage.viewRect.width / 2;
+        return horizontalScreen ? this.stage.viewRect.x + this.stage.viewRect.width / 2 : this.stage.viewRect.y + this.stage.viewRect.height / 2;
     }
     /**
      * 舞台中心点位置y，layer位置做过偏移的就不对了，所以还是自行算吧
      */
     get stageCenterY(): number {
-         return this.stage.viewRect.y + this.stage.viewRect.height / 2;
+         return horizontalScreen ? this.stage.viewRect.y + this.stage.viewRect.height / 2 : this.stage.viewRect.x + this.stage.viewRect.width / 2;
     }
 }
 

resource/res.json

@@ -5,9 +5,13 @@
 			"name": "GameEle"
 		},
 		{
-			"keys": "GameScene-back.png,extra_scene.png,guidance4-1.png,guidance4-2.png,guidance4-3.png,guidance5-0.png,guidance5-1.png,guidance5-2.png,guidance5-3.png,guidance5-t.png,mission-goal.png,shortcut_icon.png,title-back.png",
+			"keys": "GameScene-back.png,GameScene-back2.png,extra-score.png,extra_scene.png,guidance4-1.png,guidance4-2.png,guidance4-3.png,guidance5-0.png,guidance5-1.png,guidance5-2.png,guidance5-3.png,guidance5-t.png,mission-goal.png,shortcut_icon.png,title-back.png",
 			"name": "GameScene"
 		},
+		{
+			"keys": "guidance1-1.png,guidance1-2.png,guidance1-3.png",
+			"name": "Guidance"
+		},
 		{
 			"keys": "_mooncake0-1.png,_mooncake0-2.png,_mooncake0.png,mooncake0-1.png,mooncake0-2.png,mooncake0.png,mooncake1-1.png,mooncake1-2.png,mooncake1.png,mooncake2-1.png,mooncake2-2.png,mooncake2.png,mooncake3-1.png,mooncake3-2.png,mooncake3.png,mooncake4-1.png,mooncake4-2.png,mooncake4.png",
 			"name": "MoonCake"
@@ -17,11 +21,11 @@
 			"name": "NumberTexture"
 		},
 		{
-			"keys": "toastBg.png,waitingBg.png,waitingRot.png",
+			"keys": "music_btn.png,music_btn_close.png,toastBg.png,waitingBg.png,waitingRot.png",
 			"name": "common"
 		},
 		{
-			"keys": "light.svga,pinkCake.svga",
+			"keys": "hand_guidance.svga,hand_swing.svga,light.svga,pinkCake.svga,spBtnIcon.svga,spBtnIcon2.svga,spShow.svga",
 			"name": "svga"
 		}
 	],

src/Main.ts

@@ -11,6 +11,10 @@ import { G_EVENT } from "./common/G_EVENT";
 import { Tools } from "./Tools";
 import IndexScene from './scenes/IndexScene';
 import GameScene from "./scenes/GameScene/GameScene";
+import NewGuyScene from "./scenes/NewGuyScene/NewGuyScene";
+import NewGuyScene2 from "./scenes/NewGuyScene/NewGuyScene2";
+import { GameSimCfg } from "./scenes/GameScene/GameConfig";
+import { getCurrentFps } from "./utils/utils";
 
 /**
  * 全局事件，为了和小程序交互
@@ -18,7 +22,11 @@ import GameScene from "./scenes/GameScene/GameScene";
  */
 export const GDispatcher = new FYGE.EventDispatcher();
 
-export const horizontalScreen = true
+export const horizontalScreen = false
+
+export function loadResource(){
+    return Promise.all([RES.loadGroup('svga'), RES.loadGroup("NumberTexture")])
+}
 
 export class Main {
     //主舞台
@@ -183,7 +191,6 @@ export class Main {
 
         // vtodo 横屏开发
         // layers.sceneLayer.x = layers.stageOffsetX
-
         console.log("初始化层级完成")
         // 初始化资源配置
         RES.loadConfig(ResJson);
@@ -209,14 +216,17 @@ export class Main {
         //     return;
         // }
 
-        // const gameSuccess = await Tools.getGameInfo();
-        // if (!gameSuccess) {
-        //     showToast("获取游戏信息失败");
-        //     return;
-        // }
-        
-        // vtodo 是否是新手
-        changeScene(GameScene);
+        const pageCfg = Tools.PAGE
+        var scene
+        if (pageCfg.newUser) {
+            scene = NewGuyScene
+        } else if (pageCfg.hasCompleteGame) {
+            scene = NewGuyScene2
+        } else {
+            scene = GameScene
+        }
+       
+        changeScene(scene);
     }
 }
 

src/SoundWeb.ts

@@ -21,7 +21,10 @@
 export const Soundurl = {
     bgm: '//yun.duiba.com.cn/spark/assets/9cda83ebb34225cfb5701f02eee9e190008cfffd.mp3',
     sucess: '//yun.duiba.com.cn/spark/assets/b8d82c2e432278dcc4fddfec5c6d585ac7cc5675.mp3',
-    fail: '//yun.duiba.com.cn/spark/assets/aa8c3daa5c0717d58649b95216bd27e06ee714da.mp3'
+    fail: '//yun.duiba.com.cn/spark/assets/aa8c3daa5c0717d58649b95216bd27e06ee714da.mp3',
+    moonCakeOut: '//yun.dui88.com/ec747b63-31d2-45ca-ba5a-6b1b8beefec4.mp3',
+    moonCakeBreak: '//yun.dui88.com/592006ed-1e80-4770-9ae5-95cdb47dab05.mp3',
+    boomBreak: '//yun.dui88.com/25f64850-b5d6-4507-b4df-35252282d2e2.mp3'
 }
 
 // private sounds = {

src/Tools.ts

@@ -38,7 +38,12 @@ export const myApp:AppType = getApp()
  */
 export class Tools {
 
-    public static PAGE;
+    public static PAGE = {
+        points: 100,
+        newUser: true,
+        spNum: 20,
+        hasCompleteGame: false
+    };
 
     /**
      * 缓存key

src/UI.ts

@@ -61,7 +61,8 @@ export default class UI {
     public static Sp(
         parent: Container,
         imageName: string,
-        x: number = 0, y: number = 0
+        x: number = 0, y: number = 0,
+        extraOpts?:any
     ): Sprite {
         var texture = RES.getRes(imageName)
         var sprite
@@ -71,6 +72,9 @@ export default class UI {
             sprite = Sprite.fromUrl(imageName)
         }
         sprite.position.set(x, y);
+        for (var k in extraOpts) {
+            sprite[k] = extraOpts[k]
+        }
         parent && parent.addChild(sprite);
         return sprite;
     }

src/common/countDown.ts

@@ -3,11 +3,11 @@
  * @param time 毫秒计算
  * @param onChange 根据时间倒计时的执行函数
  */
-export function countDown(time: number, onChange: (t: number) => void) {
+export function countDown(time: number, cb: Function, onChange?: (t: number) => void) {
     var timeObj = { a: time };
     FYGE.Tween.get(timeObj, {
         onChange: () => {
-            onChange(timeObj.a)
+            onChange && onChange(timeObj.a)
             // this.timeTxt.text = "" + Math.round(timeObj.a / 1000) + "s"
             // if (timeObj.a < 100) {
             //     FYGE.Tween.removeTweens(timeObj)
@@ -16,6 +16,7 @@ export function countDown(time: number, onChange: (t: number) => void) {
         }
     })
         .to({ a: 0 }, time)
+        .call(cb)
     //返回一个，可以中途取消
     return timeObj
 }

src/components/Blade.ts

@@ -24,24 +24,16 @@ export default class Blade extends FYGE.Graphics {
   }
 
   update() {
-    // if (this.points.length && Date.now() - this.points[0].dtime > 150) {
-    //   this.points.shift()
-    // }
-    super.update()
-  }
-
-  drawBlade(e?: FYGE.MouseEvent) {
     var that = this
     that.clear()
-    e && that.points.push(new Tpoint(e.localX, e.localY, Date.now()))
-    if (Date.now() - this.points[0].dtime > 100) {
-      this.points.shift()
-    }
-
-
+    var poslist = this.points
     var len = this.points.length
-    var pos = this.points
-    this.points.reduce((pre, curr, i) => {
+    for (var i = len - 1; i >= 0; i --) {
+      if (poslist[i] && Date.now() - poslist[i].dtime > 100) {
+        poslist.splice(0, i + 1)
+      }
+    }
+    this.points.length > 2 && this.points.reduce((pre, curr, i) => {
       var lineWidth = i / len > .5 ? (len - i) * 3 : i * 3
       that.lineStyle(lineWidth, 0xffffff)
       that.moveTo(pre.x, pre.y)
@@ -56,7 +48,8 @@ export default class Blade extends FYGE.Graphics {
       
       collisions.forEach((pair) => {
         // @ts-ignore
-        var eles = that.parent.gameEles || []
+        var eles = that.parent.allGameEles
+        if (!eles.length) return
         var halfEle = eles.find(mc => mc.phyBody?.id === pair.bodyA?.id && !mc.isDie)
         
         if (!halfEle) return
@@ -73,27 +66,16 @@ export default class Blade extends FYGE.Graphics {
             type: halfEle._type
           })
         }
-        
-        // 分开 vtodo 分数加
-        // if (halfEle) {
-        //   halfEle.doHalf()
-        //   // @ts-ignore
-        //   that.parent.dispatchEvent('collision', {x: halfEle.x, y: halfEle.y,
-        //     w: halfEle.width,
-        //     h: halfEle.height,
-        //     type: halfEle._type
-        //   })
-        // }
       })
 
       return curr
     })
-    // for (var i = 0; i < len - 1; i ++) {
-    //   var start = {
-    //     x: pos[i].x,
-    //     y: pos[i].y
-    //   }
-    // }
+
+    super.update()
+  }
+
+  drawBlade(e?: FYGE.MouseEvent) {
+    e && this.points.push(new Tpoint(e.localX, e.localY, Date.now()))
   }
 
   public reset() {

src/components/BoomEle.ts

 import Matter = require("matter-js")
 import { RES } from "../../module/RES"
 import { layers } from "../../module/views/layers"
-
+import { GameSimCfg } from "../scenes/GameScene/GameConfig"
+import { playSound, Soundurl } from "../SoundWeb"
+type Pos = {
+  x: number,
+  y: number
+}
 export default class BoomEle extends FYGE.Sprite {
   public phyBody: Matter.Body
   isDie: boolean = false
+  dt: number = -1
+  velocityPos: Pos
+  lt: number
+  isFire: boolean = false
 
   constructor() {
     super()
-    this.texture = RES.getRes('boom.png')
+    this.texture = RES.getRes('boom.png').clone()
     this.anchorY = this.height / 2
     this.anchorX = this.width / 2
-    this.initEvent()
 
     this.reset()
 
-    // FYGE.Tween.get(this, {loop: true})
-    //   .to({ rotation: 360 }, 5000)
+    FYGE.Tween.get(this, {loop: true})
+      .to({ rotation: 360 }, 5000)
   }
 
   initPhyBody() {
@@ -35,22 +43,29 @@ export default class BoomEle extends FYGE.Sprite {
 
   reset() {
     this.isDie = false
-    this.initPhyBody()
+    // this.initPhyBody()
     return this
   }
 
   comeDown() {
-    // FYGE.Tween.removeTweens(this)
+    FYGE.Tween.removeTweens(this)
     // @ts-ignore
     this._timer && clearTimeout(this._timer)
+    this.removeEventListener(FYGE.Event.ENTER_FRAME, this.syncPos, this)
   }
 
-  initEvent() {
-    this.once(FYGE.Event.ADDED_TO_STAGE, () => {
-      this.addEventListener(FYGE.Event.ENTER_FRAME, this.syncPos, this)
-    }, this)
+  addedToPhyScene(delay: number = 0, velocityPos?:Pos) {
+    this.dt = delay
+    this.velocityPos = velocityPos
+    this.lt = Date.now()
+    this.initPhyBody()
+    this.setPhyPos()
+    // @ts-ignore
+    this.parent.parent.composites.add(this.parent.parent.world, [this.phyBody])
+    this.addEventListener(FYGE.Event.ENTER_FRAME, this.syncPos, this)
   }
 
+
   set fx(n:number) {
     this.position.x = n
     this.setPhyPos()
@@ -63,8 +78,21 @@ export default class BoomEle extends FYGE.Sprite {
 
   // 同步坐标， 随着刚体进行更新
   syncPos() {
-    this.x = this.phyBody.position.x - this.width / 2 - layers.stageOffsetX;
-    this.y = this.phyBody.position.y - this.height / 2 - layers.stageOffsetX;
+    this.x = this.phyBody.position.x - this.width / 2;
+    this.y = this.phyBody.position.y - this.height / 2;
+
+    if (this.dt <= 0) return
+    var now = Date.now()
+    var spt = now - this.lt
+    if (spt > 1000) {
+      this.lt = now
+      return
+    }
+    this.lt = now
+    this.dt -= spt
+    if (this.dt <= 0) {
+      this.setVelocity()
+    }
   }
 
   setPhyPos() {
@@ -74,15 +102,31 @@ export default class BoomEle extends FYGE.Sprite {
     });
   }
 
+  setVelocity() {
+    this.isFire = true
+    GameSimCfg.isPlayMusic && playSound(Soundurl.moonCakeOut)
+    Matter.Body.setStatic(this.phyBody, false)
+    Matter.Body.setVelocity(this.phyBody, this.finalVelocity(this.velocityPos))
+  }
+
   doBoom() {
     if (this.isDie) return
     this.isDie = true
+    GameSimCfg.isPlayMusic && playSound(Soundurl.boomBreak)
     // this.destroy()
     console.log('Boom')
   }
 
   destroy() {
-    FYGE.Tween.removeTweens(this)
+    this.comeDown()
     super.destroy()
   }
+
+
+  finalVelocity(v) {
+    return {
+      x: v.x * GameSimCfg.fpsScale,
+      y: v.y * GameSimCfg.fpsScale
+    }
+  }
 }
\ No newline at end of file

src/components/CountDownComp.ts

@@ -38,9 +38,10 @@ export default class CountDownComp extends Module {
   }
 
   cdt: FYGE.TextField
+  p: FYGE.Sprite
   initUi() {
     UI.Sp(this, 'countdown-back.png')
-    var p = UI.Sp(this, 'clock-pointer.png', 28, 29)
+    var p = this.p = UI.Sp(this, 'clock-pointer.png', 28, 29)
     p.anchorTexture.set(0.5, 1)
     FYGE.Tween.get(p, {loop: true})
       .to({rotation: 360}, 5000)
@@ -88,6 +89,7 @@ export default class CountDownComp extends Module {
   }
 
   stop() {
+    FYGE.Tween.removeTweens(this.p)
     FYGE.Tween.removeTweens(this.tobj)
   }
 

src/components/MoonCake.ts

 import Matter = require("matter-js")
 import { RES } from "../../module/RES"
 import { layers } from "../../module/views/layers"
+import { GameSimCfg } from "../scenes/GameScene/GameConfig"
+import { playSound, Soundurl } from "../SoundWeb"
 import UI from "../UI"
 import { randomNum } from "../utils/utils"
 
+type Pos = {
+  x: number,
+  y: number
+}
+
 export default class MoonCake extends FYGE.Sprite {
   type: string = 'mooncake'
   imgName: string // 游戏元素
   isDie: boolean // 是否切中
   _type: number
+  dt: number = -1
+  velocityPos: Pos
+  isFire: boolean = false
 
   constructor(i?: number) {
     super()
-
-    this.initEvent()
     
     i != undefined && this.reset(i)
   }
@@ -29,19 +37,18 @@ export default class MoonCake extends FYGE.Sprite {
     this.anchorY = this.height / 2
     this.anchorX = this.width / 2
 
-    this.initPhyBody()
-    // 设置物理世界的坐标
-    this.setPhyPos()
     this.initHalfPart()
 
-    // FYGE.Tween.get(this, {loop: true})
-    //   .to({ rotation: 360 }, 5000)
+    FYGE.Tween.get(this, {loop: true})
+      .to({ rotation: 360 }, 5000)
     return this
   }
 
   initHalfPart() {
     (this.half_left || (this.half_left = UI.Sp(this, `${this.imgName}-1.png`))).position.set(0,0);
     (this.half_right || (this.half_right = UI.Sp(this, `${this.imgName}-2.png`))).position.set(0,0);
+    this.half_left.rotation = 0
+    this.half_right.rotation = 0
     this.half_left.texture = RES.getRes(`${this.imgName}-1.png`)
     this.half_right.texture = RES.getRes(`${this.imgName}-2.png`)
     this.half_right.visible = false;
@@ -51,9 +58,11 @@ export default class MoonCake extends FYGE.Sprite {
   comeDown() {
     this.half_left && FYGE.Tween.removeTweens(this.half_left)
     this.half_right && FYGE.Tween.removeTweens(this.half_right)
-    // FYGE.Tween.removeTweens(this)
+    FYGE.Tween.removeTweens(this)
+    this.rotation = 0
     // @ts-ignore
     this._timer && clearTimeout(this._timer)
+    this.removeEventListener(FYGE.Event.ENTER_FRAME, this.syncPos, this)
   }
 
   phyBody: Matter.Body
@@ -70,16 +79,34 @@ export default class MoonCake extends FYGE.Sprite {
     })
   }
 
-  initEvent() {
-    this.once(FYGE.Event.ADDED_TO_STAGE, () => {
-      this.addEventListener(FYGE.Event.ENTER_FRAME, this.syncPos, this)
-    }, this)
+  addedToPhyScene(delay: number = 0, velocityPos?:Pos) {
+    this.dt = delay
+    this.velocityPos = velocityPos
+    this.lt = Date.now()
+    this.initPhyBody()
+    this.setPhyPos()
+    // @ts-ignore
+    this.parent.parent.composites.add(this.parent.parent.world, [this.phyBody])
+    this.addEventListener(FYGE.Event.ENTER_FRAME, this.syncPos, this)
   }
 
   // 同步坐标， 随着刚体进行更新
   syncPos() {
-    this.x = this.phyBody.position.x - this.width / 2 - layers.stageOffsetX;
-    this.y = this.phyBody.position.y - this.height / 2 - layers.stageOffsetY;
+    this.x = this.phyBody.position.x - this.width / 2;
+    this.y = this.phyBody.position.y - this.height / 2;
+
+    if (this.dt <= 0) return
+    var now = Date.now()
+    var spt = now - this.lt
+    if (spt > 1000) {
+      this.lt = now
+      return
+    }
+    this.lt = now
+    this.dt -= spt
+    if (this.dt <= 0) {
+      this.setVelocity()
+    }
   }
 
 
@@ -93,11 +120,29 @@ export default class MoonCake extends FYGE.Sprite {
     this.setPhyPos();
   }
 
+  get fx() {
+    return this.position.x
+  }
+
+  get fy() {
+    return this.position.y
+  }
+
+  lt: number = Date.now()
   setPhyPos() {
     Matter.Body.setPosition(this.phyBody, {
       x: (this.x + this.width / 2),
       y: (this.y + this.height / 2)
     });
+    
+  }
+
+  // 抛出
+  setVelocity() {
+    this.isFire = true
+    GameSimCfg.isPlayMusic && playSound(Soundurl.moonCakeOut)
+    Matter.Body.setStatic(this.phyBody, false)
+    Matter.Body.setVelocity(this.phyBody, this.finalVelocity(this.velocityPos))
   }
 
   half_left: FYGE.Sprite
@@ -108,17 +153,34 @@ export default class MoonCake extends FYGE.Sprite {
   doHalf() {
     if (this.isDie) return
     this.isDie = true
+
+    GameSimCfg.isPlayMusic && playSound(Soundurl.moonCakeBreak)
+
     var offsetX = this._type ? -5: 5;
     this.half_left.visible = true;
     this.half_right.visible = true;
     this.half_left.position.set(offsetX, -5);
     this.half_right.position.set(-offsetX, 5);
 
-    Matter.Body.setVelocity(this.phyBody, {x: 0, y: 9})
+    Matter.Body.setStatic(this.phyBody, false)
+    Matter.Body.setVelocity(this.phyBody, {x: 0, y: 9 * GameSimCfg.fpsScale})
 
     FYGE.Tween.get(this.half_left).to({ x: randomNum(-120, -80), rotation: randomNum(-50, -30) }, randomNum(2000, 4000));
     FYGE.Tween.get(this.half_right).to({ x: randomNum(80, 120), rotation: randomNum(30, 50) }, randomNum(2000, 4000));
 
+    // this.texture.destroy()
     this.texture.valid = false
   }
+
+  destroy() {
+    this.comeDown()
+    super.destroy()
+  }
+
+  finalVelocity(v) {
+    return {
+      x: v.x * GameSimCfg.fpsScale,
+      y: v.y * GameSimCfg.fpsScale
+    }
+  }
 }
\ No newline at end of file

src/scenes/GameScene/GameConfig.ts

 export const GameSimCfg = {
   boomProbability: 10, // 炸弹的概率
   diffLevel: 10, 
+  crazyMaxLen: 6, // crazy time boom's number
   maxBoomNum: 2, // 一波中最多炸弹数
-  shortCutTime: 300
+  shortCutTime: 500,
+  crazyTime: 10000,
+  isPlayMusic: false,
+  GamingTime: 70000,
+  fpsScale: 1
 }
\ No newline at end of file

src/scenes/NewGuyScene/NewGuyScene.ts

+import { changeScene } from './../../../module/ctrls/index';
+import Matter = require("matter-js");
+import { layers } from "../../../module/views/layers";
+import { Scene } from "../../../module/views/Scene";
+import Blade from "../../components/Blade";
+import BoomEle from "../../components/BoomEle";
+import MoonCake from "../../components/MoonCake";
+import { horizontalScreen } from "../../Main";
+import UI from "../../UI";
+import { randomNum } from "../../utils/utils";
+import GameScene from '../GameScene/GameScene';
+import { RES } from '../../../module/RES';
+
+const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter
+
+export default class NewGuyScene extends Scene {
+  sceneContainer: FYGE.Container // 页面展示Container
+  guidanceText: FYGE.Sprite
+  extraScene: FYGE.Sprite
+  blade: Blade
+  gameEles: Array<MoonCake|BoomEle> = []
+  handSvga: FYGE.SvgaAni
+  step: number = 0
+
+  get groupNames() {
+    return ['GameScene', 'GameEle', 'MoonCake', 'svga', 'Guidance']
+  }
+
+  get allGameEles() {
+    return this.gameEles
+  }
+
+  initUi() {
+    // 初始化物理世界
+    this.initPhyWorld()
+
+    UI.Sp(this, 'GameScene-back.png')
+
+    this.sceneContainer = UI.Ctn(this)
+    this.guidanceText = UI.Sp(this, 'guidance1-1.png', 812, 150, {alpha: 0})
+    this.guidanceText.anchorTexture.set(.5, .5)
+    this.guidanceText.alpha = 0
+    
+    var s = this.extraScene = UI.Sp(this, 'extra_scene.png', 0, 0)
+    s.y = 750 - s.height
+
+    this.handSvga = UI.SvgaAni(this, 'hand_guidance.svga', layers.stageCenterX - 400, layers.stageCenterY - 120)
+    this.handSvga.visible = false
+    this.blade = this.addChild(new Blade());
+  }
+
+  hideGuidanceText() {
+    return new Promise(r => {
+          FYGE.Tween.get(this.guidanceText)
+          .to({alpha: 0}, 1000, FYGE.Ease.quadInOut)
+          .call(r)
+        })
+  }
+
+  async nextStep() {
+    this.step += 1
+    switch(this.step) {
+      case 1:
+        this.step1()
+        break
+      case 2:
+        this.step2()
+        break
+      case 3:
+        this.step3()
+        break
+      case 4:
+        // @ts-ignore
+        await window._guide()
+        await this.hideGuidanceText()
+        changeScene(GameScene)
+    }
+  }
+
+  step1() {
+    var mc = this.sceneContainer.addChild(new MoonCake(0))
+    mc.x = 1624 / 2 - mc.width / 2
+    mc.y = layers.stageHeight
+
+    this.gameEles.push(mc)
+    FYGE.Tween.get(mc)
+      .set({ rotation: 30 })
+      .to({ rotation: -20, y: layers.stageHeight / 2 - mc.height / 2 }, 1000, FYGE.Ease.quadInOut)
+      .call(() => {
+        FYGE.Tween.get(this.guidanceText)
+          .set({ alpha: 0 })
+          .to({alpha: 1}, 1000, FYGE.Ease.quadInOut)
+
+        var s = this.handSvga
+        s.visible = true
+        s.play(1, () => {
+          mc.addedToPhyScene()
+          s.visible = false
+        })
+      })
+  }
+
+  async step2() {
+
+    var mc1 = this.sceneContainer.addChild(new MoonCake(2))
+    mc1.position.set(480, 750)
+    var mc2 = this.sceneContainer.addChild(new MoonCake(1))
+    mc2.position.set(630, 800)
+    var mc3 = this.sceneContainer.addChild(new MoonCake(3))
+    mc3.position.set(780, 850)
+    var mc4 = this.sceneContainer.addChild(new MoonCake(0))
+    mc4.position.set(980, 900)
+    this.gameEles.push(mc1, mc2, mc3, mc4)
+
+    FYGE.Tween.get(mc1)
+      .set({ rotation: -30 })
+      .to({ rotation: 20, y: 400 }, 1000, FYGE.Ease.quadInOut)
+    
+    FYGE.Tween.get(mc2)
+      .set({ rotation: -30 })
+      .to({ rotation: 20, y: 310 }, 1000, FYGE.Ease.quadInOut)
+
+    FYGE.Tween.get(mc3)
+      .set({ rotation: -30 })
+      .to({ rotation: 20, y: 230 }, 1000, FYGE.Ease.quadInOut)
+
+    FYGE.Tween.get(mc4)
+      .set({ rotation: -30 })
+      .to({ rotation: 20, y: 240 }, 1000, FYGE.Ease.quadInOut)
+      .call(() => {
+        this.handSvga.visible = true
+        this.handSvga.play(2, () => {
+          this.handSvga.visible = false
+          this.gameEles.forEach(ele => {
+            ele.addedToPhyScene()
+          })
+        })
+      })
+    
+    await this.hideGuidanceText()
+    this.guidanceText.texture = RES.getRes('guidance1-2.png')
+    FYGE.Tween.get(this.guidanceText)
+      .set({ alpha: 0 })
+      .to({alpha: 1}, 1000, FYGE.Ease.quadInOut)
+  }
+
+  step3() {
+    this.guidanceText.texture = RES.getRes('guidance1-3.png')
+    FYGE.Tween.get(this.guidanceText)
+      .set({ alpha: 0 })
+      .to({alpha: 1}, 1000, FYGE.Ease.quadInOut)
+
+    var boom1 = this.sceneContainer.addChild(new BoomEle())
+    boom1.position.set(380, 750)
+    var boom2 = this.sceneContainer.addChild(new BoomEle())
+    boom2.position.set(780, 750)
+    var boom3 = this.sceneContainer.addChild(new BoomEle())
+    boom3.position.set(1180, 750)
+    this.gameEles.push(boom1, boom2, boom3)
+
+    this.gameEles.forEach((ele, i) => {
+      var k = layers.stageHeight / 750
+      ele.addedToPhyScene(i* 500 + 1, {x: 0, y: -17 * k})
+    })
+
+  }
+
+  initEvents() {
+    this.addEventListener(FYGE.Event.ENTER_FRAME, this.FrameUpdate, this)
+
+    this.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.drawBlade, this)
+    this.addEventListener(FYGE.MouseEvent.MOUSE_UP, this.resetBlade, this)
+
+    this.addEventListener('collision', this.onCut, this)
+  }
+
+  onCut({data}){
+    const {type, x, w, y, h} = data
+
+    this.gameEles.forEach(ge => {
+      if (ge instanceof MoonCake) ge.doHalf()
+    })
+
+    let mclip = UI.SvgaAni(this.sceneContainer, 'light.svga')
+    var pCake = UI.SvgaAni(this.sceneContainer, 'pinkCake.svga')
+    var scale = [1,2].includes(type) ? 0.65 : 1
+    mclip.scaleX = scale
+    mclip.scaleY = scale
+    var mw = 400 * scale
+    var mh = 400 * scale
+
+    var pscale = [1,2].includes(type) ? 0.65 : 1
+    pCake.scaleX = pscale
+    pCake.scaleY = pscale
+    var pw = 260 * pscale
+    var ph = 260 * pscale
+
+    mclip.position.set(x + (w / 2 - mw / 2), y + (h / 2 - mh / 2))
+    mclip.play(1, () => {
+      setTimeout(()=>{
+        mclip.destroy()
+      })
+    })
+    pCake.position.set(x + (w / 2 - pw / 2), y + (h / 2 - ph / 2))
+    pCake.play(1, () => {
+      setTimeout(() => {
+        pCake.destroy()
+      })
+    })
+  }
+
+  resetBlade() {
+    this.blade && this.blade.reset()
+  }
+
+  drawBlade = (e) =>{
+    this.blade && this.blade.drawBlade(e)
+  }
+
+  // 帧事件
+  FrameUpdate() {
+    let len = this.gameEles.length
+    for (var i = len -1; i>= 0;i --) {
+      var curr = this.gameEles[i]
+      if (curr.y > layers.stageHeight + 500) {
+        curr.comeDown()
+        // @ts-ignore
+        this.composites.remove(this.world, [curr.phyBody])
+        this.sceneContainer.removeChild(curr)
+        curr.destroy()
+        this.gameEles.splice(i, 1)
+      }
+    }
+
+    !this.gameEles.length && this.nextStep()
+  }
+
+  engine: Matter.Engine // 物理引擎
+  world: Matter.World // 世界
+  runner: Matter.Runner
+  composites: Matter.Composites
+  initPhyWorld() {
+    this.engine = Engine.create()
+
+    this.world = this.engine.world
+    // 设置物理引擎的y重力
+    this.engine.gravity.x = 0.0
+    this.engine.gravity.y = 0.6
+
+    this.runner = Runner.create()
+    // Runner.run(this.runner, this.engine)
+    this.composites = Composite // 复合体
+
+    horizontalScreen && this.setPhyDebug()
+  }
+  
+
+  private setPhyDebug() {
+    
+    const canvas = document.createElement("canvas");
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+
+        const div = document.createElement("div");
+        div.style.width = "100%";
+        div.style.height = "100%";
+        div.style.position = "absolute"
+        div.style.left = "50%";
+        div.style.pointerEvents = "none";
+        div.style.transform = "translateX(-50%)";
+        div.style.lineHeight = "0";
+        div.style.fontStyle = "0";
+
+        document.body.append(div);
+
+        const render = Render.create({
+            canvas: canvas,
+            element: div,
+            engine: this.engine,
+            options: {
+                wireframes: true,
+                width: 1624,
+                height: 750,
+                background: 'transparent',
+                wireframeBackground: 'transparent',
+                showSleeping: true,
+            },
+        });
+        Render.run(render);
+  }
+
+  update() {
+    // 让物理引擎 先update 这样就不会看着卡顿 Runner.tick && Runner.run
+    // Runner.tick(this.runner, this.engine, 0)
+    Engine.update(this.engine,1000/60)
+    super.update()
+  }
+}
\ No newline at end of file

src/scenes/NewGuyScene/NewGuyScene2.ts

+import { changeScene } from './../../../module/ctrls/index';
+import Matter = require("matter-js");
+import { RES } from "../../../module/RES";
+import { layers } from "../../../module/views/layers";
+import { Scene } from "../../../module/views/Scene";
+import { countDown } from "../../common/countDown";
+import Blade from "../../components/Blade";
+import MoonCake from "../../components/MoonCake";
+import { horizontalScreen } from "../../Main";
+import UI from "../../UI";
+import { randomNum } from "../../utils/utils";
+import { GameSimCfg } from "../GameScene/GameConfig";
+import GameScene from '../GameScene/GameScene';
+
+const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter
+
+export default class NewGuyScene2 extends Scene {
+  isCrazy: boolean = false
+  spShow: FYGE.SvgaAni
+  spRightShow: FYGE.SvgaAni
+  backgroundImg: FYGE.Sprite
+  extraScene: FYGE.Sprite
+  blade: Blade
+  crazyMaxLen: number = GameSimCfg.crazyMaxLen
+  leftCrazyMoonCake: MoonCake[] = []
+  rightCrazyMoonCake: MoonCake[] = []
+  sceneContainer: FYGE.Container
+  shortCutCnt: FYGE.Container
+  shortCutText: FYGE.BitmapText
+  quit: boolean = false
+  swingHand: FYGE.SvgaAni
+
+  get groupNames() {
+    return ['GameScene', 'GameEle', 'MoonCake', 'svga', 'Guidance']
+  }
+
+  get allGameEles() {
+    return [...this.leftCrazyMoonCake, ...this.rightCrazyMoonCake]
+  }
+
+  _moonCakePoor: MoonCake[] = []
+  getMoonCakeFromPoor(i:number) {
+    if (!this._moonCakePoor.length) {
+      console.log('初始化月饼')
+      return new MoonCake(i)
+    }
+    return this._moonCakePoor.shift().reset(i)
+  }
+
+  initUi() {
+    // 初始化物理世界
+    this.initPhyWorld()
+
+    this.backgroundImg = UI.Sp(this, 'GameScene-back.png')
+
+    var sceneContainer = this.sceneContainer = UI.Ctn(this)
+
+    var s = this.extraScene = UI.Sp(this, 'extra_scene.png', 0, 0)
+    s.y = 750 - s.height
+
+    var sp = UI.SvgaAni(this, 'spBtnIcon.svga', layers.stageOffsetX + 100, layers.stageHeight + layers.stageOffsetY - 200)
+    this.swingHand = UI.SvgaAni(this, 'hand_swing.svga', layers.stageOffsetX + 150, layers.stageHeight + layers.stageOffsetY - 150)
+    sp.addEventListener(FYGE.MouseEvent.CLICK, this.onCrazyTime, this)
+    sp.play(1)
+
+    this.blade = this.addChild(new Blade());
+
+
+    this.shortCutCnt = UI.Ctn(this, 300, 200)
+    UI.Sp(this.shortCutCnt, 'shortcut_icon.png')
+    this.shortCutText = UI.BitmapText(this.shortCutCnt, 'num', {
+      '+': "num_add.png"
+    }, '+0', 45, 110)
+    this.shortCutCnt.alpha = 0
+  }
+
+  initEvents() {
+    this.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.drawBlade, this)
+    this.addEventListener(FYGE.MouseEvent.MOUSE_UP, this.resetBlade, this)
+
+    this.addEventListener('collision', this.onCut, this)
+
+    this.addEventListener(FYGE.Event.ENTER_FRAME, this.FrameUpdate, this)
+  }
+
+
+  shortCutNum = (function(curNum, t, cb, addScore) {
+    let curr = {
+      num: 0
+    }
+    var timer
+    return {
+      do: () => {
+        timer && clearTimeout(timer)
+        timer = setTimeout(() => {
+          curr.num = 0
+          cb(curr.num)
+        }, t)
+        curr.num += 1
+        if (curr.num >= curNum) {
+          curr.num == curNum ? addScore(curNum) : addScore(1)
+          cb(curr.num)
+          console.log('连续击中:', curr.num)
+        }
+      },
+      reDo: function() {
+        curr.num = 0
+        cb(curr.num)
+      }
+    }
+  })(3, GameSimCfg.shortCutTime, (n: number) => {
+    if (n > 0) {
+      this.shortCutText.text = `+${n}`
+      FYGE.Tween.removeTweens(this.shortCutCnt)
+      this.shortCutCnt.alpha = 1
+      FYGE.Tween.get(this.shortCutText)
+        .to({ scaleX: 1.1, scaleY: 1.1 }, 300, FYGE.Ease.quadInOut)
+        .to({ scaleX: 1, scaleY: 1 }, 200, FYGE.Ease.quadInOut)
+    } else {
+      FYGE.Tween.removeTweens(this.shortCutCnt)
+      FYGE.Tween.get(this.shortCutCnt)
+        .wait(1000)
+        .to({ alpha: 0 }, 600, FYGE.Ease.quadInOut)
+    }
+  }, (n:number) => {
+  }) // 连续 击中 n个
+
+  onCut({data}){
+    this.shortCutNum.do()
+    const {type, x, w, y, h} = data
+
+    let mclip = UI.SvgaAni(this.sceneContainer, 'light.svga')
+    var pCake = UI.SvgaAni(this.sceneContainer, 'pinkCake.svga')
+    var scale = [1,2].includes(type) ? 0.65 : 1
+    mclip.scaleX = scale
+    mclip.scaleY = scale
+    var mw = 400 * scale
+    var mh = 400 * scale
+
+    var pscale = [1,2].includes(type) ? 0.65 : 1
+    pCake.scaleX = pscale
+    pCake.scaleY = pscale
+    var pw = 260 * pscale
+    var ph = 260 * pscale
+
+    mclip.position.set(x + (w / 2 - mw / 2), y + (h / 2 - mh / 2))
+    mclip.play(1, () => {
+      setTimeout(()=>{
+        mclip.destroy()
+      })
+    })
+    pCake.position.set(x + (w / 2 - pw / 2), y + (h / 2 - ph / 2))
+    pCake.play(1, () => {
+      setTimeout(() => {
+        pCake.destroy()
+      })
+    })
+  }
+
+  resetBlade() {
+    this.blade && this.blade.reset()
+  }
+
+  drawBlade = (e) =>{
+    this.blade && this.blade.drawBlade(e)
+  }
+
+  onCrazyTime() {
+    if (this.isCrazy || this.quit) return
+    this.isCrazy = true;
+    this.swingHand.destroy();
+    (this.spShow || (this.spShow = UI.SvgaAni(this, 'spShow.svga', layers.stageOffsetX))).visible = true;
+    (this.spRightShow || (this.spRightShow = UI.SvgaAni(this, 'spShow.svga', layers.stageOffsetX + layers.stageWidth))).visible = true;
+    this.spRightShow.scaleX = -1
+    this.backgroundImg.texture = RES.getRes('GameScene-back2.png')
+    countDown(GameSimCfg.crazyTime, () => {
+      this.spShow.visible = false
+      this.spRightShow.visible = false
+      this.backgroundImg.texture = RES.getRes('GameScene-back.png')
+      this.isCrazy = false
+      this.quit = true
+    })
+
+  }
+
+
+  generatorCrazyMoonCake() {
+    if (!this.isCrazy) return
+    while(this.leftCrazyMoonCake.length < this.crazyMaxLen) {
+      this.leftCrazyMoonCake.push(this.initMoonCake({
+        x: layers.stageOffsetX - 200,
+        y: randomNum(layers.stageOffsetY + 100, layers.stageOffsetY + 300)
+      }, {
+        x: randomNum(15, 20),
+        y: randomNum(-4, -7)
+      }))
+    }
+
+    while(this.rightCrazyMoonCake.length < this.crazyMaxLen) {
+      this.rightCrazyMoonCake.push(this.initMoonCake({
+        x: layers.stageOffsetX + layers.stageWidth + 50,
+        y: randomNum(layers.stageOffsetY + 100, layers.stageOffsetY + 300)
+      }, {
+        x: randomNum(-15, -20),
+        y: randomNum(-4, -7)
+      }))
+    }
+  }
+
+  initMoonCake(ipos, velocity) {
+    let mc = this.sceneContainer.addChild(this.getMoonCakeFromPoor(Math.floor(Math.random() * 5)))
+    mc.addedToPhyScene(randomNum(0, 1000), velocity)
+    mc.fx = ipos.x
+    mc.fy = ipos.y
+
+    return mc
+  }
+
+  // 帧事件
+  FrameUpdate() {
+    let llen = this.leftCrazyMoonCake.length
+    for (let i = llen -1; i>= 0;i --) {
+      let curr = this.leftCrazyMoonCake[i]
+      if (curr.y > layers.stageHeight) {
+        curr.comeDown()
+        if (curr instanceof MoonCake) {
+          // @ts-ignore
+          this.composites.remove(this.world, [curr.phyBody])
+          this.sceneContainer.removeChild(curr)
+          this._moonCakePoor.push(curr)
+        }
+        this.leftCrazyMoonCake.splice(i, 1)
+      }
+    }
+
+    let rlen = this.rightCrazyMoonCake.length
+    for (let i = rlen -1; i>= 0;i --) {
+      let curr = this.rightCrazyMoonCake[i]
+      if (curr.y > layers.stageHeight) {
+        curr.comeDown()
+        if (curr instanceof MoonCake) {
+          // @ts-ignore
+          this.composites.remove(this.world, [curr.phyBody])
+          this.sceneContainer.removeChild(curr)
+          this._moonCakePoor.push(curr)
+        }
+        this.rightCrazyMoonCake.splice(i, 1)
+      }
+    }
+    this.isCrazy && this.generatorCrazyMoonCake()
+
+    this.quit && !this.allGameEles.length && this.jumpGameScene()
+  }
+
+  async jumpGameScene() {
+    // @ts-ignore
+    await window._guide(2)
+    changeScene(GameScene)
+  }
+
+  engine: Matter.Engine // 物理引擎
+  world: Matter.World // 世界
+  runner: Matter.Runner
+  composites: Matter.Composites
+  initPhyWorld() {
+    this.engine = Engine.create()
+
+    this.world = this.engine.world
+    // 设置物理引擎的y重力
+    this.engine.gravity.x = 0.0
+    this.engine.gravity.y = 0.6
+
+    this.runner = Runner.create()
+    // Runner.run(this.runner, this.engine)
+    this.composites = Composite // 复合体
+
+    horizontalScreen && this.setPhyDebug()
+  }
+  
+
+  private setPhyDebug() {
+    
+    const canvas = document.createElement("canvas");
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+
+        const div = document.createElement("div");
+        div.style.width = "100%";
+        div.style.height = "100%";
+        div.style.position = "absolute"
+        div.style.left = "50%";
+        div.style.pointerEvents = "none";
+        div.style.transform = "translateX(-50%)";
+        div.style.lineHeight = "0";
+        div.style.fontStyle = "0";
+
+        document.body.append(div);
+
+        const render = Render.create({
+            canvas: canvas,
+            element: div,
+            engine: this.engine,
+            options: {
+                wireframes: true,
+                width: 1624,
+                height: 750,
+                background: 'transparent',
+                wireframeBackground: 'transparent',
+                showSleeping: true,
+            },
+        });
+        Render.run(render);
+  }
+
+  update() {
+    // 让物理引擎 先update 这样就不会看着卡顿 Runner.tick && Runner.run
+    // Runner.tick(this.runner, this.engine, 0)
+    Engine.update(this.engine,1000/60)
+    super.update()
+  }
+}
\ No newline at end of file

src/utils/utils.ts

@@ -131,4 +131,27 @@ export function onceFnc(fn:Function, count:number = 1) {
  */
 export function randomNum(min:number, max:number) {
   return Number((Math.random() * (max - min) + min).toFixed(2))
+}
+
+/**
+ * 用一秒钟的时间去获取当前设备的fps
+ * @returns 
+ */
+export function getCurrentFps() {
+  return new Promise(r => {
+    var lt = Date.now()
+    var ht = 0
+    var s = 0
+    var rid
+    var step = function() {
+      ht = Date.now() - lt
+      s += 1
+      if (ht >= 1000) {
+        r(s)
+        rid && window.cancelAnimationFrame(rid)
+      }
+      rid = window.requestAnimationFrame(step)
+    }
+    rid = window.requestAnimationFrame(step)
+  })
 }
\ No newline at end of file