init

.gitignore

+#/////////////////////////////////////////////////////////////////////////////
+# Fireball Projects
+#/////////////////////////////////////////////////////////////////////////////
+
+/library/
+/temp/
+/local/
+/build/
+native
+#/////////////////////////////////////////////////////////////////////////////
+# npm files
+#/////////////////////////////////////////////////////////////////////////////
+
+npm-debug.log
+node_modules/
+
+#/////////////////////////////////////////////////////////////////////////////
+# Logs and databases
+#/////////////////////////////////////////////////////////////////////////////
+
+*.log
+*.sql
+*.sqlite
+
+#/////////////////////////////////////////////////////////////////////////////
+# files for debugger
+#/////////////////////////////////////////////////////////////////////////////
+
+*.sln
+*.csproj
+*.pidb
+*.unityproj
+*.suo
+
+#/////////////////////////////////////////////////////////////////////////////
+# OS generated files
+#/////////////////////////////////////////////////////////////////////////////
+
+.DS_Store
+ehthumbs.db
+Thumbs.db
+
+#/////////////////////////////////////////////////////////////////////////////
+# WebStorm files
+#/////////////////////////////////////////////////////////////////////////////
+
+.idea/
+
+#//////////////////////////
+# VS Code files
+#//////////////////////////
+
+.vscode/
+*.meta

assets/resources/Anim_MB/BG.atlas

+
+BG.png
+size: 1948,1948
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+Group 27
+  rotate: false
+  xy: 2, 2
+  size: 1093, 1943
+  orig: 1093, 1943
+  offset: 0, 0
+  index: -1
+Logo
+  rotate: false
+  xy: 1097, 1646
+  size: 674, 299
+  orig: 1093, 1943
+  offset: 209, 1519
+  index: -1

assets/resources/Anim_MB/BG.json

+{
+    "skeleton": {
+        "hash": "/qBqXid5zj8o9j1BEZjU9VJiNqA",
+        "spine": "3.7.94",
+        "width": 1315.8,
+        "height": 2334.29,
+        "images": "./Image/",
+        "audio": "E:/work/xtel/Open_Box/Option_3_dap_hu/3D/Spine"
+    },
+    "bones": [
+        {
+            "name": "root"
+        }
+    ],
+    "slots": [
+        {
+            "name": "Group 27",
+            "bone": "root",
+            "attachment": "Group 27"
+        },
+        {
+            "name": "Logo",
+            "bone": "root",
+            "attachment": "Logo"
+        }
+    ],
+    "skins": {
+        "default": {
+            "Group 27": {
+                "Group 27": {
+                    "x": 24.06,
+                    "y": 264.92,
+                    "scaleX": 1.2,
+                    "scaleY": 1.2,
+                    "width": 1093,
+                    "height": 1943
+                }
+            },
+            "Logo": {
+                "Logo": {
+                    "x": 19.86,
+                    "y": 262.23,
+                    "scaleX": 1.2,
+                    "scaleY": 1.2,
+                    "width": 1093,
+                    "height": 1943
+                }
+            }
+        }
+    },
+    "animations": {
+        "animation": {}
+    }
+}
\ No newline at end of file

assets/resources/Anim_MB/Bua.atlas

+
+Bua.png
+size: 1008,1008
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+object/bua
+  rotate: false
+  xy: 509, 50
+  size: 447, 529
+  orig: 447, 529
+  offset: 0, 0
+  index: -1
+object/ga
+  rotate: false
+  xy: 2, 439
+  size: 394, 566
+  orig: 394, 566
+  offset: 0, 0
+  index: -1
+object/gai_lung_meo
+  rotate: true
+  xy: 2, 2
+  size: 435, 505
+  orig: 435, 505
+  offset: 0, 0
+  index: -1
+object/gay
+  rotate: true
+  xy: 398, 581
+  size: 424, 562
+  orig: 424, 562
+  offset: 0, 0
+  index: -1

assets/resources/Anim_MB/Chum.atlas

