棋盘上的地块基础代码

assets/Script/BoardRoot.ts

@@ -0,0 +1,46 @@
+import { _decorator, Component, Node } from 'cc';
+import { MapTileType } from './MapTileData';
+import { MapTileNode } from './MapTileNode';
+const { ccclass, property } = _decorator;
+
+/// 最底层的地图 图层Component
+@ccclass('BoardRoot')
+export class BoardRoot extends Component {
+
+    start() {
+
+
+    }
+
+
+    /// 初始化 地图快
+    initMapTile(){
+        // 从枚举类型 添加所有地块
+        const types = Object.values(MapTileType);
+        console.log(types);
+
+        types.forEach((a,b) => {
+            const node = new MapTileNode(b);
+            this.node.addChild(node);
+
+        });
+
+
+        // for( let i = 0; i < types.length ; i++){
+        //     const type = types[i];
+        //     const node = new MapTileNode(type);
+        //     this.node.addChild(node);
+        // }
+
+        // console.log('地图块初始化完成');
+        // console.log(this.node);
+    }
+
+    update(deltaTime: number) {
+
+
+
+    }
+}
+
+

assets/Script/BoardRoot.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "51518b7f-2c20-4641-9eab-bf32f62367b9",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Script/MapTileButtonComponent.ts

@@ -0,0 +1,104 @@
+import { _decorator, Color, Component, EventMouse, Node, Sprite, UITransform, v2 } from 'cc';
+import { NpkImage } from '../Tool/NPKImage';
+import { MapTileDirection } from './MapTileData';
+import { BaseSprite } from '../GlobalScript/CommonComponent/BaseSprite';
+const { ccclass, property } = _decorator;
+
+
+enum buttonState{
+    // 普通
+    Normal,
+    // 悬停
+    Hover,
+    // // 按下
+    // Down,
+}
+
+
+@ccclass('MapTileButtonComponent')
+export class MapTileButtonComponent extends Component {
+
+    direction: MapTileDirection;
+
+    /// 状态
+    state: buttonState = buttonState.Normal;
+
+    //精灵对象
+    private SpriteObj: Sprite;
+
+    start() {
+
+
+        // //判断是否有精灵 如果没有 就给他搞一个
+        // if (this.node.getComponent(Sprite))
+        //     this.SpriteObj = this.node.getComponent(Sprite);
+        // else
+        //     this.SpriteObj = this.node.addComponent(Sprite);
+
+        // //设置节点锚点为左上角
+        // this.node.getComponent(UITransform).anchorPoint = v2(0, 1);
+        // //设置类型
+        // this.SpriteObj.sizeMode = Sprite.SizeMode.RAW;
+        // //设置
+        // this.SpriteObj.trim = false;
+
+        const bs = this.node.addComponent( BaseSprite );
+        this.SpriteObj = bs.SpriteObj;
+
+        let index = 24;
+        switch (this.direction) {
+            case MapTileDirection.horizontal:
+                index = 24;
+            case MapTileDirection.vertical:
+                index = 25;
+            case MapTileDirection.nook:
+                index = 26;
+        }
+
+        bs.updateSpriteFrame(NpkImage.board,index);
+
+
+        this.node.on(Node.EventType.MOUSE_ENTER, this.OnHover, this);
+        this.node.on(Node.EventType.MOUSE_LEAVE, this.OffHover, this);
+        this.node.on(Node.EventType.MOUSE_DOWN, this.OnDown, this);
+        // this.node.on(Node.EventType.MOUSE_UP, this.OnUp, this);
+
+    }
+
+    update(deltaTime: number) {
+        if (this.SpriteObj){
+            switch (this.state) {
+                case buttonState.Normal:
+                    this.SpriteObj.color = Color.WHITE;
+                    break;
+                case buttonState.Hover:
+                    this.SpriteObj.color = Color.YELLOW;
+                    break;
+            }
+        }
+    }
+
+    OnHover(event: EventMouse) {
+        this.state = buttonState.Normal;
+    }
+    OffHover(event: EventMouse) {
+        this.state = buttonState.Hover;
+    }
+    /// 按下就选择
+    OnDown(event: EventMouse) {
+        // if (event.getButton() != EventMouse.BUTTON_LEFT) return;
+        // const np = this.node.position;
+        // this.node.setPosition(np.x,np.y -1);
+    }
+
+    OnUp(event: EventMouse) {
+        //必须是鼠标左键
+        if (event.getButton() != EventMouse.BUTTON_LEFT) return;
+        this.state = buttonState.Normal;
+        const np = this.node.position;
+        this.node.setPosition(np.x,np.y +1);
+    }
+
+}
+
+

