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

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

@@ -104,7 +104,7 @@ export class Main {
         console.log('resloadingList 加载完毕')
 
         // XxlScene
-        changeScene(CsdScene)
+        changeScene(XxlScene)
 
         await RES.loadSparkAssets(resCanvasList)
 

project/src/canvas/game/src/scenes/StartScene.ts

@@ -3,7 +3,6 @@ import { RES } from "../../module/RES";
 import Root from "./Root";
 // import res from "../../test/output.json"
 import resCanvasList from "../../../game/resCanvasList"
-import { MainScene } from "../xiaoxiaole/MainScene";
 import { Ins } from "../Ins";
 import { changeScene, showPanel } from "../../module/ctrls";
 import { SelectCatPanel } from "../panels/selectcatpanel/SelectCatPanel";

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

+import { RES } from "../../module/RES";
+import resCanvasList from "../../resCanvasList";
+
+
+
+declare interface point {
+  x: number;
+  y: number;
+}
+
+
+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
+
+
+  constructor(type: number, point: point) {
+    super();
+
+    this.type = type
+    this.point = point
+    this.x = this.point.x
+    this.y = this.point.y
+    this.texture = RES.getRes(
+      resCanvasList[this.circleRes[type]].url
+    );
+  }
+
+  toBig() {
+    this.scaleX = 1.3
+    this.scaleY = 1.3
+  }
+
+  toNormal() {
+    this.scaleY = this.scaleX = 1
+  }
+
+}

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/MainScene.ts

-import { Scene } from "../../module/views/Scene";
-import resCanvasList from "../../resCanvasList";
-import { RES } from "../../module/RES";
-import { Ins } from "../Ins";
-import { MainSceneBtnUi } from "../ui/mainSceneBtnUi";
-import { MSG, SCENETYPE } from "../Enum";
-import { showToast } from "../../module/ctrls";
-import { GDispatcher } from "../Main";
-import { Cat } from "../cat/Cat";
-import { Tools } from "../Tools";
-
-export class MainScene extends Scene {
-
-
-    bg: FYGE.Sprite
-
-    initUi() {
-        var that = this;
-        that.initSceneEle();
-        this.bg = Ins.initSprite("7fcd3fb3-57bd-436a-afca-989b68b6b311")
-
-        this.addChild(this.bg);
-        this.x = (Ins.stageW - 750) >> 1;
-        this.y = (Ins.stageH - 1624) >> 1;
-
-        
-        this.setHexagram(7)
-
-    }
-
-    // 初始化六角形4/7/10/13/16....
-    setHexagram(max: number) {
-        let c = Math.ceil(max / 2)
-        let x = (2 * max + 1) / 3
-        let str = ""
-
-        for (let i = 0; i < 2 * max - x; i++) {
-            if (i < max - x) {
-                for (let j = 0; j <= i; j++) {
-                    str += `${j}`
-                }
-                str += '\n'
-            } else if (i >= max - x && i <= c) {
-                console.log(i, max - i - 2 + x)
-
-                for (let j = max - i - 2 + x; j > 0; j--) {
-                    str += `${j}`
-                }
-                str += '\n'
-            } else if (i > c && i < max) {
-                for (let j = 0; j < i + 1; j++) {
-                    str += `${j}`
-                }
-                str += '\n'
-            } else {
-                for (let j = max - i - 2 + x; j > 0; j--) {
-                    str += `${j}`
-                }
-                str += '\n'
-            }
-        }
-        console.log(str)
-
-    }
-
-    /**初始化场景元素 */
-    initSceneEle() {
-        console.log(1111)
-    }
-
-
-
-
-    initEvents() {
-        var that = this;
-        console.log("主场景添加事件")
-        // 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);
-    }
-
-    removeEvents() {
-        var that = this;
-        console.log("主场景移除事件")
-        // 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);
-    }
-}
\ No newline at end of file

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

@@ -5,20 +5,272 @@ import resCanvasList from "../../resCanvasList"
 import { Ins } from "../Ins";
 import { changeScene, showPanel } from "../../module/ctrls";
 import { SelectCatPanel } from "../panels/selectcatpanel/SelectCatPanel";
