提交

project/index.html

@@ -51,7 +51,6 @@
         var CFG = CFG || {};
         //TODO我的奖品链接
         window["recordUrl"] = "fe071865b.html";
-
         window.addEventListener("load", function () {
             //获取canvas
             var canvas = document.getElementById("canvas");

project/src/IndexScene.ts

-import { Scene } from "../module/views/Scene";
-
-export class IndexScene extends Scene {
-    get groupNames() { return ["index"] }
-    get skinName() { return "index" }
-
-    initUi() {
-        super.initUi();
-    }
-
-    async start() {
-        super.start()
-
-    }
-}
-
-
-

project/src/Main.ts

@@ -8,7 +8,7 @@ import { ResJson } from "./ResJson";
 import { SkinJson } from "./SkinJson";
 import { LoadingScene } from "./template/LoadingScene";
 import { destroyWebNetData } from "./WebNet";
-import { IndexScene } from "./IndexScene";
+import { IndexScene } from "../src/scenes/IndexScene";
 
 
 /**

project/src/SkinJson.ts

@@ -242,7 +242,7 @@ export const SkinJson ={
                 {
                     "name": "index_moneytips2",
                     "x": 608,
-                    "y": 1105,
+                    "y": 1102,
                     "type": "text",
                     "props": {
                         "text": "XX",
@@ -266,7 +266,7 @@ export const SkinJson ={
                 {
                     "name": "index_timestips2",
                     "x": 255,
-                    "y": 1104,
+                    "y": 1102,
                     "type": "text",
                     "props": {
                         "text": "XX",
@@ -308,15 +308,15 @@ export const SkinJson ={
                         "source": "index_prizebg.png"
                     }
                 },
-                {
-                    "name": "index_prizeitembg",
-                    "x": 81,
-                    "y": 1240,
-                    "type": "sprite",
-                    "props": {
-                        "source": "index_prizeitembg.png"
-                    }
-                },
+                // {
+                //     "name": "index_prizeitembg",
+                //     "x": 81,
+                //     "y": 1240,
+                //     "type": "sprite",
+                //     "props": {
+                //         "source": "index_prizeitembg.png"
+                //     }
+                // },
                 {
                     "name": "index_opentips",
                     "x": 200,

project/src/scenes/Box.ts

 import { RES } from "../../module/RES";
 
-
-// export interface Move{
-//     move();
-// }
-
 export class Box extends FYGE.Sprite {
     constructor() {
         super();
         this.texture = RES.getRes('index_box.png');
     }
     
-    // move() {
-    //     const speed = 2;
-    //     this.y -= speed;
-    //     if (this.y < 425) {
-    //         this.y = 
-    //     }
-    // }
 }
\ No newline at end of file

project/src/scenes/BoxGroup.ts

 import { Box } from "./Box";
 
-export interface Move{
+export interface Move {
   move();
 }
 
+let boxGroupUpLeft = [];
+let boxGroupDown = [];
+let boxGroupUpRight = [];
+
 export class BoxGroup extends FYGE.Sprite {
   constructor() {
       super();
       this.initBox();
   }
 
-    initBoxGroup() {
-        this.width = 181;
-        this.height = 623;
-        this.position.set(100, 449);
-    }
 
   initBox() {
-        let boxGroup = [];
-        for (let i = 0; i < 4; i++){
+    for (let i = 0; i < 4; i++) {
+      let box = new Box();
+      box.position.set(40, 0+i*238);
+      this.addChild(box);
+      boxGroupUpLeft.push(box);
+    }
+    for (let i = 0; i < 4; i++) {
+        let box = new Box();
+        box.position.set(230, 0+i*238);
+        this.addChild(box);
+        boxGroupDown.push(box);
+    }
+    for (let i = 0; i < 4; i++) {
         let box = new Box();
-            box.position.set(309, 506)
-            boxGroup.push(box);
+        box.position.set(427, 0+i*238);
+        this.addChild(box);
+        boxGroupUpRight.push(box);
       }
-        console.log(boxGroup);
   }
 
   move() {
       const speed = 2;
-        this.y -= speed;
-        // if (this.y < 425) {
-        //     this.y = 
-        // }
+      boxGroupUpLeft.forEach(i => {
+          i.y -= speed;
+      })
+      if (boxGroupUpLeft[0].y < -238 ) {
+        boxGroupUpLeft[0].y = 238*3;
+          const popBox = boxGroupUpLeft.shift();
+          boxGroupUpLeft.push(popBox);
+      }
+      
+      boxGroupDown.forEach(i => {
+          i.y += speed;
+          if (i.y >= 623) {
+              i.y -= boxGroupDown.length * 238;
+          }
+      })
+      boxGroupUpRight.forEach(i => {
+        i.y -= speed;
+    })
+    if (boxGroupUpRight[0].y < -238 ) {
+        boxGroupUpRight[0].y = 238*3;
+        const popBox = boxGroupUpRight.shift();
+        boxGroupUpRight.push(popBox);
+    }
   }
 }

project/src/scenes/IndexScene.ts

+import { RES } from "../../module/RES";
 import { Scene } from "../../module/views/Scene";
 import getObject from "../common/getObject";
 import { Box } from "./Box";
 import { BoxGroup } from "./BoxGroup";
+import { ScrollItem } from "./ScrollItem";
 
 
 let boxGroup;
+let boxArea;
 export class IndexScene extends Scene {
 
     get groupNames() { return ["index"] }
@@ -16,21 +19,42 @@ export class IndexScene extends Scene {
     
     start() {
         super.start();
-        boxGroup = this.addChild(new BoxGroup());
-        boxGroup.position.set(309, 506);
-        // box.move()
-        console.log(this)
+        this.initContainer();
+        this.initmask();
+        const list = new FYGE.ScrollList(ScrollItem, 131+20, 131, 620, 154, false);
+        const array = ['//yun.duiba.com.cn/spark/assets/1398924a1b804f0f20f9d3e16ed3158c2b3d686b.png','//yun.duiba.com.cn/spark/assets/1398924a1b804f0f20f9d3e16ed3158c2b3d686b.png','//yun.duiba.com.cn/spark/assets/1398924a1b804f0f20f9d3e16ed3158c2b3d686b.png','//yun.duiba.com.cn/spark/assets/1398924a1b804f0f20f9d3e16ed3158c2b3d686b.png','//yun.duiba.com.cn/spark/assets/1398924a1b804f0f20f9d3e16ed3158c2b3d686b.png'];
+        list.updateData(array);
+        list.position.set(80, 1240);
+        this.addChild(list);
+    }
 
+    initContainer() {
+        boxArea = new FYGE.Sprite;
+        boxArea.position.set(74,449)
+        this.addChild(boxArea);
+        boxGroup = this.addChild(new BoxGroup());
+        boxArea.addChild(boxGroup);
     }
 
+    initmask() {
+        const mask = new FYGE.Shape();
+        mask.beginFill(0, 0.3);
+        mask.drawRect(0, 0, 603, 623);
+        mask.endFill();
+        boxArea.addChild(mask);
+        boxArea.mask = mask;
+
+    }
 
     initEvents() {
         super.initEvents();
-        // this.addEventListener(FYGE.Event.ENTER_FRAME, this.onEnterFrame , this);
+        this.addEventListener(FYGE.Event.ENTER_FRAME, this.onEnterFrame , this);
+    }
+
+    onEnterFrame() {
+        boxGroup.move();
     }
 
-    // onEnterFrame() {
-    //     box.move();
-    // }
+    
 
 }

project/src/scenes/ScrollItem.ts

+import { RES } from "../../module/RES";
+import { Item } from "../../module/views/Item";
+
+
+export class ScrollItem extends Item {
+  constructor() {
+    super();
+  }
+    initData(i, data) {
+      if (!data) return;
+      const contanier = new FYGE.Sprite(RES.getRes("index_prizeitembg.png"));
+      this.addChild(contanier);
+      FYGE.GlobalLoader.loadImage((e, image) => {
+          const item = this.addChild(new FYGE.Sprite(FYGE.Texture.from(image)));
+    }, data);
+  }
+  
+}
+