UI Shop

assets/Animation/UI/BtnPlayLevel.anim

+{
+  "__type__": "cc.AnimationClip",
+  "_name": "BtnPlayLevel",
+  "_objFlags": 0,
+  "_native": "",
+  "_duration": 0.5,
+  "sample": 60,
+  "speed": 0.4,
+  "wrapMode": 2,
+  "curveData": {
+    "props": {
+      "scale": [
+        {
+          "frame": 0,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 1.35,
+            "y": 1.2,
+            "z": 1
+          }
+        },
+        {
+          "frame": 0.25,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 1.45,
+            "y": 1.35,
+            "z": 1
+          }
+        },
+        {
+          "frame": 0.5,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 1.35,
+            "y": 1.2,
+            "z": 1
+          }
+        }
+      ]
+    }
+  },
+  "events": []
+}
\ No newline at end of file

assets/Animation/UI/BtnPlayLevel.anim.meta

+{
+  "ver": "2.1.2",
+  "uuid": "4c18894f-769f-4a3b-9955-33211a16110d",
+  "importer": "animation-clip",
+  "subMetas": {}
+}
\ No newline at end of file

assets/Animation/UI/ItemLevel.anim

+{
+  "__type__": "cc.AnimationClip",
+  "_name": "ItemLevel",
+  "_objFlags": 0,
+  "_native": "",
+  "_duration": 0.5,
+  "sample": 60,
+  "speed": 0.4,
+  "wrapMode": 2,
+  "curveData": {
+    "props": {
+      "scale": [
+        {
+          "frame": 0,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 1,
+            "y": 1,
+            "z": 1
+          }
+        },
+        {
+          "frame": 0.25,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 1.1,
+            "y": 1.1,
+            "z": 1
+          }
+        },
+        {
+          "frame": 0.5,
+          "value": {
+            "__type__": "cc.Vec3",
+            "x": 1,
+            "y": 1,
+            "z": 1
+          }
+        }
+      ]
+    }
+  },
+  "events": []
+}
\ No newline at end of file

assets/Animation/UI/ItemLevel.anim.meta

+{
+  "ver": "2.1.2",
+  "uuid": "9408570f-ff1f-49bd-9952-1f9a18238d28",
+  "importer": "animation-clip",
+  "subMetas": {}
+}
\ No newline at end of file

assets/Animation/Worms/Worm2/Worm_2_Eat.anim

@@ -6,7 +6,7 @@
   "_duration": 1.0166666666666666,
   "sample": 60,
   "speed": 1,