-import { MainScene } from "./MainScene";
+import CircleItem from "./CircleItem";
+
+declare interface point {
+  x: number;
+  y: number;
+}
+
+
 export class XxlScene extends Scene {
+  bg: FYGE.Sprite
+  container: FYGE.Container
+
+  /**
+  * 右移偶数行
+  */
+  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]
+  ]
+
+  /**
+  * 格子半径
+  */
+  radius = 78;
+
+  ROW_NUM = 9;
+
+  COL_NUM = 7;
+
+  halfSq3 = Math.sqrt(3) / 2;
+
+  offsetX = 0;
+
+  offsetY = 0;
+
+
+  /**
+   * 行列位置，记录每个格子中心点的位置吧
+   */
+  rowColPositions = {};
+
+  /**
+   * row和col转换到index的hashMap
+  */
+  rcToIndexMap = {};
+
+  /**
+   * index到row和col的hashMap
+   */
+  indexToRcMap: [number, number][] = [];
+
+  /**
+   * 索引位置
+   */
+  indexPositions: point[] = [];
+
+
+
+  /**
+   * circleItem数组
+   */
+  circleItems: CircleItem[] = []
+
+
+  //选中的item
+  firstSelectItem: CircleItem = null
+
+
+  //选中的数组
+  selectItems: CircleItem[] = []
+
   initUi() {
-    super.initUi();
-    var sceneBg = Ins.initSprite("b3c8c187-e5c9-4968-9a00-a118d18ab2fc");
-    this.addChild(sceneBg);
+
+    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;
+          that.indexToRcMap[i * that.COL_NUM + j] = [i, j];
+
+          var x = that.offsetX + (i & 1) * that.radius / 2 + j * that.radius;
+          var y = that.offsetY + i * that.halfSq3 * that.radius
+
+          that.rowColPositions["" + i + j] = { x: x, y: y };
+          that.indexPositions[i * that.COL_NUM + j] = { x: x, y: y };
+        }
+      }
+    })()
+
+
+    that.initSceneEle();
+    this.bg = Ins.initSprite("7fcd3fb3-57bd-436a-afca-989b68b6b311")
+
+    this.addChild(this.bg);
     this.x = (Ins.stageW - 750) >> 1;
     this.y = (Ins.stageH - 1624) >> 1;
 
-    // showPanel(SelectCatPanel);
-    // this.addChild(new MainScene());
+    this.container = new FYGE.Container
+    this.container.x = 100
+    this.container.y = 655
+    this.addChild(this.container)
+
+    let expendHexIndices = []
+    for (let i of this.hexIndices) {
+      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)
+      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);
 
-    // changeScene(MainScene);
+  }
+
+
+  mouseDown(e) {
+    let p: point = { x: e.localX, y: e.localY }
+    console.log(e)
+    let co = this.findFirstCircleItemByPos(p)
+    if (co) {
+      co.toBig()
+      this.firstSelectItem = co
+      this.selectItems.push(co)
+      console.log(co)
+      this.container.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)
+    if (this.firstSelectItem) {
+      if (co && co.type == this.firstSelectItem.type) {
+        co.toBig()
+        this.selectItems.push(co)
+      }
+    } else {
+      if (co) {
+        co.toBig()
+        this.firstSelectItem = co
+        this.selectItems.push(co)
+      }
+    }
+  }
+
+  mouseUp(e) {
+
+    this.container.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.mouseMove, this);
+    let p: point = { x: e.localX, y: e.localY }
+    console.log(p)
+
+    for (let co of this.selectItems) {
+      co.toNormal()
+    }
+    this.firstSelectItem = null
+    this.selectItems.splice(0)
+  }
+
+  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 {
+    for (let co of this.circleItems) {
+
+      if (this.getDistance(co.point, p) < this.radius * 2) {
+        if (this.selectItems.indexOf(co) == -1) {
+          return co
+        }
+      }
+    }
+    return null
+  }
+
+  /**
+   * 
+   * @param p 移动坐标
+   */
+  findFirstCircleItemByPos(p: point): CircleItem {
+    for (let co of this.circleItems) {
+      if (this.getDistance(co.point, p) < this.radius) {
+        if (this.selectItems.indexOf(co) == -1) {
+          return co
+        }
+      }
+    }
+    return null
+  }
+  /**
+   * row和col获得index值
+   * @param row 
+   * @param col 
+   */
+  rcToIndex(row: number, col: number): number {
+    var key = "" + row + col;
+    return this.rcToIndexMap[key]
+  }
+  /**
+   * index获得row和col，返回的是数组，0是row，1是col
+   * @param index
+   */
+  indexToRc(index: number): number[] {
+    return this.indexToRcMap[index]
+  }
+  /**
+   * 根据row，col得到位置信息
+   * @param row 
+   * @param col 
+   * @return 类似坐标
+   */
+  getPositionByRc(row: number, col: number): point {
+    var key = "" + row + col;
+    return this.rowColPositions[key]
+  }
+  /**
+   * 根据index得到位置信息
+   * @param index 
+   * @return 类似坐标
+   */
+  getPositionByIndex(index: number): point {
+    return this.indexPositions[index]
+  }
+
+
+
+  /**初始化场景元素 */
+  initSceneEle() {
+    console.log(1111)
+  }
+
+
+
+
+  initEvents() {
+    var that = this;
+    console.log("主场景添加事件")
+    // 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);
+  }
 
+  removeEvents() {
+    var that = this;
+    console.log("主场景移除事件")
+    // 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);
   }