feat: 增加功能

src/components/TimeLabel.ts

+import { Scene } from "../../module/views/Scene";
+
+export class TimeLabel extends Scene {
+    scoreboard: FYGE.Sprite;
+    scoreNum: FYGE.TextField;
+    _time: number = 120
+    constructor() {
+        super();
+        this.initUi();
+    }
+    initUi() {
+        let scoreboard = this.scoreboard = this.addChild(FYGE.Sprite.fromUrl('//yun.duiba.com.cn/spark/assets/8588b2dfa42606fa9e4f82be76baad83fa522a87.png'));
+        scoreboard.width = 315
+        scoreboard.height = 125
+        scoreboard.x = 220;
+
+        let scoreNum = this.scoreNum = new FYGE.TextField();
+        scoreNum.textWidth = 315;
+        scoreNum.x = 220
+        scoreNum.y = 50
+        scoreNum.fillColor = '#ae4025';
+        scoreNum.textAlign = FYGE.TEXT_ALIGN.CENTER;
+        scoreNum.size = 60;
+        scoreNum.text = `${this._time}`
+
+        this.addChild(scoreboard)
+        this.addChild(scoreNum)
+        this.reset();
+    }
+
+    set time(value) {
+        this._time = value < 0 ? 120 : value;
+        this.scoreNum.text = `${this._time}`
+    }
+
+    reset() {
+        this.time = 120;
+    }
+}
\ No newline at end of file

src/game/Flop.ts

 import createCutTextures from '../utils/createCutTextures'
 import { Scene } from "../../module/views/Scene";