+
+Chum.png
+size: 1656,1656
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+1
+  rotate: true
+  xy: 820, 761
+  size: 490, 500
+  orig: 1093, 1943
+  offset: 195, 265
+  index: -1
+2
+  rotate: false
+  xy: 663, 2
+  size: 346, 307
+  orig: 1093, 1943
+  offset: 507, 458
+  index: -1
+3
+  rotate: false
+  xy: 2, 11
+  size: 315, 247
+  orig: 1093, 1943
+  offset: 569, 348
+  index: -1
+4
+  rotate: false
+  xy: 1120, 319
+  size: 385, 440
+  orig: 1093, 1943
+  offset: 450, 170
+  index: -1
+5
+  rotate: false
+  xy: 663, 311
+  size: 455, 448
+  orig: 1093, 1943
+  offset: 264, 168
+  index: -1
+6
+  rotate: true
+  xy: 319, 18
+  size: 240, 310
+  orig: 1093, 1943
+  offset: 182, 306
+  index: -1
+light1
+  rotate: false
+  xy: 820, 1253
+  size: 683, 400
+  orig: 1093, 1943
+  offset: 169, 585
+  index: -1
+light2
+  rotate: false
+  xy: 2, 979
+  size: 816, 674
+  orig: 1093, 1943
+  offset: 139, 368
+  index: -1
+light_3
+  rotate: false
+  xy: 1322, 857
+  size: 311, 394
+  orig: 1093, 1943
+  offset: 169, 591
+  index: -1
+manh_vun1
+  rotate: false
+  xy: 1125, 176
+  size: 175, 141
+  orig: 1093, 1943
+  offset: 33, 583
+  index: -1
+manh_vun2
+  rotate: false
+  xy: 1302, 204
+  size: 162, 113
+  orig: 1093, 1943
+  offset: 931, 218
+  index: -1
+manh_vun3
+  rotate: false
+  xy: 1322, 761
+  size: 131, 94
+  orig: 1093, 1943
+  offset: 56, 246
+  index: -1
+manh_vun4
+  rotate: false
+  xy: 663, 791
+  size: 138, 186
+  orig: 1093, 1943
+  offset: 882, 501
+  index: -1
+nap 1
+  rotate: true
+  xy: 1011, 73
+  size: 236, 112
+  orig: 1093, 1943
+  offset: 546, 793
+  index: -1
+nap 2
+  rotate: true
+  xy: 1505, 1274
+  size: 379, 138
+  orig: 1093, 1943
+  offset: 284, 792
+  index: -1
+sang
+  rotate: false
+  xy: 2, 260
+  size: 659, 717
+  orig: 659, 717
+  offset: 0, 0
+  index: -1

assets/resources/Anim_MB/The.atlas

+
+The.png
+size: 1408,1408
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+open/Box
+  rotate: false
+  xy: 1040, 1042
+  size: 364, 364
+  orig: 441, 421
+  offset: 39, 27
+  index: -1
+open/Star
+  rotate: false
+  xy: 2, 2
+  size: 154, 154
+  orig: 154, 157
+  offset: 0, 0
+  index: -1
+open/light
+  rotate: false
+  xy: 2, 158
+  size: 1036, 1248
+  orig: 1080, 1393
+  offset: 17, 141
+  index: -1
+open/the
+  rotate: false
+  xy: 1040, 699
+  size: 356, 341
+  orig: 441, 421
+  offset: 44, 43
+  index: -1

assets/resources/Anim_MB/The.json

