UEGridMap.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. import Gamecfg from "../../common/gameCfg";
  2. import { gameMethod } from "../../common/gameMethod";
  3. import { xlsChapterLayout } from "../../common/xlsConfig";
  4. import GameDataCenter from "../../data/GameDataCenter";
  5. import UEBase from "../../frameWork/compment/UEBase";
  6. import { HcInfoGeziInfo, ResHcInfo } from "../../shared/hc/PtlHcInfo";
  7. import { ResHcMerge } from "../../shared/hc/PtlHcMerge";
  8. import AssetMgr from "../../utils/AssetMgr";
  9. import { GridConstant } from "./GridConstant";
  10. import { GridEvent } from "./GridEvent";
  11. import UECell, { I_CellData } from "./UECell";
  12. import UECube from "./UECube";
  13. import UEMergeTip from "./UEMergeTip";
  14. const { ccclass, property } = cc._decorator;
  15. const DRAG_THRESHOLD: number = 10; // 拖动判定阈值(像素)
  16. @ccclass
  17. export default class UEGridMap extends UEBase {
  18. static readonly BundleKey: string = "gridMap";
  19. static readonly PrefabUrl: string = "UEGridMap";
  20. static readonly CLS: string = "UEGridMap";
  21. @property(cc.Prefab)
  22. cellPrefab: cc.Prefab = null!;
  23. @property(cc.Prefab)
  24. cubePrefab: cc.Prefab = null!;
  25. @property(cc.Node)
  26. gridLayer: cc.Node = null;
  27. @property(cc.Node)
  28. cellLayer: cc.Node = null;
  29. @property(cc.Node)
  30. cubeLayer: cc.Node = null;
  31. @property(cc.Node)
  32. tipLayer: cc.Node = null;
  33. @property(cc.Node)
  34. effectLayer: cc.Node = null;
  35. cellMap: { [gid: number]: UECell } = {};
  36. private isDragging: boolean = false;
  37. private dragStartPos: cc.Vec2 = cc.v2(0, 0);
  38. private selectedCell: UECell = null!;
  39. private lastMoveCell: UECell = null!;
  40. private clickCnt: number = 0;
  41. private ueMergeTip: UEMergeTip;
  42. Init() {
  43. this.ueMergeTip = AssetMgr.instantiateUE(UEMergeTip);
  44. this.tipLayer.addChild(this.ueMergeTip.node);
  45. this.ueMergeTip.node.active = false;
  46. this.gridLayer.setContentSize(GridConstant.CELL_WIDTH * GridConstant.ROW, GridConstant.CELL_HEIGHT * GridConstant.COL);
  47. // this.LoadMapData();
  48. GameDataCenter.gridMap.Init(this);
  49. this.InitEvent();
  50. GameDataCenter.gridMap.sendHcInfo({});
  51. }
  52. InitEvent(): void {
  53. this.gridLayer.on(cc.Node.EventType.TOUCH_START, this.OnTouchStart, this);
  54. this.gridLayer.on(cc.Node.EventType.TOUCH_MOVE, this.OnTouchMove, this);
  55. this.gridLayer.on(cc.Node.EventType.TOUCH_END, this.OnTouchEnd, this);
  56. this.gridLayer.on(cc.Node.EventType.TOUCH_CANCEL, this.OnTouchEnd, this);
  57. this.initEvent(GridEvent.TRIGGER_EMITTER, this.TriggerEmitter);
  58. this.initEvent(GridEvent.HC_INFO_RSP, this.LoadMapData);
  59. this.initEvent(GridEvent.HC_MERGE_RSP, this.OnHcMergeRsp);
  60. }
  61. /** 加载地图数据 */
  62. private LoadMapData(data: ResHcInfo) {
  63. this.cellMap = {};
  64. for (let i = 0; i < GridConstant.COL; i++) {
  65. let rowCells = [];
  66. let rowCubes = [];
  67. for (let j = 0; j < GridConstant.ROW; j++) {
  68. let idx = (i + 1) * 10 + (j + 1);
  69. let cellData = data.list[idx];
  70. if (cellData) {
  71. let cell = this.CreateCell(i, j);
  72. rowCells.push(cell);
  73. let cube = null;
  74. if (cellData.type > 0) {
  75. cube = this.CreateCube(i, j);
  76. rowCubes.push(cube);
  77. cube.Init({
  78. type: cellData.type,
  79. id: cellData.correlationId,
  80. zIndex: idx,
  81. unlock: cellData.unlock
  82. }, idx)
  83. }
  84. cell.Init({
  85. zIndex: idx,
  86. ueCube: cube
  87. });
  88. this.cellMap[idx] = cell;
  89. }
  90. }
  91. }
  92. }
  93. private OnHcMergeRsp(data: { cell: UECell, cube: HcInfoGeziInfo }) {
  94. let vec = GameDataCenter.gridMap.TranIdxToPos(data.cell.GetZIndex());
  95. let mergeCube = this.CreateCube(vec.y, vec.x);
  96. mergeCube.Init({
  97. type: data.cube.type,
  98. id: data.cube.correlationId,
  99. zIndex: data.cell.GetZIndex(),
  100. unlock: 0
  101. });
  102. data.cell.SetCube(mergeCube);
  103. // if (toCell.IsEmpty()) {
  104. // //格子上没有物品
  105. // fromCell.MoveCubeToCell(toCell);
  106. // toCell.SetCube(fromCell.GetCube());
  107. // fromCell.SetCube(null);
  108. // } else if (this.CanMergeItems(fromCell, toCell)) {
  109. // toCell.GetCube().PlayMergeAnim();
  110. // fromCell.ClearCube();
  111. // toCell.ClearCube();
  112. // let vec = this.TranIdxToPos(toCell.GetZIndex());
  113. // let mergeCube = this.CreateCube(vec.y, vec.x);
  114. // mergeCube.Init({
  115. // type: 3,
  116. // id: 10022,
  117. // zIndex: toCell.GetZIndex(),
  118. // unlock: 0
  119. // });
  120. // toCell.SetCube(mergeCube);
  121. // } else {
  122. // this.SwitchCell(fromCell, toCell);
  123. // }
  124. }
  125. /** 根据索引获取实际像素坐标 */
  126. private GetPosByIdx(i: number, j: number): cc.Vec3 {
  127. const startX = -(GridConstant.ROW * GridConstant.CELL_WIDTH) / 2;
  128. const startY = (GridConstant.COL * GridConstant.CELL_HEIGHT) / 2;
  129. return cc.v3(
  130. startX + j * GridConstant.CELL_WIDTH + GridConstant.CELL_WIDTH / 2,
  131. startY - i * GridConstant.CELL_HEIGHT - GridConstant.CELL_HEIGHT / 2
  132. )
  133. }
  134. /** 创建格子 */
  135. private CreateCell(i: number, j: number) {
  136. let cell = cc.instantiate(this.cellPrefab).getComponent(UECell);
  137. this.cellLayer.addChild(cell.node);
  138. cell.node.width = GridConstant.CELL_WIDTH;
  139. cell.node.height = GridConstant.CELL_HEIGHT;
  140. let pos = this.GetPosByIdx(i, j);
  141. cell.node.setPosition(pos);
  142. return cell;
  143. }
  144. /** 创建棋子 */
  145. private CreateCube(i: number, j: number) {
  146. let cube = cc.instantiate(this.cubePrefab).getComponent(UECube);
  147. this.cubeLayer.addChild(cube.node);
  148. cube.node.width = GridConstant.CELL_WIDTH;
  149. cube.node.height = GridConstant.CELL_HEIGHT;
  150. let pos = this.GetPosByIdx(i, j);
  151. cube.node.setPosition(pos);
  152. return cube;
  153. }
  154. private OnTouchStart(event: cc.Event.EventTouch): void {
  155. const touchPos = this.gridLayer.convertToNodeSpaceAR(event.getLocation());
  156. const cell = this.GetCellByPos(touchPos);
  157. if (cell && cell.CanDrag()) {
  158. this.dragStartPos = touchPos;
  159. if (this.selectedCell && this.selectedCell != cell) {
  160. this.selectedCell.SetSelect(false);
  161. this.clickCnt = 1;
  162. } else if (!this.selectedCell) {
  163. this.clickCnt = 1;
  164. }
  165. this.selectedCell = cell;
  166. cell.SetSelect(true);
  167. }
  168. }
  169. private OnTouchMove(event: cc.Event.EventTouch): void {
  170. if (!this.selectedCell || !this.dragStartPos) return;
  171. const touchPos = this.gridLayer.convertToNodeSpaceAR(event.getLocation());
  172. const distance = touchPos.sub(this.dragStartPos).mag();
  173. // 只有当移动距离超过阈值时才开始拖动
  174. if (!this.isDragging && distance >= DRAG_THRESHOLD) {
  175. this.isDragging = true;
  176. this.selectedCell.GetCube().StartDrag();
  177. this.selectedCell.SetSelect(false);
  178. }
  179. if (this.isDragging) {
  180. // 计算移动差值并应用到cube节点
  181. const deltaPos = touchPos.sub(this.dragStartPos);
  182. const cube = this.selectedCell.GetCube();
  183. const originalPos = cube.node.getPosition();
  184. cube.node.setPosition(originalPos.x + deltaPos.x, originalPos.y + deltaPos.y);
  185. this.dragStartPos = touchPos;
  186. const targetCell = this.GetCellByPos(touchPos);
  187. this.lastMoveCell?.SetSelect(false);
  188. this.lastMoveCell = targetCell;
  189. targetCell?.SetSelect(true);
  190. if (targetCell && targetCell != this.selectedCell) {
  191. if (!targetCell.IsEmpty() && GameDataCenter.gridMap.CellCanPut(this.selectedCell, targetCell)) {
  192. this.ueMergeTip.node.setPosition(targetCell.node.getPosition());
  193. this.ueMergeTip.Init({
  194. idx: targetCell.GetZIndex(),
  195. ueCube1: this.selectedCell.GetCube(),
  196. ueCube2: targetCell.GetCube()
  197. });
  198. } else {
  199. this.ueMergeTip.Hide();
  200. }
  201. } else {
  202. this.ueMergeTip.Hide();
  203. }
  204. }
  205. }
  206. private OnTouchEnd(event: cc.Event.EventTouch): void {
  207. this.dragStartPos = null;
  208. this.ueMergeTip.Hide();
  209. if (!this.selectedCell) return;
  210. const touchPos = this.gridLayer.convertToNodeSpaceAR(event.getLocation());
  211. const targetCell = this.GetCellByPos(touchPos);
  212. if (!this.isDragging && this.selectedCell === targetCell) {
  213. //二次点击同一个格子
  214. if (!targetCell.IsEmpty()) {
  215. targetCell.GetCube().PlayJellyAnim();
  216. if (this.clickCnt >= 2) {
  217. console.log("二次点击同一个格子");
  218. targetCell.GetCube().TriggerClick();
  219. } else {
  220. this.clickCnt++;
  221. }
  222. }
  223. } else {
  224. if (!this.isDragging) return;
  225. if (targetCell && targetCell != this.selectedCell) {
  226. GameDataCenter.gridMap.TryMergeItems(this.selectedCell, targetCell);
  227. this.selectedCell.SetSelect(false);
  228. targetCell.SetSelect(true);
  229. } else {
  230. this.selectedCell.GetCube().BackToOriginalPos(true);
  231. }
  232. this.isDragging = false;
  233. this.selectedCell = targetCell;
  234. }
  235. }
  236. /** 根据像素坐标获取格子 */
  237. private GetCellByPos(pos: cc.Vec2): UECell | null {
  238. const startX = -(GridConstant.ROW * GridConstant.CELL_WIDTH) / 2;
  239. const startY = (GridConstant.COL * GridConstant.CELL_HEIGHT) / 2;
  240. const row = Math.floor((pos.x - startX) / GridConstant.CELL_WIDTH);
  241. const col = Math.floor((startY - pos.y) / GridConstant.CELL_HEIGHT);
  242. if (col >= 0 && col < GridConstant.COL && row >= 0 && row < GridConstant.ROW) {
  243. let idx = (col + 1) * 10 + (row + 1);
  244. return this.cellMap[idx];
  245. }
  246. return null;
  247. }
  248. /** 获取空格子 */
  249. private GetEmptyCell(): UECell {
  250. for (const key in this.cellMap) {
  251. const element = this.cellMap[key];
  252. if (element.IsEmpty()) {
  253. return element;
  254. }
  255. }
  256. return null;
  257. }
  258. /** 发射出新的物品 */
  259. private TriggerEmitter(data: { idx: number, item: HcInfoGeziInfo, targetIdx: number }) {
  260. let targetCell = this.cellMap[data.targetIdx];
  261. let startPos = GameDataCenter.gridMap.TranIdxToPos(data.idx);
  262. let mergeCube = this.CreateCube(startPos.y, startPos.x);
  263. mergeCube.Init({
  264. type: data.item.type,
  265. id: data.item.correlationId,
  266. zIndex: data.idx,
  267. unlock: 0
  268. });
  269. targetCell.SetCube(mergeCube);
  270. mergeCube.SetZIndex(1000);
  271. let targetPos = GameDataCenter.gridMap.TranIdxToPos(data.targetIdx);
  272. // 设置动画时间
  273. const duration = 0.8;
  274. // 设置最大高度(向上弹跳的高度)
  275. const maxHeight = 400;
  276. // 计算起点和终点
  277. const startWorldPos = mergeCube.node.getPosition();
  278. const endWorldPos = this.GetPosByIdx(targetPos.y, targetPos.x);
  279. // 计算方向向量和总距离
  280. const moveVec = cc.v2(endWorldPos.x - startWorldPos.x, endWorldPos.y - startWorldPos.y);
  281. const totalDistance = moveVec.mag();
  282. const normalizedDir = moveVec.normalize();
  283. // 计算最后弹跳的起点(在终点前20%距离处)
  284. const bounceStartPos = cc.v3(
  285. endWorldPos.x - normalizedDir.x * (totalDistance * 0.2),
  286. endWorldPos.y - normalizedDir.y * (totalDistance * 0.2),
  287. 0
  288. );
  289. // 创建第一段抛物线(抛向空中然后落到弹跳起点)
  290. const bezier1 = [];
  291. const midPoint1 = cc.v3(
  292. startWorldPos.x + moveVec.x * 0.3,
  293. Math.max(startWorldPos.y, bounceStartPos.y) + maxHeight,
  294. 0
  295. );
  296. bezier1.push(cc.v2(startWorldPos.x, startWorldPos.y));
  297. bezier1.push(cc.v2(midPoint1.x, midPoint1.y));
  298. bezier1.push(cc.v2(bounceStartPos.x, bounceStartPos.y));
  299. // 创建第二段弹跳(第一次弹跳)
  300. const bezier2 = [];
  301. const bounceHeight = totalDistance * 0.15; // 弹跳高度设为总距离的15%
  302. // 计算第一次弹跳的最高点和落点
  303. const firstBounceTop = cc.v2(
  304. (bounceStartPos.x + endWorldPos.x) / 2, // 水平位置在中间
  305. endWorldPos.y + bounceHeight // 垂直高度为弹跳高度
  306. );
  307. // 计算第二段距离(从bounceStartPos到终点的距离)
  308. const secondDistance = totalDistance * 0.2; // 最后20%的距离
  309. const firstBounceEnd = cc.v2(
  310. bounceStartPos.x + normalizedDir.x * (secondDistance * 0.5), // 前进一半
  311. bounceStartPos.y + normalizedDir.y * (secondDistance * 0.5)
  312. );
  313. bezier2.push(cc.v2(bounceStartPos.x, bounceStartPos.y)); // 起跳点
  314. bezier2.push(firstBounceTop); // 最高点
  315. bezier2.push(firstBounceEnd); // 第一次落点
  316. // 创建第三段弹跳(最后一次弹跳到终点)
  317. const bezier3 = [];
  318. const secondBounceTop = cc.v2(
  319. (firstBounceEnd.x + endWorldPos.x) / 2,
  320. endWorldPos.y + bounceHeight * 0.6 // 第二次弹跳高度为第一次的60%
  321. );
  322. bezier3.push(firstBounceEnd); // 起跳点
  323. bezier3.push(secondBounceTop); // 最高点
  324. bezier3.push(cc.v2(endWorldPos.x, endWorldPos.y)); // 终点
  325. // 创建动作序列
  326. const bezierAction1 = cc.bezierTo(duration * 0.7, bezier1);
  327. const bezierAction2 = cc.bezierTo(duration * 0.2, bezier2);
  328. const bezierAction3 = cc.bezierTo(duration * 0.1, bezier3);
  329. const seq = cc.sequence(
  330. bezierAction1,
  331. bezierAction2,
  332. bezierAction3,
  333. cc.callFunc(() => {
  334. mergeCube.SetZIndex(data.targetIdx);
  335. })
  336. );
  337. // 执行动画
  338. mergeCube.node.runAction(seq);
  339. }
  340. /** 计算圆上的位置 */
  341. private GetCirclePosition(index: number, total: number): cc.Vec2 {
  342. const radius = 150; // 圆的半径
  343. if (total === 1) {
  344. // 只有一个元素时,放在正上方
  345. return cc.v2(0, radius);
  346. }
  347. // 计算每个元素之间的角度
  348. const angleStep = 60; // 相邻两个元素之间的角度
  349. const startAngle = 90 + ((total - 1) * angleStep) / 2; // 从90度(正上方)开始,向右分布
  350. // 计算当前元素的角度(角度转弧度)
  351. const angle = (startAngle - index * angleStep) * Math.PI / 180; // 减去角度使其向右分布
  352. // 计算圆上的位置
  353. const x = radius * Math.cos(angle);
  354. const y = radius * Math.sin(angle);
  355. return cc.v2(x, y);
  356. }
  357. /** 设置物品在圆上的位置 */
  358. private SetItemsPosition(mergeArr: any[]) {
  359. mergeArr.forEach((item, index) => {
  360. const pos = this.GetCirclePosition(index, mergeArr.length);
  361. item.node.setPosition(pos);
  362. });
  363. }
  364. }