+import { TimeLabel } from '../components/TimeLabel'
+
+const PIC_ARR = [
+    "//yun.duiba.com.cn/spark/assets/cda7f4b1bd8d6e27cdcfd86f145b66b3dc478402.png",
+    "//yun.duiba.com.cn/spark/assets/22950e2c20abdc8e06fd0844d6f680e760915ac8.png",
+    "//yun.duiba.com.cn/spark/assets/1ebb37cb30c7f2c0251b04e950c76eb7a519646a.jpeg",
+]
 export class Flop extends Scene {
+    private _timeLabel: TimeLabel;
     constructor() {
         super();
     }
@@ -8,10 +16,12 @@ export class Flop extends Scene {
 
     async start() {
         super.start();
+        let timer;
+        let time: number = 120;
+        let picArr = PIC_ARR
         const bigContainer = new FYGE.Sprite();
         this.addChild(bigContainer);
 
-
         // 开始游戏按钮
         let countDown = new FYGE.TextField();
         countDown.fillColor = "#ff0000";
@@ -34,34 +44,45 @@ export class Flop extends Scene {
             }
             return list;
         };
-        const bigImg = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/spark/assets/22950e2c20abdc8e06fd0844d6f680e760915ac8.png')
-        bigImg.position.x = 0;
-        bigImg.position.y = 800;
-        let nnn = null
-
-        // 切图
-        await createCutTextures('//yun.duiba.com.cn/spark/assets/22950e2c20abdc8e06fd0844d6f680e760915ac8.png', 4, 4).then((res) => {
-            PIC_URLS = res
-        })
-        this.addChild(bigImg)
-        const picUnit = new FYGE.Sprite(PIC_URLS[0])
-        PIC_SIZE = picUnit.width;//图片宽
-        const GAME_SIZE = 4;
+        const GAME_SIZE = 3;
         const INIT_DATA: any = fill(GAME_SIZE * GAME_SIZE); //数据为图片id，从0开始（图片索引）
-        console.log("INIT_DATA", INIT_DATA);
-
         let gamedata = JSON.parse(JSON.stringify(INIT_DATA));
+        let picUnit
+        let PIC_DISPLAY_LIST
+        // 切图
+        async function getImageData(picdata) {
+            console.log('====>getImageData');
+
+            await createCutTextures(picdata, 3, 3).then((res) => {
+                console.log(res, '====>res');
+
+                PIC_URLS = res
+            })
+            picUnit = new FYGE.Sprite(PIC_URLS[0])
+            PIC_SIZE = picUnit.width;//图片宽
+            //图片视图数据（列表）
+            PIC_DISPLAY_LIST = INIT_DATA.map((data) =>
+                new FYGE.Sprite(PIC_URLS[data])
+            );
+        }
+        await getImageData(picArr[0])
+
+
         // gamedata.shuffle();
         // 开始游戏按钮
         let startBtn = new FYGE.TextField();
         startBtn.fillColor = "#ff0000";
         startBtn.text = "开始游戏";
         startBtn.size = 50;
-        startBtn.x = 250;
+        startBtn.x = 280;
         startBtn.y = 700;
         startBtn.addEventListener(
             FYGE.MouseEvent.MOUSE_DOWN,
             () => {
+                clearInterval(timer);
+                timeOut()
+                console.log(bigContainer, 'bigContainer');
+
                 bigContainer.removeAllChildren();
                 gamedata.shuffle();
                 renderGame();
@@ -70,6 +91,9 @@ export class Flop extends Scene {
         );
         this.addChild(startBtn);
 
+        let timeLabel = this._timeLabel = new TimeLabel()
+        timeLabel.y = 900
+        this.addChild(timeLabel)
         function getIndex(row, col, maxCol) {
             let index;
             index = row * maxCol + col;
@@ -95,6 +119,22 @@ export class Flop extends Scene {
             currentPic.y = currPicOriginPos.y + mouseOffsetY;
         };
 
+        const timeOut = () => {
+
+            if (time > 1) {
+                timer = setInterval(() => {
+                    if (time >= 0) {
+                        time--;
+                        this._timeLabel.time = time;
+                    } else {
+                        clearInterval(timer);
+                    }
+                }, 1000);
+            } else {
+                countDown.text = "";
+            }
+        }
+
         const onMouseUp_pic = async () => {
             //鼠标抬起后应该移出舞台移动事件，否则会重复添加事件
             this.stage.removeEventListener(
@@ -119,11 +159,25 @@ export class Flop extends Scene {
             dropPic.x = currPicOriginPos.x;
             dropPic.y = currPicOriginPos.y;
 
-            setTimeout(() => {
+            setTimeout(async () => {
                 if (equalTo(INIT_DATA, gamedata)) {
+                    console.log(picArr, '=====>picArr');
+
+                    if (picArr.length === 1) {
+                        confirm("您已通关，是否重新开始") ?
+                            picArr = PIC_ARR
+                            : this.removeChildren()
+
+                        return
+                    }
                     alert("赢了");
+
+                    bigContainer.removeChildren()
+                    await getImageData(picArr.splice(1, 1))
+                    gamedata.shuffle();
+                    renderGame();
                 }
-            }, 100);
+            });
         };
 
         const onMouseDown_picItem = (event: FYGE.MouseEvent) => {
@@ -140,13 +194,9 @@ export class Flop extends Scene {
             //event事件对象
             startPoint = { x: event.stageX, y: event.stageY };
             currPicOriginPos = { x: currentPic.x, y: currentPic.y };
-            this.addChild(currentPic); //把当前图片移动到最上层
+            bigContainer.addChild(currentPic); //把当前图片移动到最上层
         };
 
-        //图片视图数据（列表）
-        const PIC_DISPLAY_LIST = INIT_DATA.map((data) =>
-            new FYGE.Sprite(PIC_URLS[data])
-        );
         const getPicDisplayById = (id) => PIC_DISPLAY_LIST[id]; //获取视图数据方法
         const getPicId = (picDisplay) => {
             for (let i = 0; i < PIC_DISPLAY_LIST.length; i++) {
@@ -178,6 +228,8 @@ export class Flop extends Scene {
 
         //生成游戏
         const renderGame = () => {
+            console.log(gamedata, '=====>gamedata');
+
             gamedata.map((data, index) => {
                 const picItem = bigContainer.addChild(getPicDisplayById(data));
                 const col = index % GAME_SIZE;