+{"skeleton":{"hash":"eRRGZ0h8EXj0xG4RyO4OdYas99Y","spine":"3.7.94","width":1080,"height":1393,"images":"./Image/","audio":""},"bones":[{"name":"root"},{"name":"open/light","parent":"root","x":-15.13,"y":23.38},{"name":"open/Box","parent":"open/light","x":20.21,"y":-15},{"name":"open/the","parent":"open/Box","x":-1.81,"y":5.42},{"name":"open/Star","parent":"open/Box","x":-11.4,"y":2.85},{"name":"open/light3","parent":"open/light","x":-7.62,"y":-7.96},{"name":"open/Star2","parent":"open/Box","x":-11.4,"y":2.85},{"name":"open/Star3","parent":"open/Box","x":-11.4,"y":2.85},{"name":"open/Star4","parent":"open/Box","x":-11.4,"y":2.85},{"name":"open/Star5","parent":"open/Box","x":-11.4,"y":2.85}],"slots":[{"name":"open/light","bone":"open/light3","attachment":"open/light"},{"name":"open/Box","bone":"open/Box","attachment":"open/Box"},{"name":"open/the","bone":"open/the","attachment":"open/the"},{"name":"open/Star","bone":"open/Star","attachment":"open/Star"},{"name":"open/Star2","bone":"open/Star2","attachment":"open/Star"},{"name":"open/Star3","bone":"open/Star3","attachment":"open/Star"},{"name":"open/Star4","bone":"open/Star4","attachment":"open/Star"},{"name":"open/Star5","bone":"open/Star5","attachment":"open/Star"}],"skins":{"default":{"open/Box":{"open/Box":{"x":-2.84,"y":0.39,"width":441,"height":421}},"open/Star":{"open/Star":{"x":4.55,"y":3.22,"width":154,"height":157}},"open/Star2":{"open/Star":{"x":4.55,"y":3.22,"width":154,"height":157}},"open/Star3":{"open/Star":{"x":4.55,"y":3.22,"width":154,"height":157}},"open/Star4":{"open/Star":{"x":4.55,"y":3.22,"width":154,"height":157}},"open/Star5":{"open/Star":{"x":4.55,"y":3.22,"width":154,"height":157}},"open/light":{"open/light":{"x":12.96,"y":32.52,"width":1080,"height":1393}},"open/the":{"open/the":{"x":0.35,"y":-0.92,"width":441,"height":421}}}},"animations":{"Idle":{"bones":{"open/Star":{"translate":[{"time":0,"x":-179.33,"y":-223.7},{"time":0.6667,"x":-179.33,"y":-209.36},{"time":1.4333,"x":-179.33,"y":-223.7}],"scale":[{"time":0,"x":0.5,"y":0.5}]},"open/light3":{"rotate":[{"time":0,"angle":0},{"time":0.6667,"angle":180},{"time":1.4333,"angle":0}]},"root":{"translate":[{"time":0,"x":0,"y":399.76}]},"open/light":{"translate":[{"time":0,"x":0,"y":0,"curve":[0.25,0,0.75,1]},{"time":0.6,"x":0,"y":8.6,"curve":[0.25,0,0.75,1]},{"time":1.4333,"x":0,"y":0}]},"open/Star2":{"translate":[{"time":0,"x":-328.47,"y":286.8,"curve":[0.25,0,0.75,1]},{"time":0.7667,"x":-311.26,"y":286.8,"curve":[0.25,0,0.75,1]},{"time":1.4333,"x":-328.47,"y":286.8}],"scale":[{"time":0,"x":0.8,"y":0.8}]},"open/Star3":{"translate":[{"time":0,"x":207.85,"y":-246.65,"curve":[0.25,0,0.75,1]},{"time":0.7333,"x":227.92,"y":-246.65,"curve":[0.25,0,0.75,1]},{"time":1.4333,"x":207.85,"y":-246.65}]},"open/Star4":{"translate":[{"time":0,"x":-380.09,"y":25.81,"curve":[0.25,0,0.75,1]},{"time":0.6667,"x":-400.17,"y":25.81,"curve":[0.25,0,0.75,1]},{"time":1.4333,"x":-380.09,"y":25.81}]},"open/Star5":{"translate":[{"time":0,"x":316.83,"y":232.31},{"time":0.7333,"x":296.75,"y":232.31},{"time":1.4333,"x":316.83,"y":232.31}]}}},"Open":{"bones":{"open/Star":{"translate":[{"time":0,"x":-179.33,"y":-223.7}],"scale":[{"time":0,"x":0.5,"y":0.5}]},"open/light3":{"rotate":[{"time":0,"angle":0},{"time":0.6667,"angle":180},{"time":1.4333,"angle":0}]},"root":{"translate":[{"time":0,"x":0,"y":0,"curve":[0.25,0,0.75,1]},{"time":0.5667,"x":0,"y":435.4,"curve":[0.25,0,0.75,1]},{"time":0.7,"x":0,"y":464.15,"curve":[0.25,0,0.75,1]},{"time":0.8667,"x":0,"y":393.46,"curve":[0.25,0,0.75,1]},{"time":0.9667,"x":0,"y":399.76}],"scale":[{"time":0,"x":0,"y":0,"curve":[0.25,0,0.75,1]},{"time":0.5667,"x":1,"y":1}]},"open/Star2":{"translate":[{"time":0,"x":-328.47,"y":286.8},{"time":0.6667,"x":-328.47,"y":235.18},{"time":1.4333,"x":-328.47,"y":286.8}],"scale":[{"time":0,"x":0.8,"y":0.8}]},"open/Star3":{"translate":[{"time":0,"x":207.85,"y":-246.65},{"time":0.6667,"x":179.17,"y":-246.65},{"time":1.4333,"x":207.85,"y":-246.65}],"scale":[{"time":0,"x":0.6,"y":0.6},{"time":1.4333,"x":1,"y":1}]},"open/Star4":{"translate":[{"time":0,"x":-380.09,"y":25.81},{"time":0.6667,"x":-380.09,"y":43.02},{"time":1.4333,"x":-380.09,"y":25.81}]},"open/Star5":{"translate":[{"time":0,"x":316.83,"y":232.31},{"time":0.6667,"x":316.83,"y":286.8},{"time":1.4333,"x":316.83,"y":232.31}]}}}}}
\ No newline at end of file