assets/Script/MapTileButtonComponent.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "bcd05978-d628-49d5-a5fc-c17782e7be27",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Script/MapTileController.ts

@@ -0,0 +1,37 @@
+import { _decorator, Component, Node } from "cc";
+import { MapTileData, MapTileFactory, MapTileType } from "./MapTileData";
+const { ccclass, property } = _decorator;
+
+@ccclass("MapTileController")
+export class MapTileController extends Component {
+
+  /// 地块数据
+  private _tileData: MapTileData;
+  get tileData(){ return this._tileData; };
+
+  /// 地块类型
+  private _tileType: MapTileType;
+  set tileType(newType: MapTileType){
+    this._tileType = newType;
+    this._tileData = MapTileFactory.getData(newType as MapTileType);
+  };
+  get tileType(){ return this._tileType; };
+
+
+  /// 地块占领状态（是谁占领的，）
+  private occupState: string;
+
+  /// 占领等级
+  private occupyLevel: 0 | 1 | 2 | 3;
+
+  /// 决斗场等级
+  private fightLevel: 2 | 4 | 8;
+
+  /// 进入选择地下城状态，海上列车选择，决斗场选择
+
+  start() {
+    this.node.setPosition(0,0);
+  }
+
+  update(deltaTime: number) {}
+}

assets/Script/MapTileController.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "81e11280-50a3-4363-b141-10d761ae7571",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Script/MapTileData.ts

@@ -0,0 +1,173 @@
+import { Vec2, v2 } from "cc";
+import { NpkImage } from "../Tool/NPKImage";
+
+/// 地块类型
+export enum MapTileType {
+  /// 赫顿玛尔
+  HeDunMaEr,
+  /// 时间广场
+  ShiJianGuangChang,
+  /// 兽人峡谷
+  ShouRenXiaGu,
+  /// 超时空漩涡
+  ChaoShiKongXuanWo,
+  /// 恐怖的栖息地
+  KongBuDeQiXiDi,
+  /// 红色魔女之森
+  HongSeMoNvZhiSen,
+
+  /// 月光酒馆
+  YueGuangJiuGuan,
+  /// 哈林的命运硬币（左边）
+  HaLinMingYunYinBi,
+  /// 亡命杀阵
+  WangMingShaZhen,
+  /// 皇家娱乐
+  HuangJaiYuLe,
+  /// 黑暗都市
+  AnHeiDuShi,
+  /// 第九隔离区
+  DiJiuGeLiQu,
+
+  /// 决斗场
+  JueDouChang,
+  /// 腐坏街道
+  FuHuaiJieDao,
+  /// 溢血的地下城
+  YiXueDeDiXiaChen,
+  /// 普雷·伊西斯
+  PuLeiYiXiSi,
+  /// 沉重的礼拜堂
+  ChenZhongDeLiBaiTang,
+  /// 螺旋王国
+  LuoXuanWangGuo,
+
+  /// 海上列车
+  HaiShangLieChe,
+  /// 切斯特小镇的命运硬币（右边）
+  XiaoZhenMingYunYinBi,
+  /// 暗黑神殿
+  AnHeiShenDian,
+  /// 痛苦地下城
+  TongKuDiXiaChen,
+  /// 无底坑道
+  WuDiKenDao,
+  /// 记忆之地
+  JiYiZhiDi,
+}
+
+/// 地块方向
+export enum MapTileDirection {
+  /// 横
+  horizontal = 24,
+  /// 竖
+  vertical = 25,
+  /// 角落
+  nook = 26,
+}
+
+/// 地块的数据
+export class MapTileData {
+  /// 坐标
+  location: Vec2;
+  /// npk路径
+  npkPath: NpkImage;
+  /// 地块背景index
+  backgroundIndex: number;
+  /// 地块名称图片index
+  nameIndex: number;
+  /// 地块方向
+  direction: MapTileDirection;
+  /// 怪物相关数据
+
+  /// 列车选择许可
+  trainsSelectLicense: boolean;
+  /// 决斗场选择许可
+  duelSelectLicense: boolean;
+  /// 占领许可
+  occupyLicense: boolean;
+
+    constructor({
+      /// 坐标
+      location,
+      /// 背景index
+      backgroundIndex,
+      /// 名称index
+      nameIndex,
+      /// 地块方向
+      direction,
+      /// 占领许可
+      occupyLicense = true,
+      /// 列车选择许可
+      trainsSelectLicense,
+      /// 决斗场选择许可
+      duelSelectLicense,
+    }: {
+      location: Vec2;
+      backgroundIndex?: number;
+      nameIndex?: number;
+      direction: MapTileDirection;
+      occupyLicense?: boolean;
+      trainsSelectLicense: boolean;
+      duelSelectLicense: boolean;
+    }) {
+      this.location = location;
+      this.npkPath = NpkImage.board;
+      this.backgroundIndex = backgroundIndex;
+      this.nameIndex = nameIndex;
+      this.direction = direction;
+
+      this.trainsSelectLicense = trainsSelectLicense;
+      this.duelSelectLicense = duelSelectLicense;
+      this.occupyLicense = occupyLicense;
+    }
+}
+
+export class MapTileFactory {
+  static getData(type: MapTileType): MapTileData{
+
+    // const tts = type as MapTileType;
+    // const ss = tts == MapTileType.HeDunMaEr;
+    // const nn = Number(type);
+    // const aa = +type;
+    // const tttt: MapTileType = MapTileType.HeDunMaEr;
+
+    switch (type) {
+      /// 赫顿玛尔
+      case MapTileType.HeDunMaEr:
+        console.log(type);
+        return MapTileFactory.HeDunMaErData;
+      /// 时间广场
+      case MapTileType.ShiJianGuangChang:
+        console.log(type);
+          return MapTileFactory.ShiJianGuangChangData;
+    }
+
+    console.log(type);
+  }
+
+  // 赫顿玛尔
+  private static HeDunMaErData = new MapTileData({
+    location: v2(507, -500),
+    direction: MapTileDirection.nook,
+    trainsSelectLicense: true,
+    duelSelectLicense: false,
+    occupyLicense: false,
+  });
+
+  /// 时间广场
+  private static ShiJianGuangChangData = new MapTileData({
+    location: v2(507, -500),
+    backgroundIndex: 1,
+    direction: MapTileDirection.horizontal,
+    trainsSelectLicense: true,
+    duelSelectLicense: true,
+    occupyLicense: true,
+  });
+
+
+
+
+
+
+}