-  "wrapMode": 1,
+  "wrapMode": 2,
   "curveData": {
     "comps": {
       "cc.Sprite": {

assets/Prefab/Skin/Skin_1.prefab

@@ -296,13 +296,15 @@
       "__id__": 5
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "45d948da-daab-4635-9f85-6409abb0edab"
+    },
     "_clips": [
       {
         "__uuid__": "45d948da-daab-4635-9f85-6409abb0edab"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/Skin/Skin_2.prefab

@@ -296,13 +296,15 @@
       "__id__": 5
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "99b3f64e-e2b4-4fe5-a94a-1e35cdc8d5db"
+    },
     "_clips": [
       {
         "__uuid__": "99b3f64e-e2b4-4fe5-a94a-1e35cdc8d5db"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/Skin/Skin_3.prefab

@@ -296,13 +296,15 @@
       "__id__": 5
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "3b43a330-46ab-429b-b554-5259f962006f"
+    },
     "_clips": [
       {
         "__uuid__": "3b43a330-46ab-429b-b554-5259f962006f"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/Skin/Skin_4.prefab

@@ -510,14 +510,15 @@
       "__id__": 11
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "969ed3f2-bceb-4bff-b3bc-06e672c8edb3"
+    },
     "_clips": [
-      null,
       {
         "__uuid__": "969ed3f2-bceb-4bff-b3bc-06e672c8edb3"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/Skin/Skin_5.prefab

@@ -296,13 +296,15 @@
       "__id__": 5
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "fabbae1a-eeee-4850-9320-4227ab074bb9"
+    },
     "_clips": [
       {
         "__uuid__": "fabbae1a-eeee-4850-9320-4227ab074bb9"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/Skin/Skin_6.prefab

@@ -296,13 +296,15 @@
       "__id__": 5
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "e8360b20-61d9-4d3e-811c-60554f9e4be7"
+    },
     "_clips": [
       {
         "__uuid__": "e8360b20-61d9-4d3e-811c-60554f9e4be7"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/Skin/Skin_7.prefab

@@ -296,13 +296,15 @@
       "__id__": 5
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "f2bfa9ec-7a49-4b71-a1aa-5211aa643197"
+    },
     "_clips": [
       {
         "__uuid__": "f2bfa9ec-7a49-4b71-a1aa-5211aa643197"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/Skin/Skin_8.prefab

@@ -296,13 +296,15 @@
       "__id__": 5
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "6327a150-8533-43cf-8be4-d069fce8be59"
+    },
     "_clips": [
       {
         "__uuid__": "6327a150-8533-43cf-8be4-d069fce8be59"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/Skin/Skin_9.prefab

@@ -296,13 +296,15 @@
       "__id__": 5
     },
     "_enabled": true,
-    "_defaultClip": null,
+    "_defaultClip": {
+      "__uuid__": "3f895b2c-5c25-4f95-9c27-e1c9995b2fb9"
+    },
     "_clips": [
       {
         "__uuid__": "3f895b2c-5c25-4f95-9c27-e1c9995b2fb9"
       }
     ],
-    "playOnLoad": false,
+    "playOnLoad": true,
     "_id": ""
   },
   {

assets/Prefab/UI/Level/ItemLevel.prefab

@@ -35,12 +35,15 @@
       {
         "__id__": 21
       },
+      {
+        "__id__": 23
+      },
       {
         "__id__": 22
       }
     ],
     "_prefab": {
-      "__id__": 24
+      "__id__": 25
     },
     "_opacity": 255,
     "_color": {
@@ -764,6 +767,9 @@
       "__id__": 1
     },
     "_enabled": true,
+    "animItemLevel": {
+      "__id__": 22
+    },
     "txtLevel": {
       "__id__": 6
     },
@@ -775,6 +781,25 @@
     },
     "_id": ""
   },
+  {
+    "__type__": "cc.Animation",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "_defaultClip": {
+      "__uuid__": "9408570f-ff1f-49bd-9952-1f9a18238d28"
+    },
+    "_clips": [
+      {
+        "__uuid__": "9408570f-ff1f-49bd-9952-1f9a18238d28"
+      }
+    ],
+    "playOnLoad": false,
+    "_id": ""
+  },
   {
     "__type__": "cc.Button",
     "_name": "",
@@ -789,7 +814,7 @@
     "zoomScale": 1.2,
     "clickEvents": [
       {
-        "__id__": 23
+        "__id__": 24
       }
     ],
     "_N$interactable": true,

assets/Prefab/UI/Shop.meta

+{
+  "ver": "1.1.3",
+  "uuid": "98b53be0-c23c-4943-b17a-8e8f9b365094",
+  "importer": "folder",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}
\ No newline at end of file

assets/Prefab/UI/Shop/Skin.prefab.meta

+{
+  "ver": "1.3.2",
+  "uuid": "33860531-1b21-4c18-99fb-06739e12d0bc",
+  "importer": "prefab",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "readonly": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Scenes/Loading.fire

@@ -1010,6 +1010,20 @@
     "loadingLabel": {
       "__id__": 14
     },
+    "backgroundSprite": {
+      "__id__": 23
+    },
+    "spriteFrameBackground": [
+      {
+        "__uuid__": "2b5ceff7-7f90-43d8-a623-d660a154c648"
+      },
+      {
+        "__uuid__": "5f89ef98-8a12-4b4b-9668-7c2786f35c65"
+      },
+      {
+        "__uuid__": "fb27d399-b5cc-4081-89da-afb48bf0de9f"
+      }
+    ],
     "_id": "40e5qNKa1PdYwcUW+FeLTB"
   },
   {

assets/Scripts/Data/Constans.ts

@@ -5,5 +5,12 @@ export const STATUS_GAME = cc.Enum({
 export const GAME_NAME = "Apple_Worm";
 export const LEVEL = "Level";
 export const MUSIC = "Music";
+export const BG = "ID_BACKGRROUND";
+export const GEM = "GEM";
+export const HINT = "HINT";
+export const UNDO = "UNDO";
 export const WORM_ACTIVE = "Worm_Active";
 export const WORM_SELECT = "Worm_Select";
+export const IS_FREE_SPIN = "IsFreeSpin";
+export const REMAININGTIME = "RemainingTime";
+export const ELAPSESTIME = "ElapsedTime";

assets/Scripts/Data/LocalStorage.ts

-import { GAME_NAME, LEVEL, MUSIC, WORM_ACTIVE, WORM_SELECT } from "./Constans";
+import { BG, GAME_NAME, GEM, HINT, IS_FREE_SPIN, LEVEL, MUSIC, UNDO, WORM_ACTIVE, WORM_SELECT } from "./Constans";
 
 const { ccclass, property } = cc._decorator;
 
@@ -13,10 +13,32 @@ export default class LocalStorage {
         cc.sys.localStorage.setItem(GAME_NAME + '-' + MUSIC, value);
     }
 
+    public static setBackground(value: number) {
+        cc.sys.localStorage.setItem(GAME_NAME + '-' + BG, value);
+    }
+
+    public static setGem(value: number) {
+        cc.sys.localStorage.setItem(GAME_NAME + '-' + GEM, value);
+    }
+    public static setHint(value: number) {
+        cc.sys.localStorage.setItem(GAME_NAME + '-' + HINT, value);
+    }
+    public static setUndo(value: number) {
+        cc.sys.localStorage.setItem(GAME_NAME + '-' + UNDO, value);
+    }
+
+    public static setSpin(value: boolean) {
+        cc.sys.localStorage.setItem(GAME_NAME + '-' + IS_FREE_SPIN, value);
+    }
+
     public static setWormSelected(value: number) {
         cc.sys.localStorage.setItem(GAME_NAME + '-' + WORM_SELECT, value);
     }
 
+    public static set(value: number) {
+        cc.sys.localStorage.setItem(GAME_NAME + '-' + WORM_SELECT, value);
+    }
+
     public static setWormActive(value: number) {
         let arrayStr = cc.sys.localStorage.getItem(GAME_NAME + '-' + WORM_ACTIVE);
         let array = arrayStr ? JSON.parse(arrayStr) : [0];
@@ -34,7 +56,7 @@ export default class LocalStorage {
         } else return JSON.parse(cc.sys.localStorage.getItem(GAME_NAME + '-' + LEVEL));
     }
 
-    public static getWormActive() {
+    public static getWormActive(): [number] {
         let arrayStr = cc.sys.localStorage.getItem(GAME_NAME + '-' + WORM_ACTIVE);
         let array = arrayStr ? JSON.parse(arrayStr) : [0];
         return array;
@@ -47,6 +69,33 @@ export default class LocalStorage {
         } else return JSON.parse(cc.sys.localStorage.getItem(GAME_NAME + '-' + LEVEL));
     }
 
+    public static getGem(): number {
+        if (cc.sys.localStorage.getItem(GAME_NAME + '-' + GEM) == null) {
+            cc.sys.localStorage.setItem(GAME_NAME + '-' + GEM, 0);
+            return 0;
+        } else return JSON.parse(cc.sys.localStorage.getItem(GAME_NAME + '-' + GEM));
+    }
+
+    public static getHint(): number {
+        if (cc.sys.localStorage.getItem(GAME_NAME + '-' + HINT) == null) {
+            cc.sys.localStorage.setItem(GAME_NAME + '-' + HINT, 0);
+            return 0;
+        } else return JSON.parse(cc.sys.localStorage.getItem(GAME_NAME + '-' + HINT));
+    }
+    public static getUndo(): number {
+        if (cc.sys.localStorage.getItem(GAME_NAME + '-' + UNDO) == null) {
+            cc.sys.localStorage.setItem(GAME_NAME + '-' + UNDO, 0);
+            return 0;
+        } else return JSON.parse(cc.sys.localStorage.getItem(GAME_NAME + '-' + UNDO));
+    }
+
+    public static getBackground(): number {
+        if (cc.sys.localStorage.getItem(GAME_NAME + '-' + BG) == null) {
+            cc.sys.localStorage.setItem(GAME_NAME + '-' + BG, 0);
+            return 0;
+        } else return JSON.parse(cc.sys.localStorage.getItem(GAME_NAME + '-' + BG));
+    }
+
     public static getMusic(): boolean {
         if (cc.sys.localStorage.getItem((GAME_NAME + '-' + MUSIC)) == null) {
             cc.sys.localStorage.setItem(GAME_NAME + '-' + MUSIC, true);
@@ -54,6 +103,13 @@ export default class LocalStorage {
         } else return JSON.parse(cc.sys.localStorage.getItem(GAME_NAME + '-' + MUSIC));
     }
 
+    public static getIsFreeSpin(): boolean {
+        if (cc.sys.localStorage.getItem((GAME_NAME + '-' + IS_FREE_SPIN)) == null) {
+            cc.sys.localStorage.setItem(GAME_NAME + '-' + IS_FREE_SPIN, true);
+            return true;
+        } else return JSON.parse(cc.sys.localStorage.getItem(GAME_NAME + '-' + IS_FREE_SPIN));
+    }
+
 
 }
 

assets/Scripts/GamePlay/GameManager.ts

@@ -18,18 +18,18 @@ export default class GameManager extends cc.Component {
     uiManager: UIManager = null;
 
     dataLevels: DataLevel[] = [];
-
+    wormTry: number = 0;
     async onLoad() {
        await this.initialize();
     }
 
     protected start(): void {
-        this.backHone()
     }
 
     async initialize() {
         this.dataLevels =  await this.loadLevel() as DataLevel[];
         this.uiManager.initialize(this);
+        this.backHone();
     }
 
     backHone() {

assets/Scripts/GamePlay/MapManager.ts

+// Learn TypeScript:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
+// Learn Attribute:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
+// Learn life-cycle callbacks:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
+
+const {ccclass, property} = cc._decorator;
+
+@ccclass
+export default class NewClass extends cc.Component {
+
+    @property(cc.Label)
+    label: cc.Label = null;
+
+    @property
+    text: string = 'hello';
+
+    // LIFE-CYCLE CALLBACKS:
+
+    // onLoad () {}
+
+    start () {
+
+    }
+
+    // update (dt) {}
+}

assets/Scripts/GamePlay/MapManager.ts.meta

+{
+  "ver": "1.1.0",
+  "uuid": "3b31a0c9-6b50-4ec3-87a5-3aac4dff4ccf",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Scripts/UI/Popup/ItemSkin.ts

+// Learn TypeScript:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
+// Learn Attribute:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
+// Learn life-cycle callbacks:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
+
+const {ccclass, property} = cc._decorator;
+
+@ccclass
+export default class ItemSkin extends cc.Component {
+
+    @property
+    id: number = 0;
+
+    @property(cc.Node)
+    lock: cc.Node = null;
+
+    @property(cc.Sprite)
+    worm: cc.Sprite = null;
+    
+    @property(cc.Node)
+    selected: cc.Node = null;
+
+    @property(cc.Node)
+    iconChecked: cc.Node = null;
+
+    @property(cc.Node)
+    btnBuy: cc.Node = null;
+
+    @property(cc.Node)
+    btnEquip: cc.Node = null;
+
+    @property(cc.Label)
+    txtEquip: cc.Label = null;
+    
+    isLock: boolean = true;
+    isSlected: boolean = true;
+
+    updateSkin(data){
+        this.id = data.id;
+        this.worm.spriteFrame = data.skin;
+        this.isSlected = data.isSelected;
+        this.isLock = data.isLock;
+        if (this.isLock) {
+            this.lock.active = true;
+            this.selected.active = false;
+            this.iconChecked.active = false;
+        }
+        if (data.isSelected) {
+            this.selected.active = true;
+        }
+
+    }
+
+    onSelected(){
+        this.selected.active = true;
+        if (this.isLock) {
+            this.btnEquip.active = false;
+            this.btnBuy.active = true;
+        }else{
+            this.btnEquip.active = false;
+            this.btnBuy.active = true;
+            if (this.isSlected) {
+                this.txtEquip.string = "Equipped";
+            }else{
+                this.txtEquip.string = "Equip";
+            }
+        }
+    }
+}

assets/Scripts/UI/Popup/ItemSkin.ts.meta

+{
+  "ver": "1.1.0",
+  "uuid": "4d0912ba-0d3c-4d25-a0f6-80ca9ab30341",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Scripts/UI/Popup/LosePopup.ts

-// Learn TypeScript:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
-// Learn Attribute:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
-// Learn life-cycle callbacks:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
-
 import UIManager from "../UIManager";
 import PopupUI, { PopupName } from "./PopupUI";
 

assets/Scripts/UI/Popup/PopupReward.ts

+import LocalStorage from "../../Data/LocalStorage";
+import LuckySpinScreen from "../Screen/LuckySpinScreen";
+import UIManager from "../UIManager";
+import PopupUI, { PopupName } from "./PopupUI";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class RewardPopup extends PopupUI {
+
+    @property(cc.Sprite)
+    iconSprite: cc.Sprite = null;
+
+    @property(cc.Label)
+    txtCount: cc.Label = null;
+
+    @property(cc.SpriteFrame)
+    spriteHint: cc.SpriteFrame = null;
+
+    @property(cc.SpriteFrame)
+    spriteUndo: cc.SpriteFrame = null;
+
+    @property(cc.SpriteFrame)
+    spriteGem10: cc.SpriteFrame = null;
+
+    @property(cc.SpriteFrame)
+    spriteGem20: cc.SpriteFrame = null;
+
+    @property(cc.SpriteFrame)
+    spriteGem30: cc.SpriteFrame = null;
+
+    @property(cc.SpriteFrame)
+    spriteGem40: cc.SpriteFrame = null;
+
+    data = null;
+    luckySpin: LuckySpinScreen = null;
+
+    override initialize(manager: UIManager): void {
+        super.initialize(manager);
+        this.popupName = PopupName.REWARD;
+    }
+
+    hide(): void {
+        super.hide();
+    }
+
+    show(): void {
+        super.show();
+    }
+
+    setUp(data, luckySpin) {
+        this.luckySpin = luckySpin
+        this.data = data;
+        console.log(data);
+        switch (data.type) {
+            case 'UNDO':
+                this.iconSprite.spriteFrame = this.spriteUndo;
+                this.txtCount.string = data.count;
+                break;
+            case 'HINT':
+                this.iconSprite.spriteFrame = this.spriteHint;
+                this.txtCount.string = data.count;
+                break;
+            case 'GEM':
+                console.log(data.count);
+                if (data.count == 10) {
+                    console.log(data.count);
+                    this.iconSprite.spriteFrame = this.spriteGem10;
+                    this.txtCount.string = "+" + data.count;
+                } else if (data.count == 20) {
+                    this.iconSprite.spriteFrame = this.spriteGem20;
+                    this.txtCount.string = "+" + data.count;
+                } else if (data.count == 30) {
+                    this.iconSprite.spriteFrame = this.spriteGem30;
+                    this.txtCount.string = "+" + data.count;
+                } else if (data.count == 40) {
+                    this.iconSprite.spriteFrame = this.spriteGem40;
+                    this.txtCount.string = "+" + data.count;
+                }
+                break;
+        }
+    }
+
+    onClickClaim() {
+        this.claim(false);
+    }
+
+    onClickClaimX2() {
+        this.claim(true);
+    }
+
+    claim(isX2: boolean) {
+        this.hide();
+        this.luckySpin.isRotary = true;
+        let count = this.data.count;
+        if (isX2) {
+            count = this.data * 2;
+        }
+        switch (this.data.type) {
+            case 'UNDO':
+                let undo = LocalStorage.getUndo();
+                LocalStorage.setUndo(undo + count);
+                break;
+            case 'HINT':
+                let hint = LocalStorage.getHint();
+                LocalStorage.setHint(hint + count);
+                break;
+            case 'GEM':
+                let gem = LocalStorage.getGem();
+                LocalStorage.setGem(gem + count);
+        }
+    }
+}

assets/Scripts/UI/Popup/PopupReward.ts.meta

+{
+  "ver": "1.1.0",
+  "uuid": "46f04aa9-1197-494a-ab0f-1163612ec7d7",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Scripts/UI/Popup/PopupUI.ts

-// Learn TypeScript:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
-// Learn Attribute:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
-// Learn life-cycle callbacks:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
-
 import UIManager from "../UIManager";
 
 const { ccclass, property } = cc._decorator;
 export enum PopupName {
-    DAILYREWARD, LOSE, WIN, SETTING, SHOPCOIN, SHOPSKIN
+    DAILYREWARD, LOSE, WIN, SETTING, SHOPCOIN, SHOPSKIN, REWARD
 }
 
 @ccclass
 export default class PopupUI extends cc.Component {
-    
+
     popupName: PopupName = PopupName.SETTING;
 
     uiManager: UIManager;
@@ -25,9 +18,20 @@ export default class PopupUI extends cc.Component {
 
     show() {
         this.node.active = true;
+        this.uiManager.activeTransparent();
+        this.node.scale = 0;
+        cc.tween(this.node)
+            .to(1, { scale: 1 }, { easing: "elasticOut" })
+            .start();
     }
 
     hide() {
-        this.node.active = false;
+        cc.tween(this.node)
+            .to(1, { scale: 0 }, { easing: "elasticIn" })
+            .call(() => {
+                this.node.active = false;
+                this.uiManager.deActiveTransparent();
+            })
+            .start();
     }
 }

assets/Scripts/UI/Popup/ShopSkin.ts

+import LocalStorage from "../../Data/LocalStorage";
+import UIManager from "../UIManager";
+import ItemSkin from "./ItemSkin";
+import PopupUI, { PopupName } from "./PopupUI";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class ShopSkin extends PopupUI {
+
+    @property([cc.SpriteFrame])
+    listSkin: cc.SpriteFrame[] = [];
+
+    @property(cc.Sprite)
+    skinWorm: cc.Sprite = null;
+
+    @property(cc.Prefab)
+    itemSkin: cc.Prefab = null;
+
+    @property(cc.Node)
+    containerSkin: cc.Node = null;
+
+    @property(cc.Node)
+    showSkin: cc.Node = null;
+
+    override initialize(manager: UIManager): void {
+        super.initialize(manager);
+        this.popupName = PopupName.SHOPSKIN;
+    }
+
+    showShopSkin() {
+        for (let index: number = 0; index < this.listSkin.length; index++) {
+            let skin: cc.Node = cc.instantiate(this.itemSkin);
+            this.containerSkin.addChild(skin);
+            skin.getComponent(ItemSkin).updateSkin({
+                id: index,
+                skin: this.listSkin[index],
+                isLock : LocalStorage.getWormActive().includes(index),
+                isSelected: LocalStorage.getWormSelected() == index ? true: false
+            });
+
+        }
+    }
+
+    hide(): void {
+        super.hide();
+    }
+
+    show(): void {
+        super.show();
+    }
+
+}

assets/Scripts/UI/Popup/ShopSkin.ts.meta

+{
+  "ver": "1.1.0",
+  "uuid": "77150b55-020d-4457-a2c8-abb452b3ecb7",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Scripts/UI/Screen/Level/ItemLevel.ts

@@ -5,6 +5,8 @@ const { ccclass, property } = cc._decorator;
 @ccclass
 export default class ItemLevel extends cc.Component {
 
+    @property(cc.Animation)
+    animItemLevel: cc.Animation = null;
     @property(cc.Label)
     txtLevel: cc.Label = null;
     @property(cc.Node)
@@ -12,14 +14,16 @@ export default class ItemLevel extends cc.Component {
     @property(cc.Node)
     iconLocked: cc.Node = null;
 
+    idBackground: number = 0;
     level: number = 0;
     isLock = true;
 
-    initialize(level) {
+    initialize(level, idBackground) {
         this.isLock = false;
         this.level = level - 1;
         this.txtLevel.string = level + "";
         this.setup(LocalStorage.getLevel());
+        this.idBackground = idBackground;
     }
 
     setup(curentLevel){
@@ -31,6 +35,7 @@ export default class ItemLevel extends cc.Component {
             this.iconChecked.active = false;
             this.iconLocked.active = false;
             this.txtLevel.node.color.fromHEX("#FFFFFF");
+            this.animItemLevel.play("ItemLevel");
         } else {
             this.iconChecked.active = false;
             this.iconLocked.active = true;
@@ -42,6 +47,7 @@ export default class ItemLevel extends cc.Component {
     retload(){
         this.setup(LocalStorage.getLevel());
     }
+
     onClickLevel() {
         if (this.isLock) {
             return;

assets/Scripts/UI/Screen/Level/Page.ts

@@ -7,38 +7,43 @@
 
 import ItemLevel from "./ItemLevel";
 
-const {ccclass, property} = cc._decorator;
+const { ccclass, property } = cc._decorator;
 
 @ccclass
 export default class Page extends cc.Component {
 
     @property(cc.Prefab)
-    itemLevelPrefab : cc.Prefab = null;
+    itemLevelPrefab: cc.Prefab = null;
 
     @property(cc.Node)
     containerLevels: cc.Node = null;
 
     listItem: ItemLevel[] = [];
     levelPerPage: number = 0;
+    countBackground: number = 0;
 
-    initialize(start, end, levelPerPage){
+    initialize(start, end, levelPerPage) {
         let levelIndex = start;
         for (let i = 0; i < levelPerPage; i++) {
-            let itemLevel: cc.Node = cc.instantiate(this.itemLevelPrefab); 
+            let itemLevel: cc.Node = cc.instantiate(this.itemLevelPrefab);
             this.containerLevels.addChild(itemLevel);
             let l = itemLevel.getComponent(ItemLevel)
-            l.initialize(levelIndex);
+            l.initialize(levelIndex, this.countBackground);
             this.listItem.push(l);
             if (levelIndex < end) {
                 levelIndex++;
             }
+            this.countBackground++;
+            if (this.countBackground > 2) {
+                this.countBackground = 0;
+            }
         }
     }
 
-    reload(){
+    reload() {
         for (let i = 0; i < this.listItem.length; i++) {
-            this.listItem[i].retload();            
+            this.listItem[i].retload();
         }
     }
-   
+
 }

assets/Scripts/UI/Screen/LevelScreen.ts

@@ -21,22 +21,21 @@ export default class LevelScreen extends ScreenUI {
     @property(cc.Node)
     containerNodePage: cc.Node = null;
 
+    @property(cc.Vec3)
+    pageStep: cc.Vec3 = new cc.Vec3(850, 0, 0);
+
+    @property(cc.Label)
+    txtBtnLevel: cc.Label = null;
+
     totalLevels: number = 0;
     levelPerPage: number = 12;
     curentLevel: number = 0;
     totalPages: number = 0;
     currentPage: number = 0;
-
     targetPos: cc.Vec3 = new cc.Vec3(0, 0, 0);
-    @property(cc.Vec3)
-    pageStep: cc.Vec3 = new cc.Vec3(850, 0, 0);
     tweenTime: number = 0.5;
-
-
-
     listNodePage: NodePage[] = []
     listPage: Page[] = []
-
     isActive: boolean = false;
     isMove: boolean = true;
 
@@ -118,15 +117,23 @@ export default class LevelScreen extends ScreenUI {
         for (let index = 0; index < this.listPage.length; index++) {
             this.listPage[index].reload();
         }
-
         for (let i = 0; i < this.listNodePage.length; i++) {
             this.listNodePage[i].deActiveNode();
         }
         this.listNodePage[0].activeNode();
     }
 
+    updateTxtLevel(){
+        this.txtBtnLevel.string = "LEVEL " + (LocalStorage.getLevel() + 1)  ;
+    }
+
+    onClickPlayLevel(){
+        console.log(this.curentLevel);
+    }
+
     override active(): void {
         super.active();
+        this.updateTxtLevel();
         if (!this.isActive) {
             this.isActive = true;
         } else {

assets/Scripts/UI/Screen/LoadingScreen.ts

+import LocalStorage from '../../Data/LocalStorage';
 // Learn TypeScript:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
 // Learn Attribute:
@@ -14,9 +15,23 @@ export default class Loading extends cc.Component {
     loadingBar: cc.ProgressBar = null;
     @property(cc.Label)
     loadingLabel: cc.Label = null;
+    @property(cc.Sprite)
+    backgroundSprite: cc.Sprite = null;
 
+    @property([cc.SpriteFrame])
+    spriteFrameBackground: cc.SpriteFrame[] = [];
     progress: number = 0;
 
+    
+
+    protected onLoad(): void {
+        this.setBackground();
+    }
+
+    setBackground(){
+        this.backgroundSprite.spriteFrame = this.spriteFrameBackground[LocalStorage.getBackground()];
+    }
+
     protected start(): void {
         cc.director.preloadScene("Game", this.onProgress.bind(this), this.onLoaded);
     }

assets/Scripts/UI/Screen/LuckySpinScreen.ts

-// Learn TypeScript:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
-// Learn Attribute:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
-// Learn life-cycle callbacks:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
-
+import { ELAPSESTIME, REMAININGTIME } from "../../Data/Constans";
+import LocalStorage from "../../Data/LocalStorage";
+import RewardPopup from "../Popup/PopupReward";
+import { PopupName } from "../Popup/PopupUI";
+import TimerSpin from "../TimerSpin";
 import UIManager from "../UIManager";
 import ScreenUI, { ScreenName } from "./ScreenUI";
 
-const {ccclass, property} = cc._decorator;
+const { ccclass, property } = cc._decorator;
 
 @ccclass
 export default class LuckySpinScreen extends ScreenUI {
 
+    @property(cc.Node)
+    wheel: cc.Node = null;
+
+    @property(cc.Node)
+    point: cc.Node = null;
+
+    @property(cc.Label)
+    txtTitleTime: cc.Label = null;
+
+    @property(cc.Label)
+    timerLabel: cc.Label = null;
+
+    @property(cc.Button)
+    btnFree: cc.Button = null;
+
+    @property(cc.Button)
+    btnSpin: cc.Button = null;
+
+    private isSpinning: boolean = false;
+    isRotary: boolean = true;
+    isSpin: boolean = true;
+    currentRotation = 0;
+
+    minRotation = -10;
+    maxRotation = 10;
+    rotationSpeed = 150;
+
+    private prizes: { type: string; count: number }[] = [
+        { type: "UNDO", count: 1 },
+        { type: "GEM", count: 30 },
+        { type: "HINT", count: 2 },
+        { type: "GEM", count: 20 },
+        { type: "UNDO", count: 2 },
+        { type: "GEM", count: 10 },
+        { type: "HINT", count: 1 },
+        { type: "GEM", count: 40 },
+    ];
+
     override initialize(uiManager: UIManager): void {
         super.initialize(uiManager);
         this.screenName = ScreenName.LUCKYSPIN;
     }
+
+    async onSpinButtonClicked() {
+        if (this.isSpinning) {
+            return;
+        }
+        this.isRotary = false;
+        this.wheel.rotation = 0;
+        this.isSpinning = true;
+        this.isSpin = true;
+        const randomIndex = Math.floor(Math.random() * this.prizes.length);
+        const angle = (360 / this.prizes.length) * randomIndex + 3620;
+        this.scheduleOnce(()=>{
+            this.isSpin = false;
+        }, 3.5)
+        await new Promise(() => {
+            cc.tween(this.wheel)
+                .to(4, { angle: angle }, { easing: "sineInOut" })
+                .call(() => {
+                    const prize = this.prizes[randomIndex];
+                    this.isSpinning = false;
+                    TimerSpin.Instance.startTimerSpin();
+                    this.updateButton();
+                    this.scheduleOnce(() => {
+                        this.point.angle = 0;
+                        let rewardPopup = this.uiManager.showPopup(PopupName.REWARD);
+                        rewardPopup.getComponent(RewardPopup).setUp(prize, this);
+                    }, 0.7);
+                })
+                .start();
+        });
+    }
+
+    update(dt: number) {
+        if (this.isRotary) {
+            this.wheel.angle += 10 * dt;
+        }
+
+        if (this.isSpin) {
+            this.currentRotation += this.rotationSpeed * dt;
+
+            if (this.currentRotation > this.maxRotation) {
+                this.currentRotation = this.maxRotation;
+                this.rotationSpeed = -this.rotationSpeed;
+            } else if (this.currentRotation < this.minRotation) {
+                this.currentRotation = this.minRotation;
+                this.rotationSpeed = -this.rotationSpeed;
+            }
+            this.point.angle = this.currentRotation;
+        }
+    }
+
+    updateButton() {
+        if (LocalStorage.getIsFreeSpin()) {
+            this.activeButtonSpin();
+        } else {
+            this.activeButtonFree();
+        }
+    }
+
+    activeButtonSpin() {
+        this.btnSpin.node.active = true;
+        this.btnFree.node.active = false;
+        this.txtTitleTime.node.active = false;
+        this.timerLabel.node.active = false;
+    }
+
+    activeButtonFree() {
+        this.btnFree.node.active = true;
+        this.txtTitleTime.node.active = true;
+        this.timerLabel.node.active = true;
+        this.btnSpin.node.active = false;
+    }
+
+    override active(): void {
+        super.active();
+        this.isRotary = true;
+        this.isSpin = false;
+        this.updateButton();
+    }
+
+    override deactive(): void {
+        super.deactive();
+    }
+
 }
+
+
+

assets/Scripts/UI/Screen/MainScreen.ts

@@ -16,22 +16,27 @@ export default class MainScreen extends ScreenUI {
 
     @property(cc.Node)
     logo: cc.Node = null;
-
     @property([cc.Prefab])
     listWormPrefab: cc.Prefab[] = [];
     @property(cc.Node)
     containerSkins: cc.Node = null;
+    @property(cc.Label)
+    txtGem: cc.Label = null;
+    @property(cc.Label)
+    txtPlayLevel: cc.Label = null;
+    @property(cc.Button)
+    btnTry: cc.Button = null;
 
     isMove: boolean = true;
     listWorm: cc.Node[] = [];
     currentIndex: number = 0;
     moveDuration: number = 0.5;
+    wormId: number = 0;
 
     override initialize(uiManager: UIManager): void {
         super.initialize(uiManager);
         this.screenName = ScreenName.MAINMENU;
         this.initializeListWorm();
-
     }
 
     initializeListWorm() {
@@ -39,9 +44,13 @@ export default class MainScreen extends ScreenUI {
         this.containerSkins.removeAllChildren();
         this.currentIndex = 0;
         let listWormActive: [number] = LocalStorage.getWormActive();
-        let newListWorm: cc.Prefab[] = this.listWormPrefab.filter((item, i ) => {
+        let newListWorm: cc.Prefab[] = this.listWormPrefab.filter((item, i) => {
             return !listWormActive.includes(i);
         })
+        if (newListWorm.length == 0) {
+            newListWorm = this.listWormPrefab;
+            this.btnTry.interactable = false;
+        }
         for (let index = 0; index < newListWorm.length; index++) {
             let worm: cc.Node = cc.instantiate(newListWorm[index]);
             this.containerSkins.addChild(worm);
@@ -71,18 +80,18 @@ export default class MainScreen extends ScreenUI {
     moveItems(isNext: boolean) {
         this.isMove = false;
         cc.tween(this.listWorm[this.currentIndex])
-                .to(this.moveDuration, { position: cc.v3(0, 0) , scale: 1.2  })
-                .call(()=> {
-                    this.isMove = true;
-                })
-                .start();
+            .to(this.moveDuration, { position: cc.v3(0, 0), scale: 1.2 })
+            .call(() => {
+                this.isMove = true;
+            })
+            .start();
         if (isNext) {
             cc.tween(this.listWorm[this.currentIndex - 1])
-            .to(this.moveDuration, { position: cc.v3(-450, 0), scale: 1 })
-            .start();        
+                .to(this.moveDuration, { position: cc.v3(-450, 0), scale: 1 })
+                .start();
 
         } else {
-            cc.tween(this.listWorm[this.currentIndex  + 1 ])
+            cc.tween(this.listWorm[this.currentIndex + 1])
                 .to(this.moveDuration, { position: cc.v3(450, 0), scale: 1 })
                 .start();
         }
@@ -90,6 +99,7 @@ export default class MainScreen extends ScreenUI {
 
     override active(): void {
         super.active();
+        this.updateGem();
         cc.tween(this.logo)
             .to(0.3, { position: cc.v3(0, 500) }, { easing: "bounceOut" })
             .start();
@@ -104,7 +114,31 @@ export default class MainScreen extends ScreenUI {
         this.uiManager.showMessage("Is Comming");
     }
 
-    onClickLevel(){
+    onClickLevel() {
         this.uiManager.activeScreen(ScreenName.LEVEL);
     }
+
+    updateGem() {
+        this.txtGem.string = LocalStorage.getGem() + "";
+    }
+
+    updateBtnPlay() {
+        this.txtPlayLevel.string = (LocalStorage.getLevel() + 1) + ""
+    }
+
+    onClickPlay() {
+    }
+
+    onClickLuckySpin(){
+        this.uiManager.activeScreen(ScreenName.LUCKYSPIN);
+    }
+
+    onClickTryWorm(){
+        let worm = this.listWorm[this.currentIndex].name;
+        let id = '';
+        if (worm) {
+            id = worm.split("_")[1];
+        }
+        this.uiManager.gameManager.wormTry = Number(id);
+    }
 }

assets/Scripts/UI/TimerSpin.ts

+// Learn TypeScript:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
+// Learn Attribute:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
+// Learn life-cycle callbacks:
+//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
+
+import { GAME_NAME } from "../Data/Constans";
+import LocalStorage from "../Data/LocalStorage";
+import LuckySpinScreen from "./Screen/LuckySpinScreen";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class TimerSpin extends cc.Component {
+
+    @property(cc.Label)
+    timerLabel: cc.Label = null;
+
+    @property(cc.Node)
+    nodeLuckySpin: cc.Node = null;
+
+    luckySpin: LuckySpinScreen = null;
+    time: number = 12 * 60 * 60;
+
+    public static Instance: TimerSpin = null;
+
+    protected onLoad(): void {
+        window.addEventListener('unload', this.unloadHandler.bind(this));
+        TimerSpin.Instance = this;
+        this.luckySpin = this.nodeLuckySpin.getComponent(LuckySpinScreen);
+    }
+
+    unloadHandler() {
+        cc.sys.localStorage.setItem(GAME_NAME + "_REMAININGTIME", Math.floor(Date.now() / 1000).toString());
+        cc.sys.localStorage.setItem(GAME_NAME + "_ELAPSESTIME", this.time);
+    }
+
+    protected start(): void {
+
+        if (!LocalStorage.getIsFreeSpin()) {
+            const storedTime = cc.sys.localStorage.getItem(GAME_NAME + "_REMAININGTIME");
+            const timeCount = cc.sys.localStorage.getItem(GAME_NAME + "_ELAPSESTIME");
+            const storedTimestamp = parseInt(storedTime);
+            const currentTime = Math.floor(Date.now() / 1000);
+            const elapsedTime = currentTime - storedTimestamp;
+            this.time = timeCount;
+            this.time -= elapsedTime;
+            this.updateTimerLabel();
+            this.startTimerSpin();
+        }
+
+    }
+
+    startTimerSpin() {
+        LocalStorage.setSpin(false);
+        this.schedule(this.updateCountdown, 1);
+    }
+
+    updateCountdown() {
+        this.time = this.time - 1;
+        cc.sys.localStorage.setItem(GAME_NAME + "_REMAININGTIME", Math.floor(Date.now() / 1000).toString());
+        cc.sys.localStorage.setItem(GAME_NAME + "_ELAPSESTIME", this.time);
+        this.updateTimerLabel();
+        if (this.time <= 0) {
+            LocalStorage.setSpin(true);
+            this.luckySpin.activeButtonSpin();
+            this.unschedule(this.updateCountdown);
+            this.time = 12*60*60;
+        }
+    }
+
+    updateTimerLabel() {
+        const hours = Math.floor(this.time / 3600);
+        const minutes = Math.floor((this.time % 3600) / 60);
+        const seconds = this.time % 60;
+
+        const formattedTime = `${this.formatNumber(hours)}:${this.formatNumber(minutes)}:${this.formatNumber(seconds)}`;
+        this.timerLabel.string = formattedTime;
+    }
+
+    formatNumber(value: number): string {
+        return value < 10 ? `0${value}` : value.toString();
+    }
+
+}

assets/Scripts/UI/TimerSpin.ts.meta

+{
+  "ver": "1.1.0",
+  "uuid": "20e7f32a-2e9a-4d07-9506-e6a5a2e9c6e8",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Scripts/UI/UIManager.ts

@@ -5,6 +5,7 @@
 // Learn life-cycle callbacks:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
 
+import LocalStorage from "../Data/LocalStorage";
 import GameManager from "../GamePlay/GameManager";
 import Message from "./Message";
 import PopupUI from "./Popup/PopupUI";
@@ -18,12 +19,21 @@ export default class UIManager extends cc.Component {
     screens: ScreenUI[] = [];
     @property([PopupUI])
     popups: PopupUI[] = [];
+
+    @property(cc.Node)
+    transparentPopup: cc.Node = null;
     
     @property(Message)
     message: Message = null;
 
-    gameManager: GameManager = null;
+    @property(cc.Sprite)
+    spriteBackground: cc.Sprite = null;
+
+    @property([cc.SpriteFrame])
+    spriteFrameBackground: cc.SpriteFrame[] = [];
 
+    gameManager: GameManager = null;
+    
     initialize(manager: GameManager) {
         this.gameManager = manager;
 
@@ -34,6 +44,7 @@ export default class UIManager extends cc.Component {
         for (let i = 0; i < this.popups.length; i++) {
             this.popups[i].initialize(this);
         }
+        this.setBackground();
     }
 
     deactiveAllScreen() {
@@ -42,7 +53,7 @@ export default class UIManager extends cc.Component {
         }
     }
 
-    activeScreen(screenName, hideAll = true, showTopUI = true) {
+    activeScreen(screenName, hideAll = true) {
         let screen = null;
         for (let i = 0; i < this.screens.length; i++) {
             if (this.screens[i].screenName == screenName) {
@@ -78,6 +89,14 @@ export default class UIManager extends cc.Component {
         return popup;
     }
 
+    activeTransparent(){
+        this.transparentPopup.active = true;
+    }
+
+    deActiveTransparent(){
+        this.transparentPopup.active = false;
+    }
+
     getPopup(popupName) {
         let popup = null;
         for (let i = 0; i < this.popups.length; i++) {
@@ -92,6 +111,7 @@ export default class UIManager extends cc.Component {
         this.message.showMessage(message);
     }
 
-
-    
+    setBackground(){
+        this.spriteBackground.spriteFrame = this.spriteFrameBackground[LocalStorage.getBackground()];
+    }
 }

settings/project.json

 {
-  "start-scene": "2b1f57e0-e640-4283-a5ac-1bac931a4d9f"
+  "start-scene": "7602b4d5-03ba-4bb0-b72f-840c3c878b7e"
 }