基本完成

resource/res.json

@@ -5,7 +5,7 @@
 			"name": "GameEle"
 		},
 		{
-			"keys": "GameScene-back.png,extra_scene.png",
+			"keys": "GameScene-back.png,extra_scene.png,mission-goal.png,title-back.png",
 			"name": "GameScene"
 		},
 		{

src/ResJson.ts

@@ -5,7 +5,7 @@ export const ResJson = {
 			"name": "GameEle"
 		},
 		{
-			"keys": "GameScene-back.png,extra_scene.png",
+			"keys": "GameScene-back.png,extra_scene.png,mission-goal.png,title-back.png",
 			"name": "GameScene"
 		},
 		{

src/components/Blade.ts

+import Matter = require("matter-js")
+
+class Tpoint extends FYGE.Point{
+  dtime: number
+  constructor(...args) {
+    super(...args)
+    this.dtime = args[2]
+  }
+}
+
+export default class Blade extends FYGE.Graphics {
+  private points: Tpoint[] = []
+
+  constructor() {
+    super()
+
+  }
+
+  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 len = this.points.length
+    var pos = this.points
+    this.points.reduce((pre, curr, i) => {
+      var lineWidth = i / len > .5 ? (len - i) * 2 : i * 2
+      that.lineStyle(lineWidth, 0xffffff)
+      this.moveTo(pre.x, pre.y)
+      this.lineTo(curr.x, curr.y)
+      // that.endStroke()
+
+      // 碰撞检测上，可以不用两个刚体的碰撞检测，而是使用射线进行碰撞检测的判定
+      // @ts-ignore
+      const allBodies = Matter.Composite.allBodies(that.parent.world)
+      // @ts-ignore
+      const collisions = Matter.Query.ray(allBodies, pre, curr)
+      // collisions.length && console.log(collisions)
+      collisions.forEach((pair) => {
+        // @ts-ignore
+        var mooncakes = that.parent.mooncakes || []
+        var halfEle = mooncakes.find(mc => mc.phyBody?.id === pair.bodyA?.id && !mc.isDie)
+        
+        // 分开 vtodo 分数加
+        if (halfEle) {
+          halfEle.doHalf()
+          // @ts-ignore
+          that.parent.dispatchEvent('collision')
+        }
+      })
+
+      return curr
+    })
+    // for (var i = 0; i < len - 1; i ++) {
+    //   var start = {
+    //     x: pos[i].x,
+    //     y: pos[i].y
+    //   }
+    // }
+  }
+
+  public reset() {
+    this.points = [];
+    this.clear();
+  }
+}
\ No newline at end of file

src/components/MoonCake.ts

 import Matter = require("matter-js")
 import { RES } from "../../module/RES"
 import UI from "../UI"
+import { randomNum } from "../utils/utils"
 
 export default class MoonCake extends FYGE.Sprite {
   type: string = 'mooncake'
   imgName: string // 游戏元素索引
-  miss: boolean // 是否错过
+  isDie: boolean // 是否切中
 
   constructor(i: number) {
     super()
     this.imgName = `mooncake${i}`
-    this.texture = RES.getRes(`mooncake${i}.png`)
+    // 克隆一个纹理
+    this.texture = RES.getRes(`mooncake${i}.png`).clone()
     // console.log(`mooncake${i}`, this.texture)
     // this.anchorTexture.set(0.5, 0.5)
     this.anchorY = this.height / 2
@@ -79,11 +81,14 @@ export default class MoonCake extends FYGE.Sprite {
    * 一分为二
    */
   doHalf() {
-    this.texture.valid = false
-    setTimeout(() => {
-
+    if (this.isDie) return
+    this.isDie = true
     this.half_left = UI.Sp(this, `${this.imgName}-2.png`, -5, 0)
     this.half_right = UI.Sp(this, `${this.imgName}-1.png`, 5, 0)
-    }, 1000)
+
+    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.valid = false
   }
 }
\ No newline at end of file

src/scenes/GameScene/GameScene.ts

@@ -6,7 +6,8 @@ import BoomEle from "../../components/BoomEle";
 import { horizontalScreen } from "../../Main";
 import CountDownComp from "../../components/CountDownComp";
 import MoonCake from "../../components/MoonCake";
-import { randomNum } from "../../utils/utils";
+import { randomNum, throttle } from "../../utils/utils";
+import Blade from "../../components/Blade";
 const MouseEvent = FYGE.MouseEvent
 
 const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter
@@ -16,14 +17,30 @@ export default class GameScene extends Scene {
   mooncakes: Array<MoonCake> = []
   maxcakes: number = 5
   sceneContainer: FYGE.Container
+  blade: Blade
 
   get groupNames() {
     return ['GameScene', 'GameEle', 'MoonCake']
   }
 
-  _MoonCake: BoomEle
+  _MoonCake: MoonCake
+  _boom: BoomEle
+
+  _score: number
+  missionGoal: FYGE.Container
+  scoreContainer: FYGE.TextField
+
+  set score(n: number) {
+    this._score = n;
+    (this.scoreContainer || (this.scoreContainer = UI.Txt(this.missionGoal, '100', 36, '#ffe8af', FYGE.TEXT_ALIGN.CENTER, 100, 70, 18))).text = n + ''
+  }
+
+  get score() {
+    return this._score
+  }
 
   initUi() {
+
     // 初始化物理世界
     this.initPhyWorld()
 
@@ -33,23 +50,33 @@ export default class GameScene extends Scene {
     s.y = 750 - s.height
 
     var sceneContainer = this.sceneContainer = UI.Ctn(this, layers.stageOffsetX, layers.stageOffsetY)
+    this.setChildIndex(sceneContainer, 1)
+
+    var missionGoal = this.missionGoal = UI.Ctn(sceneContainer, 100, 30)
+    sceneContainer.setChildIndex(missionGoal, 100)
+    UI.Sp(missionGoal, 'mission-goal.png')
+    // 初始化分数
+    this.score = 0
+
+    var sceneTitle = UI.Ctn(sceneContainer, layers.stageWidth / 2 - 120, 30)
+    UI.Sp(sceneTitle, 'title-back.png')
+    UI.Txt(sceneTitle, '本关目标: 100', 26, '#ffe8af', FYGE.TEXT_ALIGN.CENTER, 240, 0, 22)
     
     // var t = UI.Txt(this, '123123', 28)
     // t.x = layers.stageOffsetX
     // t.y = 0
 
-    var boom = sceneContainer.addChild(new BoomEle())
+    var boom = this._boom = sceneContainer.addChild(new BoomEle())
     Matter.Body.setStatic(boom.phyBody, true)
 
     // 测试 月饼
     this._MoonCake = sceneContainer.addChild(new MoonCake(2))
-    this._MoonCake.x = 200
+    this._MoonCake.x = 500
 
     Matter.Body.setStatic(this._MoonCake.phyBody, true)
     //@ts-ignore
     window.test = (x, y) => {
-      Matter.Body.setStatic(this._MoonCake.phyBody, false)
-      Matter.Body.setVelocity(this._MoonCake.phyBody, {x, y})
+      console.log(Matter.Composite.allBodies(this.world))
     }
 
     var cdp = sceneContainer.addChild(new CountDownComp(61000))
@@ -66,6 +93,8 @@ export default class GameScene extends Scene {
   }
 
   initGame() {
+    this.blade = this.addChild(new Blade());
+
     this.gennerateMoonCakes()
   }
 
@@ -80,7 +109,8 @@ export default class GameScene extends Scene {
     var i = Math.floor(Math.random() * 5)
     var mc = new MoonCake(i)
     mc.x = randomNum(100, layers.stageWidth - 200)
-    mc.y = layers.stageHeight-100
+    // 测试
+    mc.y = layers.stageHeight
     // @ts-ignore
     this.composites.add(this.world, [mc.phyBody])
     this.mooncakes.push(mc)
@@ -100,9 +130,16 @@ export default class GameScene extends Scene {
   }
 
   initEvents() {
-    this.stage.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onMouseDown, this)
+    // this.stage.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onMouseDown, this)
     this.addEventListener(FYGE.Event.ENTER_FRAME, this.FrameUpdate, this)
 
+    this.stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.drawBlade, this)
+    this.stage.addEventListener(FYGE.MouseEvent.MOUSE_UP, this.resetBlade, this)
+
+    this.addEventListener('collision', () => {
+      this.score += 1
+    })
+
     Matter.Events.on(this.engine, 'collisionStart', (e) => {
       console.log(e)
       console.log(e.pairs[0])
@@ -110,11 +147,19 @@ export default class GameScene extends Scene {
     })
   }
 
+  resetBlade() {
+    this.blade.reset()
+  }
+
+  drawBlade = throttle((e) =>{
+    this.blade.drawBlade(e)
+  }, 0)
+
   // 帧事件
   FrameUpdate() {
     this.mooncakes.map((e, i) => {
       if (e.y > layers.stageHeight) {
-        if (!e.miss) {
+        if (!e.isDie) {
           // console.log('错了一个')
         }
         this.sceneContainer.removeChild(e)
@@ -132,8 +177,8 @@ export default class GameScene extends Scene {
   }
 
   onMouseMove(e) {
-    this._MoonCake.x = e.localX - this._MoonCake.width / 2
-    this._MoonCake.y = e.localY - this._MoonCake.height / 2
+    this._boom.x = e.localX - this._boom.width / 2
+    this._boom.y = e.localY - this._boom.height / 2
   }
 
   engine: Matter.Engine // 物理引擎