assets/Script/MapTileData.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "22719a4e-0012-43b0-8759-5d985734b3f1",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Script/MapTileNode.ts

@@ -0,0 +1,102 @@
+import { _decorator, Node } from "cc";
+import {
+  MapTileData,
+  MapTileDirection,
+  MapTileFactory,
+  MapTileType,
+} from "./MapTileData";
+import { BaseSprite } from "../GlobalScript/CommonComponent/BaseSprite";
+import { MapTileButtonComponent } from "./MapTileButtonComponent";
+import { MapTileController } from "./MapTileController";
+const { ccclass } = _decorator;
+
+/// 地块
+@ccclass("MapTileNode")
+export class MapTileNode extends Node {
+  /// -- Node
+
+  /// 背景节点
+  private backgroundNode: Node;
+
+  /// 地块名称
+  private nameNode: Node;
+
+  /// 决斗场选中的战斗边框
+  private fightNode: Node;
+
+  /// 鼠标操作变化的边框
+  private borderNode: Node;
+
+  /// 占领图标
+  private occupyIconNode: Node;
+
+  /// 决斗场选中的图标 和倍数icon
+  private fightIconNode: Node;
+
+  /// 控制器
+  private controller: MapTileController;
+
+  constructor(type) {
+    super();
+
+    this.controller = this.addComponent(MapTileController);
+    this.controller.tileType = type;
+
+    this.initNode();
+  }
+
+  initNode() {
+    /// 背景
+    if (this.controller.tileData.backgroundIndex) {
+      const node = new Node();
+      this.addChild(node);
+
+      const bs = node.addComponent(BaseSprite);
+      bs.updateSpriteFrame(
+        this.controller.tileData.npkPath,
+        this.controller.tileData.backgroundIndex
+      );
+
+      this.backgroundNode = node;
+    }
+
+    /// 名称
+    if (this.controller.tileData.nameIndex) {
+      const node = new Node();
+      this.addChild(node);
+
+      const bs = node.addComponent(BaseSprite);
+      bs.updateSpriteFrame(this.controller.tileData.npkPath, this.controller.tileData.nameIndex);
+
+      this.nameNode = node;
+    }
+
+    /// 决斗场选择后的红色边框
+    // 四角和命运硬币 没有红框
+    if (
+      this.controller.tileData.direction != MapTileDirection.nook ||
+      this.controller.tileType !=
+        (MapTileType.XiaoZhenMingYunYinBi || MapTileType.HaLinMingYunYinBi)
+    ) {
+      const node = new Node();
+      //   node.active = false;
+      this.addChild(node);
+
+      const bs = node.addComponent(BaseSprite);
+      // 横向地块27 竖向28
+      bs.updateSpriteFrame(
+        this.controller.tileData.npkPath,
+        this.controller.tileData.direction == MapTileDirection.horizontal ? 27 : 28
+      );
+
+      this.nameNode = node;
+    }
+
+    /// 鼠标选择边框
+    const bordeNode = new Node();
+    // bordeNode.active = false;
+    const bordeBS = bordeNode.addComponent(MapTileButtonComponent);
+    bordeBS.direction = this.controller.tileData.direction;
+    this.borderNode = bordeNode;
+  }
+}