assets/resources/Anim_MB/hu.atlas

+
+hu.png
+size: 5264,5264
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+Rotate_00
+  rotate: false
+  xy: 2, 4533
+  size: 793, 728
+  orig: 1080, 1920
+  offset: 129, 411
+  index: -1
+Rotate_01
+  rotate: false
+  xy: 1599, 4522
+  size: 805, 739
+  orig: 1080, 1920
+  offset: 123, 403
+  index: -1
+Rotate_02
+  rotate: false
+  xy: 3219, 4512
+  size: 816, 749
+  orig: 1080, 1920
+  offset: 117, 395
+  index: -1
+Rotate_03
+  rotate: false
+  xy: 4037, 4512
+  size: 816, 749
+  orig: 1080, 1920
+  offset: 117, 395
+  index: -1
+Rotate_04
+  rotate: false
+  xy: 772, 3775
+  size: 816, 749
+  orig: 1080, 1920
+  offset: 123, 395
+  index: -1
+Rotate_05
+  rotate: false
+  xy: 3207, 3761
+  size: 818, 749
+  orig: 1080, 1920
+  offset: 123, 395
+  index: -1
+Rotate_06
+  rotate: false
+  xy: 772, 3023
+  size: 816, 750
+  orig: 1080, 1920
+  offset: 124, 394
+  index: -1
+Rotate_07
+  rotate: false
+  xy: 1590, 3770
+  size: 810, 750
+  orig: 1080, 1920
+  offset: 126, 394
+  index: -1
+Rotate_08
+  rotate: false
+  xy: 2402, 3766
+  size: 803, 750
+  orig: 1080, 1920
+  offset: 127, 394
+  index: -1
+Rotate_09
+  rotate: false
+  xy: 2, 760
+  size: 794, 752
+  orig: 1080, 1920
+  offset: 129, 393
+  index: -1
+Rotate_10
+  rotate: false
+  xy: 798, 760
+  size: 783, 752
+  orig: 1080, 1920
+  offset: 135, 393
+  index: -1
+Rotate_11
+  rotate: false
+  xy: 2393, 2262
+  size: 776, 751
+  orig: 1080, 1920
+  offset: 143, 394
+  index: -1
+Rotate_12
+  rotate: false
+  xy: 2, 1518
+  size: 776, 751
+  orig: 1080, 1920
+  offset: 141, 394
+  index: -1
+Rotate_13
+  rotate: false
+  xy: 2, 3781
+  size: 768, 750
+  orig: 1080, 1920
+  offset: 140, 395
+  index: -1
+Rotate_14
+  rotate: false
+  xy: 1590, 3018
+  size: 776, 750
+  orig: 1080, 1920
+  offset: 133, 395
+  index: -1
+Rotate_15
+  rotate: false
+  xy: 1599, 1510
+  size: 779, 751
+  orig: 1080, 1920
+  offset: 128, 394
+  index: -1
+Rotate_16
+  rotate: false
+  xy: 1583, 756
+  size: 779, 752
+  orig: 1080, 1920
+  offset: 127, 393
+  index: -1
+Rotate_17
+  rotate: false
+  xy: 2364, 755
+  size: 791, 752
+  orig: 1080, 1920
+  offset: 126, 393
+  index: -1
+Rotate_18
+  rotate: false
+  xy: 3187, 3009
+  size: 799, 750
+  orig: 1080, 1920
+  offset: 119, 394
+  index: -1
+Rotate_19
+  rotate: false
+  xy: 3988, 3009
+  size: 813, 750
+  orig: 1080, 1920
+  offset: 108, 394
+  index: -1
+Rotate_20
+  rotate: false
+  xy: 4027, 3761
+  size: 817, 749
+  orig: 1080, 1920
+  offset: 111, 395
+  index: -1
+Rotate_21
+  rotate: false
+  xy: 2368, 3015
+  size: 817, 749
+  orig: 1080, 1920
+  offset: 122, 395
+  index: -1
+Rotate_22
+  rotate: false
+  xy: 2, 2271
+  size: 812, 750
+  orig: 1080, 1920
+  offset: 128, 394
+  index: -1
+Rotate_23
+  rotate: false
+  xy: 816, 2266
+  size: 798, 750
+  orig: 1080, 1920
+  offset: 131, 394
+  index: -1
+Rotate_24
+  rotate: false
+  xy: 3157, 750
+  size: 790, 752
+  orig: 1080, 1920
+  offset: 133, 393
+  index: -1
+Rotate_25
+  rotate: false
+  xy: 3949, 750
+  size: 778, 752
+  orig: 1080, 1920
+  offset: 144, 393
+  index: -1
+Rotate_26
+  rotate: false
+  xy: 2380, 1509
+  size: 779, 751
+  orig: 1080, 1920
+  offset: 142, 394
+  index: -1
+Rotate_27
+  rotate: false
+  xy: 1616, 2263
+  size: 775, 750
+  orig: 1080, 1920
+  offset: 140, 395
+  index: -1
+Rotate_28
+  rotate: false
+  xy: 2, 3029
+  size: 768, 750
+  orig: 1080, 1920
+  offset: 141, 395
+  index: -1
+Rotate_29
+  rotate: false
+  xy: 3161, 1504
+  size: 777, 751
+  orig: 1080, 1920
+  offset: 131, 394
+  index: -1
+Rotate_30
+  rotate: false
+  xy: 3940, 1504
+  size: 776, 751
+  orig: 1080, 1920
+  offset: 130, 394
+  index: -1
+Rotate_31
+  rotate: false
+  xy: 2, 6
+  size: 784, 752
+  orig: 1080, 1920
+  offset: 131, 393
+  index: -1
+Rotate_32
+  rotate: false
+  xy: 788, 2
+  size: 796, 752
+  orig: 1080, 1920
+  offset: 125, 393
+  index: -1
+Rotate_33
+  rotate: false
+  xy: 3171, 2257
+  size: 804, 750
+  orig: 1080, 1920
+  offset: 118, 394
+  index: -1
+Rotate_34
+  rotate: false
+  xy: 3977, 2257
+  size: 812, 750
+  orig: 1080, 1920
+  offset: 112, 394
+  index: -1
+Rotate_35
+  rotate: false
+  xy: 780, 1514
+  size: 817, 750
+  orig: 1080, 1920
+  offset: 108, 394
+  index: -1
+Rotate_36
+  rotate: false
+  xy: 2406, 4518
+  size: 811, 743
+  orig: 1080, 1920
+  offset: 112, 400
+  index: -1
+Rotate_37
+  rotate: false
+  xy: 797, 4526
+  size: 800, 735
+  orig: 1080, 1920
+  offset: 120, 406
+  index: -1

