modified: project/src/canvas/game/src/Main.ts

project/src/canvas/game/src/Main.ts

@@ -125,7 +125,7 @@ export class Main {
         console.log('resloadingList 加载完毕')
 
         this.loadImageTextures(resCanvasList).then(res => {
-            changeScene(OpenAni)
+            changeScene(XxlScene)
         })
 
         // XxlScene

project/src/canvas/game/src/xiaoxiaole/CircleItem.ts

@@ -16,27 +16,46 @@ export default class CircleItem extends FYGE.Sprite {
   type: number
   circleRes = ['2a747211-0210-4215-86a2-a6955b37c45b', '7d1ec658-9371-4d52-b4d7-e75d04037daf', '6a1345f6-969c-4969-8bfb-f4de637df34d', '2e12a9ec-46be-487f-a9cd-550dd0af3746']
   point: point
+  index: number
 
+  nnnn: number
 
-  constructor(type: number, point: point) {
+
+  constructor(type: number, point: point, index: number) {
     super();
 
     this.type = type
-    this.point = point
-    this.x = this.point.x
-    this.y = this.point.y
+    this.point = { x: point.x + 39, y: point.y + 39 }
+    this.x = point.x
+    this.y = point.y
+    this.index = index
+
     this.texture = RES.getRes(
       resCanvasList[this.circleRes[type]].url
     );
   }
 
   toBig() {
-    this.scaleX = 1.3
-    this.scaleY = 1.3
+    console.log("变大")
+    this.scaleX = 1.1
+    this.scaleY = 1.1
   }
 
   toNormal() {
     this.scaleY = this.scaleX = 1
   }
 
+
+  changeConfig(type: number, point: point, index: number) {
+    this.type = type
+    this.point = { x: point.x + 39, y: point.y + 39 }
+    this.x = point.x
+    this.y = point.y
+    this.index = index
+
+    this.texture = RES.getRes(
+      resCanvasList[this.circleRes[type]].url
+    );
+  }
+
 }

project/src/canvas/game/src/xiaoxiaole/Lattice.ts

-import { layers } from "../../module/views/layers";
-
-
-/**
- * 右移偶数行
- */
-export const hexIndices = [
-    3,
-    9, 10,
-    14, 15, 16, 17, 18, 19, 20,
-    21, 22, 23, 24, 25, 26,
-    29, 30, 31, 32, 33,
-    35, 36, 37, 38, 39, 40,
-    42, 43, 44, 45, 46, 47, 48,
-    51, 52,
-    59
-]
-
-export class Lattice {
-
-    private _element: Element;
-    get element(): Element {
-        return this._element
-    }
-
-    set element(value: Element) {
-        if (value) {
-            value.index = this.index;
-            // value.row = this.row;
-            // value.column = this.column;
-        }
-        this._element = value
-    }
-
-    /**
-     * 索引
-     */
-    index: number
-
-    /**
-     * 行
-     */
-    row: number;
-
-    /**
-     * 列
-     */
-    col: number
-
-    /**
-     * 是否生成口
-     */
-
-    isGenerate: boolean;
-
-    /**
-     * 
-     * @param index 索引
-     */
-    constructor(index: number) {
-        this.index = index;
-
-        this.element = null;
-        this.isGenerate = false;
-    }
-
-    /**
-     * 重置，貌似用不着，没有地方回收过格子，以后需要额外回收ice，door，element
-     * @param index 索引
-     */
-    reset(index: number) {
-        this.index = index;
-        // var rc = Tool.indexToRc(index);
-        // this.row = rc[0];
-        // this.column = rc[1];
-        this.element = null;
-        this.isGenerate = false;
-    }
-
-}
-
-
-
-
-class Element extends FYGE.Container {
-    index: number
-    lat: Lattice
-
-}
-
-
-const offsetX = 100;
-const offsetY = 100;
-/**
- * 格子半径
- */
-const radius = 100;
-
-export const ROW_NUM = 9;
-
-export const COL_NUM = 7;
-/**
- * row和col转换到index的hashMap
- */
-const rcToIndexMap = {};
-
-/**
- * index到row和col的hashMap
- */
-const indexToRcMap: [number, number][] = [];
-/**
- * 行列位置，记录每个格子中心点的位置吧
- */
-const rowColPositions = {};
-/**
- * 索引位置
- */
-const indexPositions: [number, number][] = [];
-
-const halfSq3 = Math.sqrt(3) / 2;
-/**
- * 初始化数据
- * 提前的缓存数据，千万别修改，因为给出的数据都没有深拷贝过
- */
-(function init() {
-
-    for (var i = 0; i < ROW_NUM; i++) {
-        for (var j = 0; j < COL_NUM; j++) {
-            rcToIndexMap["" + i + j] = i * COL_NUM + j;
-            indexToRcMap[i * COL_NUM + j] = [i, j];
-
-            var x = offsetX + (i & 1) * radius / 2 + j * radius;
-            var y = offsetY + i * halfSq3 * radius
-
-            rowColPositions["" + i + j] = [x, y];
-            indexPositions[i * COL_NUM + j] = [x, y];
-        }
-    }
-})()
-/**
- * row和col获得index值
- * @param row 
- * @param col 
- */
-export function rcToIndex(row: number, col: number): number {
-    var key = "" + row + col;
-    return rcToIndexMap[key]
-}
-/**
- * index获得row和col，返回的是数组，0是row，1是col
- * @param index
- */
-export function indexToRc(index: number): number[] {
-    return indexToRcMap[index]
-}
-/**
- * 根据row，col得到位置信息
- * @param row 
- * @param col 
- * @return 类似数组[111,222],0是x坐标，1是y坐标
- */
-export function getPositionByRc(row: number, col: number): number[] {
-    var key = "" + row + col;
-    return rowColPositions[key]
-}
-/**
- * 根据index得到位置信息
- * @param index 
- * @return 类似数组[111,222],0是x坐标，1是y坐标
- */
-export function getPositionByIndex(index: number): number[] {
-    return indexPositions[index]
-}
-
-
-
-var con = layers.addChild(new FYGE.Container())
-
-// init();
-
-for (var i = 0; i < ROW_NUM * COL_NUM; i++) {
-    if(hexIndices.indexOf(i)==-1)continue
-    var p = getPositionByIndex(i)
-    con.addChild(new FYGE.Graphics())
-        .beginFill(0xff0000)
-        .drawCircle(p[0], p[1], 45)
-        .endFill();
-}
-

project/src/canvas/game/src/xiaoxiaole/ObjectPool.ts

+import CircleItem from "./CircleItem"
+
+
+declare interface point {
+    x: number;
+    y: number;
+}
+
+export class ObjectPool {
+    _circleItemPool: CircleItem[] = []
+
+    getItem(type: number, ponit: point, index: number): CircleItem {
+        // console.log(this._circleItemPool.length)
+        let co = this._circleItemPool.shift()
+        if (co) {
+            co.changeConfig(type, ponit, index)
+        }
+        return co || new CircleItem(type, ponit, index)
+    }
+
+
+    putItem(co: CircleItem) {
+        if (co.parent) {
+            co.parent.removeChild(co)
+        }
+        this._circleItemPool.push(co)
+    }
+}
\ No newline at end of file

project/src/canvas/game/src/xiaoxiaole/XxlScene.ts

@@ -6,12 +6,24 @@ import { Ins } from "../Ins";
 import { changeScene, showPanel } from "../../module/ctrls";
 import { SelectCatPanel } from "../panels/selectcatpanel/SelectCatPanel";
 import CircleItem from "./CircleItem";
+import { ObjectPool } from "./ObjectPool";
 
 declare interface point {
   x: number;
   y: number;
 }
 
+class noder {
+  mother: noder = null
+  father: noder = null
+  index: number
+  item: CircleItem = null
+  p: point = null
+
+  constructor(index: number) {
+    this.index = index
+  }
+}
 
 export class XxlScene extends Scene {
   bg: FYGE.Sprite
@@ -32,6 +44,13 @@ export class XxlScene extends Scene {
     [59]
   ]
 
+  /**
+   * 手动映射
+   */
+
+  map = new Map()
+
+
   /**
   * 格子半径
   */
@@ -83,14 +102,33 @@ export class XxlScene extends Scene {
   //选中的数组
   selectItems: CircleItem[] = []
 
+
+  //空的位置
+  emptyHexIndices: number[] = []
+
+  objectPool: ObjectPool
+
+  //集合
+  ItemMap: Map<number, noder> = new Map()
+
+
+
+
   initUi() {
 
+    this.objectPool = new ObjectPool()
+
+
+
+
+
     let that = this;
 
     (function init() {
       for (var i = 0; i < that.ROW_NUM; i++) {
         for (var j = 0; j < that.COL_NUM; j++) {
           that.rcToIndexMap["" + i + j] = i * that.COL_NUM + j;
+          // console.log(i * that.COL_NUM + j)
           that.indexToRcMap[i * that.COL_NUM + j] = [i, j];
 
           var x = that.offsetX + (i & 1) * that.radius / 2 + j * that.radius;
@@ -111,7 +149,7 @@ export class XxlScene extends Scene {
     this.y = (Ins.stageH - 1624) >> 1;
 
     this.container = new FYGE.Container
-    this.container.x = 100
+    this.container.x = 105
     this.container.y = 655
     this.addChild(this.container)
 
@@ -120,78 +158,285 @@ export class XxlScene extends Scene {
       expendHexIndices.push(...i)
     }
 
+
+    //初始化
+
+
+
     for (let i of expendHexIndices) {
       let p: point = { x: that.getPositionByIndex(i).x, y: that.getPositionByIndex(i).y }
-      console.log(p)
-      let circleItem = new CircleItem(Math.floor(4 * Math.random()), p)
+      let no = new noder(i)
+      let circleItem = this.objectPool.getItem(Math.floor(4 * Math.random()), p, i)
+      no.item = circleItem
+      no.p = p
+      this.ItemMap.set(i, no)
       this.container.addChild(circleItem)
       this.circleItems.push(circleItem)
     }
 
-    this.container.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, that.mouseDown, that)
-    this.container.addEventListener(FYGE.MouseEvent.MOUSE_UP, that.mouseUp, that);
 
+
+    for (let i = this.hexIndices.length - 1; i >= 0; i--) {
+      if (i - 1 >= 0) {
+        let l1 = this.hexIndices[i].length
+        let l2 = this.hexIndices[i - 1].length
+
+        let t1 = l1 >> 1
+        let t2 = l2 >> 1
+
+        if (l1 & 1) {
+          //遍历奇数行每行的父母节点
+          for (let offset = 0; offset <= t1; offset++) {
+            if (offset) {
+              //右移
+              const fatherrightindex = this.hexIndices[i - 1][t2 - 1 + offset]
+
+              const motherrightindex = this.hexIndices[i - 1][t2 + offset]
+
+              const nowrightindex = this.hexIndices[i][t1 + offset]
+
+              let fatherright = this.ItemMap.get(fatherrightindex)
+              let motherright = this.ItemMap.get(motherrightindex)
+              let nowright = this.ItemMap.get(nowrightindex)
+
+              nowright.father = fatherright
+              nowright.mother = motherright
+
+              //左移
+              let fatherleftindex = this.hexIndices[i - 1][t2 - 1 - offset]
+              let motherleftindex = this.hexIndices[i - 1][t2 - offset]
+              let nowleftindex = this.hexIndices[i][t1 - offset]
+
+              let nowleft = this.ItemMap.get(nowleftindex)
+              let fatherleft = this.ItemMap.get(fatherleftindex)
+              let motherleft = this.ItemMap.get(motherleftindex)
+
+              nowleft.father = fatherleft
+              nowleft.mother = motherleft
+
+            } else {
+              //中间项
+              let fatherindex = this.hexIndices[i - 1][t2 - 1]
+              let motherindex = this.hexIndices[i - 1][t2]
+              let nowindex = this.hexIndices[i][t1]
+
+              let now = this.ItemMap.get(nowindex)
+              now.father = this.ItemMap.get(fatherindex)
+              now.mother = this.ItemMap.get(motherindex)
+            }
+          }
+        } else {
+          //遍历偶数行每行的父母节点
+          for (let offset = 0; offset < t1; offset++) {
+            //右移
+            let fatherrightindex = this.hexIndices[i - 1][t2 - 1 + offset]
+            let motherrightindex = this.hexIndices[i - 1][t2 + offset]
+            let nowrightindex = this.hexIndices[i][t1 + offset]
+            let nowright = this.ItemMap.get(nowrightindex)
+            nowright.father = this.ItemMap.get(fatherrightindex)
+            nowright.mother = this.ItemMap.get(motherrightindex)
+
+            //左移
+            let fatherleftindex = this.hexIndices[i - 1][t2 - 1 - offset]
+            let motherleftindex = this.hexIndices[i - 1][t2 - offset]
+            let nowleftindex = this.hexIndices[i][t1 - offset - 1]
+
+            let nowleft = this.ItemMap.get(nowleftindex)
+            nowleft.father = this.ItemMap.get(fatherleftindex)
+            nowleft.mother = this.ItemMap.get(motherleftindex)
           }
+        }
+      }
+    }
+
 
 
+    console.log(this.ItemMap)
+
+  }
+
+  g: FYGE.Graphics
   mouseDown(e) {
-    let p: point = { x: e.localX, y: e.localY }
-    console.log(e)
+
+    let p: point = { x: e.localX - this.container.x, y: e.localY - this.container.y }
     let co = this.findFirstCircleItemByPos(p)
     if (co) {
+
+      //划线
+      this.g = new FYGE.Graphics()
+      this.container.addChild(this.g)
+      this.g.moveTo(co.point.x, co.point.y);
+      this.g.beginFill("#ffffff")
+      this.g.lineStyle(2, 0x000000)
+
+
       co.toBig()
       this.firstSelectItem = co
       this.selectItems.push(co)
-      console.log(co)
-      this.container.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.mouseMove, this);
+      this.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.mouseMove, this);
     }
   }
 
 
   mouseMove(e) {
 
-    let p: point = { x: e.localX, y: e.localY }
-    console.log(this.selectItems)
 
-    let co = this.findCircleItemByPos(this.selectItems[this.selectItems.length - 1].point)
+    let p: point = { x: e.localX - this.container.x, y: e.localY - this.container.y }
+    let co = this.firstSelectItem
+    if (this.selectItems.length > 0) {
+      co = this.findCircleItemByPos(this.selectItems[this.selectItems.length - 1].point, p)
+    }
+
+
+
     if (this.firstSelectItem) {
+
       if (co && co.type == this.firstSelectItem.type) {
+        // console.log(co.point, co.type)
         co.toBig()
         this.selectItems.push(co)
+
+
+
+        //连线
+        this.g.lineTo(co.point.x, co.point.y)
+        this.g.endFill()
+        this.g.moveTo(co.point.x, co.point.y)
+
       }
     } else {
       if (co) {
+
+        //画线
+        this.g = new FYGE.Graphics()
+        this.container.addChild(this.g)
+        this.g.moveTo(co.point.x, co.point.y);
+        this.g.beginFill("#ffffff")
+        this.g.lineStyle(2, 0x000000)
+
         co.toBig()
         this.firstSelectItem = co
         this.selectItems.push(co)
       }
     }
+
+
   }
 
   mouseUp(e) {
+    this.g.clear()
 
-    this.container.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.mouseMove, this);
+    this.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.mouseMove, this);
     let p: point = { x: e.localX, y: e.localY }
-    console.log(p)
 
+    if (this.selectItems.length > 1) {
+      for (let co of this.selectItems) {
+        co.toNormal()
+        if (co.parent) {
+          this.ItemMap.get(co.index).item = null
+          this.emptyHexIndices.push(co.index)
+
+          this.circleItems = this.circleItems.filter(item => item != co)
+          this.objectPool.putItem(co)
+        } else {
+          console.log("不存在", co.nnnn)
+        }
+      }
+    } else {
       for (let co of this.selectItems) {
         co.toNormal()
       }
+    }
+
     this.firstSelectItem = null
     this.selectItems.splice(0)
+
+    if (this.emptyHexIndices.length > 0) {
+      //掉落
+      this.drop()
+    }
+  }
+
+
+
+  drop() {
+    this.emptyHexIndices = Array.from(new Set(this.emptyHexIndices));
+    this.emptyHexIndices.sort((a, b) => b - a)
+    // console.log("掉落", this.emptyHexIndices)
+    let index = this.emptyHexIndices[0]
+    if (index) {
+      let p: point = { x: this.getPositionByIndex(index).x, y: this.getPositionByIndex(index).y }
+      let vo = this.ItemMap.get(index)
+      if (vo) {
+        this.findFatherOrMother(vo)
+      }
+    } else {
+      debugger
+    }
+
+  }
+
+
+  findFatherOrMother(vo: noder) {
+    let fa = vo.father
+    if (fa && fa.item) {
+      this.emptyHexIndices.push(fa.index)
+      this.emptyHexIndices.splice(this.emptyHexIndices.indexOf(vo.index), 1)
+      vo.item = fa.item
+      fa.item = null
+      vo.item.index = vo.index
+      this.exchange(vo.item, { x: this.getPositionByIndex(vo.index).x, y: this.getPositionByIndex(vo.index).y })
+    } else {
+      let mo = vo.mother
+      if (mo && mo.item) {
+        this.emptyHexIndices.push(mo.index)
+        this.emptyHexIndices.splice(this.emptyHexIndices.indexOf(vo.index), 1)
+        vo.item = mo.item
+        mo.item = null
+        vo.item.index = vo.index
+        this.exchange(vo.item, { x: this.getPositionByIndex(vo.index).x, y: this.getPositionByIndex(vo.index).y })
+      } else {
+        let lastVo = (fa && fa.father) ? fa : null || (mo && mo.father) ? mo : null || (fa && fa.mother) ? fa : null || (mo && mo.mother) ? mo : null
+        if (lastVo) {
+          this.findFatherOrMother(lastVo)
+        } else {
+          console.log("new")
+          this.emptyHexIndices.splice(this.emptyHexIndices.indexOf(vo.index), 1)
+          let circleItem = this.objectPool.getItem(Math.floor(4 * Math.random()), vo.p, vo.index)
+          vo.item = circleItem
+          this.container.addChild(circleItem)
+          this.circleItems.push(circleItem)
+          setTimeout(() => {
+            this.drop()
+          }, 30)
+        }
+      }
+    }
   }
 
+
+  exchange(vo: CircleItem, p: point) {
+    FYGE.Tween.get(vo).to({ x: p.x, y: p.y }, 30).call(() => {
+      vo.point = { x: p.x + 39, y: p.y + 39 }
+      this.drop()
+    })
+
+  }
+
+
   getDistance(p1: point, p2: point): number {
     return Math.abs(Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y)))
   }
 
 
-  findCircleItemByPos(p: point): CircleItem {
+  findCircleItemByPos(p0: point, p1: point): CircleItem {
     for (let co of this.circleItems) {
-
-      if (this.getDistance(co.point, p) < this.radius * 2) {
+      if (this.getDistance(co.point, p0) < this.radius * 1.5 && this.getDistance(p1, co.point) < this.radius / 3) {
+        // console.log(co, this.selectItems.indexOf(co))
         if (this.selectItems.indexOf(co) == -1) {
           return co
+        } else {
+          // console.log(this.selectItems)
         }
       }
     }
@@ -204,7 +449,7 @@ export class XxlScene extends Scene {
    */
   findFirstCircleItemByPos(p: point): CircleItem {
     for (let co of this.circleItems) {
-      if (this.getDistance(co.point, p) < this.radius) {
+      if (this.getDistance(co.point, p) < this.radius / 3) {
         if (this.selectItems.indexOf(co) == -1) {
           return co
         }
@@ -251,7 +496,7 @@ export class XxlScene extends Scene {
 
   /**初始化场景元素 */
   initSceneEle() {
-    console.log(1111)
+    // console.log(1111)
   }
 
 
@@ -260,6 +505,9 @@ export class XxlScene extends Scene {
   initEvents() {
     var that = this;
     console.log("主场景添加事件")
+
+    this.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, that.mouseDown, that)
+    this.addEventListener(FYGE.MouseEvent.MOUSE_UP, that.mouseUp, that);
     // that.tlBtn.addEventListener(FYGE.MouseEvent.CLICK,()=>{that.changeMainScene(SCENETYPE.CLASSROOM)},that);
     // that.mxqBtn.addEventListener(FYGE.MouseEvent.CLICK,()=>{that.changeMainScene(SCENETYPE.PLAYGROUND)},that);
     // FYGE.GDispatcher.addEventListener(MSG.CHANGE_SCENE,()=>{that.changeMainScene(SCENETYPE.BEADROOM)},that);
@@ -268,6 +516,9 @@ export class XxlScene extends Scene {
   removeEvents() {
     var that = this;
     console.log("主场景移除事件")
+
+    this.removeEventListener(FYGE.MouseEvent.MOUSE_DOWN, that.mouseDown, that)
+    this.removeEventListener(FYGE.MouseEvent.MOUSE_UP, that.mouseUp, that);
     // that.tlBtn.removeEventListener(FYGE.MouseEvent.CLICK,()=>{that.changeMainScene(SCENETYPE.CLASSROOM)},that);
     // that.mxqBtn.removeEventListener(FYGE.MouseEvent.CLICK,()=>{that.changeMainScene(SCENETYPE.PLAYGROUND)},that);
     // FYGE.GDispatcher.removeEventListener(MSG.CHANGE_SCENE,()=>{that.changeMainScene(SCENETYPE.BEADROOM)},that);