assets/Script/MapTileNode.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "eac596d5-3e92-4bab-834e-c62b69dc232c",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Script/UIRoot.ts

@@ -1,17 +1,24 @@
-import { _decorator, Component, Director, director, Node, UITransform  } from 'cc';
+import {
-import { StartGameUINode } from './StartGameUINode';
+  _decorator,
-import { CharacterType, GamerNode } from './GamerNode';
+  Component,
-import { BaseSprite } from '../GlobalScript/CommonComponent/BaseSprite';
+  Director,
-import { NpkImage } from '../Tool/NPKImage';
+  director,
-import { AnimationNode } from '../GlobalScript/Animation/AnimationNode';
+  Node,
-import { BaseButton, BaseButtonState } from '../GlobalScript/CommonComponent/BaseButton';
+  UITransform,
-import { DiceButtonNode } from './DiceButtonNode';
+} from "cc";
-import { OtherWinNode, otherWinType } from './OtherWinNode';
+import { StartGameUINode } from "./StartGameUINode";
+import { CharacterType, GamerNode } from "./GamerNode";
+import { BaseSprite } from "../GlobalScript/CommonComponent/BaseSprite";
+import { NpkImage } from "../Tool/NPKImage";
+import { AnimationNode } from "../GlobalScript/Animation/AnimationNode";
+import { BaseButtonState } from "../GlobalScript/CommonComponent/BaseButton";
+import { DiceButtonNode } from "./DiceButtonNode";
+import { OtherWinNode, otherWinType } from "./OtherWinNode";
+import { BoardRoot } from "./BoardRoot";
 const { ccclass } = _decorator;
 