assets/scripts/Events.ts

+export const eventTarget = new cc.EventTarget();
+
+export const SHOW_ACTION_SCREEN = 'SHOW_ACTION_SCREEN';
+export const SHOW_START_SCREEN = 'SHOW_START_SCREEN';
+
+export const SHOW_CARD_POPUP = 'SHOW_CARD_POPUP';
+export const SHOW_SELECT_POPUP = 'SHOW_SELECT_POPUP';
\ No newline at end of file

assets/scripts/GamePlay/BGController.ts

+
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class BGController extends cc.Component {
+   
+}

assets/scripts/GamePlay/BuaController.ts

+import { eventTarget, SHOW_ACTION_SCREEN, SHOW_CARD_POPUP } from "../Events";
+import { Global } from "../Global";
+import ChumController from "./ChumController";
+
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class BuaController extends cc.Component {
+    @property(cc.Node)
+    private chumNode: cc.Node = null;
+
+    private _chumCtrl: ChumController = null;
+    private spine: sp.Skeleton = null;
+    private _count = 0;
+    private _actions: Function[] = [];
+    private _skins = ["Bua", "Ga", "Gai_lung", "Gay"]
+
+    protected onLoad(): void {
+        this._chumCtrl = this.chumNode.getComponent(ChumController);
+        this.spine = this.node.getComponent(sp.Skeleton);
+
+        // this.spine.setSkin(this._skins[this.index % this._skins.length]);
+        this.spine.setSkin('Bua');
+
+        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
+        this._actions = [this.playAnimationDap1, this.playAnimationDap2, this.playAnimationDap3, this.playAnimationDap4];
+    }
+
+    public onSetTool() {
+        console.log('onSetTool', )
+        this.spine.setSkin(this._skins[Global.tool % this._skins.length])
+    }
+
+    private onTouchStart(): void {
+        this._actions[this._count].bind(this)();
+        console.log('this._count', this._count)
+        this._count = (this._count + 1) % this._actions.length;
+    }
+
+    private playAnimationDap1(): void {
+        this.spine.setAnimation(0, "Dap1", false);
+        this.spine.timeScale = 1;
+        this.playSound();
+        this._chumCtrl.playAnimationNut1();
+    }
+
+    private playAnimationDap2(): void {
+        this.spine.setAnimation(0, "Dap2", false);
+        this.spine.timeScale = 1.2;
+        this.playSound();
+        this._chumCtrl.playAnimationNut2();
+    }
+
+    private playAnimationDap3(): void {
+        this.spine.setAnimation(0, "Dap3", false);
+        this.spine.timeScale = 1.4;
+        this.playSound();
+        this._chumCtrl.playAnimationNut3();
+    }
+
+    private playAnimationDap4(): void {
+        this.spine.setAnimation(0, "Dap4", false);
+        this.spine.timeScale = 1.6;
+        this.playSound();
+        this._chumCtrl.playAnimationNut4();
+
+        this.scheduleOnce(() => {
+            eventTarget.emit(SHOW_CARD_POPUP);
+        }, 0.5)
+    }
+
+    private playSound() {
+        // this.node.getComponent(cc.AudioSource).play();
+    }
+}

assets/scripts/GamePlay/ChumController.ts

+import { eventTarget, SHOW_ACTION_SCREEN } from "../Events";
+
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class ChumController extends cc.Component {
+    private spine: sp.Skeleton = null;
+
+    private _count = 0;
+    private _actions: Function[] = [];
+
+    protected onLoad(): void {
+        this.spine = this.node.getComponent(sp.Skeleton);
+
+        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
+        this._actions = [this.playAnimationNut1, this.playAnimationNut2, this.playAnimationNut3, this.playAnimationNut4];
+    }
+
+    private onTouchStart(): void {
+        // this._actions[this._count].bind(this)();
+        // this._count = (this._count + 1) % this._actions.length;
+    }
+
+    public playAnimationNut1(): void {
+        this.spine.setAnimation(0, "nut1", true);
+        this.spine.timeScale = 1;
+    }
+
+    public playAnimationNut2(): void {
+        this.spine.setAnimation(0, "nut2", true);
+        this.spine.timeScale = 1;
+    }
+
+    public playAnimationNut3(): void {
+        this.spine.setAnimation(0, "nut3", true);
+        this.spine.timeScale = 0.5;
+    }
+
+    public playAnimationNut4(): void {
+        this.spine.setAnimation(0, "nut4", false);
+        this.spine.timeScale = 0.5;
+    }
+
+}

assets/scripts/GamePlay/HuController.ts

+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class HuController extends cc.Component {
+
+    private spine: sp.Skeleton = null;
+
+    private _isRotate: boolean = false;
+
+    protected onLoad(): void {
+        this.spine = this.node.getComponent(sp.Skeleton);
+        this.setRotateAnim();
+
+        this.node.on(cc.Node.EventType.TOUCH_START, this.toggleAnim, this);
+        // this.spine.setCompleteListener((trackEntry) => {
+        //     cc.log("Animation completed: " + trackEntry.animation.name);
+        // });
+    }
+
+    private setRotateAnim(): void {
+        this.spine.setAnimation(1, "Rotate", true);
+        this.spine.timeScale = 0.5;
+    }
+
+    private pauseAnim(): void {
+        this.spine.timeScale = 0;
+    }
+
+    private unPauseAnim(): void {
+        this.spine.timeScale = 0.5;
+        this.node.scaleX *= -1;
+    }
+
+    private toggleAnim(): void {
+        if (this._isRotate) {
+            this.unPauseAnim();
+        } else {
+            this.pauseAnim();
+        }
+        this._isRotate = !this._isRotate;
+    }
+
+    private setIdleAnim(): void {
+        this.spine.setAnimation(1, "Idle", false);
+    }
+}

assets/scripts/GamePlay/Main.ts