-@ccclass('UIRoot')
+@ccclass("UIRoot")
 export class UIRoot extends Component {
-
   /// 等待玩家
   private awaitGamerNode: Node;
   /// 玩家一
@@ -25,7 +32,6 @@ export class UIRoot extends Component {
   /// 其他胜利条件
   private otherWinNode: OtherWinNode;
 
-
   /// 初始化开始游戏界面的UI
   initStartGameUI() {
     const startGameUINode = new StartGameUINode();
@@ -47,20 +53,19 @@ export class UIRoot extends Component {
 
   /// 初始化玩家UI
   initGamerUI() {
-        this.gamerOne = new GamerNode('玩家一')
+    this.gamerOne = new GamerNode("玩家一");
     this.gamerOne.setPosition(0, -540);
     this.gamerOne.charchterType = CharacterType.JianHun;
     this.node.addChild(this.gamerOne);
 
-        this.gamerTwo = new GamerNode('')
+    this.gamerTwo = new GamerNode("");
     this.gamerTwo.setPosition(877, 0);
     this.node.addChild(this.gamerTwo);
 
-        this.gamerThree = new GamerNode('')
+    this.gamerThree = new GamerNode("");
     this.node.addChild(this.gamerThree);
 
     this.initDiceButton();
-
   }
 
   /// 初始化加载UI
@@ -69,35 +74,33 @@ export class UIRoot extends Component {
     node.setPosition(177.5, -244.5);
     this.node.addChild(node);
 
-
     const spr = node.addComponent(BaseSprite);
     spr.updateSpriteFrame(NpkImage.loading_loop, 0);
 
-        const ani = new AnimationNode('ani/loading_loop01.ani');
+    const ani = new AnimationNode("ani/loading_loop01.ani");
     ani.setPosition(350, -110);
     node.addChild(ani);
 
     this.awaitGamerNode = node;
 
     /// 2秒后 结束加载
-        this.scheduleOnce(()=>{
+    setTimeout(() => {
       /// 这一帧结束之后销毁
       director.once(Director.EVENT_END_FRAME, () => {
         // 销毁
         this.awaitGamerNode.destroy();
+
+        /// 初始化开始倒计时动画
+        // this.initCountFontAni(5);
       });
 
       this.aniDone();
-
+    }, 2000);
-            /// 初始化开始倒计时
-            // this.initCountFontAni(5);
-
-        },2);
   }
 
   /// 初始化倒计时动画
   initCountFontAni(index: number) {
-        const ani = new AnimationNode('ani/dnf_quiz_' + index +'.ani',()=>{
+    const ani = new AnimationNode("ani/dnf_quiz_" + index + ".ani", () => {
       director.once(Director.EVENT_END_FRAME, () => {
         ani.destroy();
       });
@@ -113,7 +116,6 @@ export class UIRoot extends Component {
     this.node.addChild(ani);
   }
 
-
   /// 初始化投骰子按钮
   initDiceButton() {
     this.diceButton = new DiceButtonNode();
@@ -134,26 +136,21 @@ export class UIRoot extends Component {
     this.otherWinNode.active = false;
   }
 
-
   aniDone() {
     /// 恢复其他胜利按钮的状态
     this.diceButton.winButtonComponent.ButtonState = BaseButtonState.Normal;
     /// 显示其他胜利条件
     this.otherWinNode.active = true;
+    const boardNode = this.node.parent.getChildByName("BoardRoot");
+    /// 显示最底层的地图块
+    const board = boardNode.getComponent(BoardRoot);
+    board.initMapTile();
   }
 
-
-
   start() {
-
     this.node.addComponent(UITransform).setContentSize(1067, 600);
     this.initStartGameUI();
-        
   }
 
-    update(deltaTime: number) {
+  update(deltaTime: number) {}
-        
 }
-}
-
-

assets/scene/main.scene

@@ -23,7 +23,7 @@
     "_active": true,
     "_components": [],
     "_prefab": {
-      "__id__": 17
+      "__id__": 18
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -54,7 +54,7 @@
     },
     "autoReleaseAssets": false,
     "_globals": {
-      "__id__": 18
+      "__id__": 19
     },
     "_id": "f713b5ea-a70f-486c-8260-0338f089a5b8"
   },
@@ -76,14 +76,14 @@
     ],
     "_active": true,
     "_components": [
-      {
-        "__id__": 14
-      },
       {
         "__id__": 15
       },
       {
         "__id__": 16
+      },
+      {
+        "__id__": 17
       }
     ],
     "_prefab": null,
@@ -175,7 +175,7 @@
     "_priority": 0,
     "_fov": 45,
     "_fovAxis": 0,
-    "_orthoHeight": 391.5478295819936,
+    "_orthoHeight": 522.7763819095478,
     "_near": 0,
     "_far": 1000,
     "_color": {
@@ -220,10 +220,10 @@
         "__id__": 6
       },
       {
-        "__id__": 9
+        "__id__": 10
       },
       {
-        "__id__": 12
+        "__id__": 13
       }
     ],
     "_active": true,
@@ -274,6 +274,9 @@
       },
       {
         "__id__": 8
+      },
+      {
+        "__id__": 9
       }
     ],
     "_prefab": null,
@@ -342,6 +345,18 @@
     "ImgIndex": 0,
     "_id": "fc2gTwXM1Lq68bZxSz8rQ1"
   },
+  {
+    "__type__": "51518t/LCBGQZ6rvzL2I2e5",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 6
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "5c+WvJW35JkYzLE6SY7Dmz"
+  },
   {
     "__type__": "cc.Node",
     "_name": "UIRoot",
@@ -354,10 +369,10 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 10
+        "__id__": 11
       },
       {
-        "__id__": 11
+        "__id__": 12
       }
     ],
     "_prefab": null,
@@ -396,7 +411,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 9
+      "__id__": 10
     },
     "_enabled": true,
     "__prefab": null,
@@ -418,7 +433,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 9
+      "__id__": 10
     },
     "_enabled": true,
     "__prefab": null,
@@ -436,7 +451,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 13
+        "__id__": 14
       }
     ],
     "_prefab": null,
@@ -475,7 +490,7 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 12
+      "__id__": 13
     },
     "_enabled": true,
     "__prefab": null,
@@ -570,29 +585,29 @@
   {
     "__type__": "cc.SceneGlobals",
     "ambient": {
-      "__id__": 19
-    },
-    "shadows": {
       "__id__": 20
     },
-    "_skybox": {
+    "shadows": {
       "__id__": 21
     },
-    "fog": {
+    "_skybox": {
       "__id__": 22
     },
-    "octree": {
+    "fog": {
       "__id__": 23
     },
-    "skin": {
+    "octree": {
       "__id__": 24
     },
-    "lightProbeInfo": {
+    "skin": {
       "__id__": 25
     },
-    "postSettings": {
+    "lightProbeInfo": {
       "__id__": 26
     },
+    "postSettings": {
+      "__id__": 27
+    },
     "bakedWithStationaryMainLight": false,
     "bakedWithHighpLightmap": false
   },