+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class Main extends cc.Component {
+    private _bg: cc.Sprite = null;
+
+    protected onLoad(): void {
+
+        // this.onSkew();
+    }
+
+
+    private onSkew() {
+        this._bg = this.node.getComponentInChildren(cc.Sprite);
+
+        function createBottleSpinAnimation(node) {
+            cc.resources.loadDir("Anim_MB", cc.SpriteFrame, (err, spriteFrames) => {
+                if (err) {
+                    console.error("Lỗi load ảnh:", err);
+                    return;
+                }
+
+                let clip = cc.AnimationClip.createWithSpriteFrames(spriteFrames, spriteFrames.length);
+                console.log('spriteFrames.length', spriteFrames.length)
+                clip.name = "bottleSpin";
+                clip.wrapMode = cc.WrapMode.Loop; // Lặp vô hạn
+                clip.speed = 1; // Tốc độ chạy animation (1 giây/lượt)
+
+                let animation = node.getComponent(cc.Animation) || node.addComponent(cc.Animation);
+                animation.addClip(clip);
+                animation.play("bottleSpin");
+            });
+        }
+
+        createBottleSpinAnimation(this._bg.node);
+    }
+
+    protected start(): void {
+        this.scheduleOnce(() => {
+            this.testDevice();
+        }, 2)
+    }
+
+    private _x: number = 0;
+    private _y: number = 0;
+    private _z: number = 0;
+    private _count = 0;
+    private _isShake = false;
+
+    private testDevice() {
+        window.addEventListener("devicemotion", (event) => {
+            if (!event.accelerationIncludingGravity) {
+                return;
+            }
+
+            const x = event.accelerationIncludingGravity.x;
+            const y = event.accelerationIncludingGravity.y;
+            const z = event.accelerationIncludingGravity.z;
+
+            if (x - this._x > 5 || y - this._y > 5 || z - this._z > 5) {
+                if (this._isShake) {
+                    this._count++;
+                }
+            }
+
+            if (x - this._x < -5 || y - this._y < -5 || z - this._z < -5) {
+                if (!this._isShake) {
+                    this._count++;
+                }
+            }
+
+            if (this._count > 0) {
+                this.scheduleOnce(() => {
+                    this._count = 0;
+                }, 1.5)
+            }
+
+            if (this._count > 5) {
+                this._count = 0;
+                cc.tween(this._bg.node)
+                    .to(0.2, { position: cc.v3(20, 0, 0) })
+                    .to(0.2, { position: cc.v3(-20, 0, 0) })
+                    .to(0.2, { position: cc.v3(20, 0, 0) })
+                    .to(0.2, { position: cc.v3(-20, 0, 0) })
+                    .to(0.2, { position: cc.v3(0, 0, 0) })
+                    .start();
+            }
+
+
+            this._x = x;
+            this._y = y;
+            this._z = z;
+        });
+    }
+
+}

assets/scripts/GamePlay/TheController.ts

+
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class TheController extends cc.Component {
+
+}

assets/scripts/Global.ts

+export class Global {
+    public static tool: number = 0;
+}
\ No newline at end of file

assets/scripts/UI/ActionScreen.ts

+import { eventTarget, SHOW_ACTION_SCREEN, SHOW_CARD_POPUP } from "../Events";
+import BuaController from "../GamePlay/BuaController";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class ActionScreen extends cc.Component {
+
+    private _buaController: BuaController = null;
+
+    onLoad() {
+        this.node.position = cc.v3();
+        this.node.active = false;
+        eventTarget.on(SHOW_ACTION_SCREEN, this.showScreen, this);
+        this._buaController = this.getComponentInChildren(BuaController);
+    }
+
+    private showScreen() {
+        this.node.active = true;
+        this._buaController.onSetTool();
+    }
+
+}

assets/scripts/UI/CardPopup.ts

+
+
+import { eventTarget, SHOW_CARD_POPUP } from "../Events";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class CardPopup extends cc.Component {
+
+    private _replayBtn: cc.Node;
+
+
+    onLoad() {
+        this._replayBtn = this.node.getComponentInChildren(cc.Button).node;
+        this.node.active = false;
+        this.node.position = cc.v3();
+        eventTarget.on(SHOW_CARD_POPUP, this.showCard, this);
+        this._replayBtn.on('click', this.onReplayBtnClick, this);
+    }
+
+
+    private showCard() {
+        this.node.active = true;
+    }
+
+    private onReplayBtnClick() {
+        this.node.active = false;
+    }
+}

assets/scripts/UI/SelectPopup.ts

+import { eventTarget, SHOW_ACTION_SCREEN, SHOW_SELECT_POPUP } from "../Events";
+
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class SelectPopup extends cc.Component {
+
+    private _okBtnNode: cc.Node = null;
+
+    onLoad() {
+        this._okBtnNode = this.getComponentInChildren(cc.Button).node;
+        this.node.active = false;
+        this.node.position = cc.v3();
+        eventTarget.on(SHOW_SELECT_POPUP, this.showPopup, this);
+        this._okBtnNode.on('click', this.onOkBtnClick, this);
+    }
+
+
+    private showPopup() {
+        console.log('showPopup', 11)
+        this.node.active = true;
+    }
+    private onOkBtnClick() {
+        this.node.active = false;
+        eventTarget.emit(SHOW_ACTION_SCREEN);
+    }
+
+}

assets/scripts/UI/StartScreen.ts

+import { eventTarget, SHOW_ACTION_SCREEN, SHOW_SELECT_POPUP, SHOW_START_SCREEN } from "../Events";
+import { Global } from "../Global";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class StartScreen extends cc.Component {
+    @property(cc.Node)
+    private selectBtnNode: cc.Node = null;
+
+    @property(cc.Node)
+    private contentNode: cc.Node = null;
+    @property(cc.Node)
+    private checkedNode: cc.Node = null;
+
+
+    protected onLoad(): void {
+        this.selectBtnNode.on('click', this.onSelectBtnClick, this);
+   
+
+        this.contentNode.children.forEach((item: cc.Node, index: number) => {
+            item.on(cc.Node.EventType.TOUCH_START, () => this.onItemNodeClick(item, index), this);
+        });
+
+        eventTarget.on(SHOW_START_SCREEN, () => this.node.active = true, this);
+        eventTarget.on(SHOW_ACTION_SCREEN, () => this.node.active = false, this);
+    }
+
+    private onItemNodeClick(item: cc.Node, index: number) {
+        this.checkedNode.active = true;
+        this.checkedNode.setPosition(item.getPosition());
+        Global.tool = index;
+    }
+
+
+    private onSelectBtnClick() {
+        console.log('onSelectBtnClick', )
+        eventTarget.emit(SHOW_SELECT_POPUP);
+    }
+
+
+}

jsconfig.json

+{
+    "compilerOptions": {
+        "target": "es6",
+        "module": "commonjs",
+        "experimentalDecorators": true
+    },
+    "exclude": [
+        "node_modules",
+        ".vscode",
+        "library",
+        "local",
+        "settings",
+        "temp"
+    ]
+}
\ No newline at end of file

project.json

+{
+  "engine": "cocos-creator-js",
+  "packages": "packages",
+  "name": "Dap-Hu",
+  "id": "0443d2cc-1b49-40ac-91e4-8905c8748d09",
+  "version": "2.4.13",
+  "isNew": false
+}
\ No newline at end of file

settings/builder.json

+{
+  "title": "Dap-Hu",
+  "packageName": "org.cocos2d.demo",
+  "startScene": "237679e2-3add-4264-86d1-1ddf0b01907a",
+  "excludeScenes": [],
+  "orientation": {
+    "landscapeRight": true,
+    "landscapeLeft": true,
+    "portrait": false,
+    "upsideDown": false
+  },
+  "webOrientation": "portrait",
+  "inlineSpriteFrames": true,
+  "inlineSpriteFrames_native": true,
+  "mainCompressionType": "default",
+  "mainIsRemote": false,
+  "optimizeHotUpdate": false,
+  "md5Cache": true,
+  "nativeMd5Cache": true,
+  "encryptJs": true,
+  "xxteaKey": "1340171d-c2d3-4b",
+  "zipCompressJs": true,
+  "fb-instant-games": {},
+  "android": {
+    "packageName": "org.cocos2d.demo",
+    "REMOTE_SERVER_ROOT": ""
+  },
+  "ios": {
+    "packageName": "org.cocos2d.demo",
+    "REMOTE_SERVER_ROOT": "",
+    "ios_enable_jit": true
+  },
+  "mac": {
+    "packageName": "org.cocos2d.demo",
+    "REMOTE_SERVER_ROOT": "",
+    "width": 1280,
+    "height": 720
+  },
+  "win32": {
+    "REMOTE_SERVER_ROOT": "",
+    "width": 1280,
+    "height": 720
+  },
+  "android-instant": {
+    "packageName": "org.cocos2d.demo",
+    "REMOTE_SERVER_ROOT": "",
+    "pathPattern": "",
+    "scheme": "https",
+    "host": "",
+    "skipRecord": false,
+    "recordPath": ""
+  },
+  "openharmony": {
+    "packageName": "com.cocos.openharmony",
+    "REMOTE_SERVER_ROOT": ""
+  },
+  "appBundle": false,
+  "agreements": {}
+}

settings/project.json

+{
+  "last-module-event-record-time": 1743246331454
+}

settings/services.json

+{
+	"game": {
+		"name": "UNKNOW GAME",
+		"appid": "UNKNOW"
+	}
+}
\ No newline at end of file

tsconfig.json

+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": [ "es2015", "es2017", "dom" ],
+    "target": "es5",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "outDir": "temp/vscode-dist",
+    "forceConsistentCasingInFileNames": true
+  },
+  "exclude": [
+    "node_modules",
+    "library",
+    "local",
+    "temp",
+    "build",
+    "settings"
+  ]
+}
\ No newline at end of file