1 选择先后顺序的卡片完成

2 倒计时node封装完成

assets/GlobalScript/CommonComponent/BaseButton.ts

@@ -78,7 +78,7 @@ export class BaseButton extends Component {
         this.PressImgIndex = PressIndex ? PressIndex : NormalIndex + 2;
         if (Disable){ this.DisableImgIndex = DisableIndex ? DisableIndex : NormalIndex + 3; }
     }
-
+    
     start() {
 
         //判断是否有精灵 如果没有 就给他搞一个

assets/GlobalScript/CommonComponent/LocationImportComponent.ts

@@ -0,0 +1,72 @@
+/*
+ * @Author: WoNiu
+ * @Date: 2024-03-23 13:22:27
+ * @LastEditTime: 2024-03-23 16:12:16
+ * @LastEditors: WoNiu
+ * @Description:
+ */
+import {
+  _decorator,
+  Color,
+  Component,
+  EditBox,
+  Font,
+  HorizontalTextAlignment,
+  Node,
+  Size,
+  Sprite,
+  UITransform,
+  v2,
+  VerticalTextAlignment,
+} from "cc";
+const { ccclass, property } = _decorator;
+
+@ccclass("LocationImportComponent")
+export class LocationImportComponent extends Component {
+  editBox: EditBox;
+
+  onLoad(): void {
+    const node = new Node();
+    node.setPosition(0, 30);
+
+    const uit = node.addComponent(UITransform);
+    uit.anchorPoint = v2(0, 1);
+    uit.setContentSize(new Size(150, 30));
+
+    const sp = node.addComponent(Sprite);
+    sp.color = Color.WHITE;
+
+    const editBox = node.addComponent(EditBox);
+    editBox.inputMode = EditBox.InputMode.SINGLE_LINE;
+    this.editBox = editBox;
+
+    this.node.addChild(node);
+
+    //* 修改 node 的坐标
+    editBox.node.on("editing-did-ended", (text: EditBox) => {
+        const los = text.textLabel.string.split(',');
+        this.node.setPosition(Number(los[0]),Number(los[1]));
+    });
+  }
+
+  start() {
+    const placeholderLabel = this.editBox.placeholderLabel;
+    placeholderLabel.string = "坐标";
+    placeholderLabel.horizontalAlign = HorizontalTextAlignment.LEFT;
+    placeholderLabel.verticalAlign = VerticalTextAlignment.TOP;
+    placeholderLabel.fontSize = 20;
+    placeholderLabel.color = Color.RED;
+    placeholderLabel.node.setPosition(0, 50);
+    placeholderLabel.node.getComponent(UITransform).anchorPoint = v2(0, 2);
+
+    const textLabel = this.editBox.textLabel;
+    textLabel.horizontalAlign = HorizontalTextAlignment.LEFT;
+    textLabel.verticalAlign = VerticalTextAlignment.TOP;
+    textLabel.fontSize = 20;
+    textLabel.color = Color.RED;
+    textLabel.node.setPosition(0, 50);
+    textLabel.node.getComponent(UITransform).anchorPoint = v2(0, 2);
+  }
+
+  update(deltaTime: number) {}
+}

assets/GlobalScript/CommonComponent/LocationImportComponent.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "08408ae9-019a-4902-9bc2-002e2e663cb6",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Script/DialogNode/CardNode.ts

@@ -0,0 +1,74 @@
+/*
+ * @Author: WoNiu
+ * @Date: 2024-03-22 19:50:30
+ * @LastEditTime: 2024-03-23 00:39:47
+ * @LastEditors: WoNiu
+ * @Description: 选择卡片节点
+ */
+
+import { _decorator, EventMouse, Node, Sprite, SpriteFrame, UITransform, v2 } from "cc";
+import { NpkImage } from "../../Tool/NPKImage";
+import { BaseSpriteFrame } from "../../GlobalScript/CommonComponent/BaseSpriteFrame";
+const { ccclass, property } = _decorator;
+
+@ccclass("CardNode")
+export class CardNode extends Node {
+  //普通精灵帧
+  NormalSpriteFrame: SpriteFrame;
+
+  // 高亮精灵帧1
+  oneSpriteFrame: SpriteFrame;
+
+  //高亮精灵帧2
+  twoSpriteFrame: SpriteFrame;
+
+  //精灵对象
+  SpriteObj: Sprite;
+
+  // 是否按钮失效
+  Disable = false;
+
+  constructor() {
+    super();
+
+    if (!this.getComponent(Sprite)) {
+      this.addComponent(Sprite);
+    }
+
+    this.getComponent(UITransform).anchorPoint = v2(0, 1);
+
+    this.SpriteObj = this.getComponent(Sprite);
+
+    new BaseSpriteFrame(NpkImage.ingame, 47, (SpriteFrame: SpriteFrame) => {
+      this.NormalSpriteFrame = SpriteFrame;
+      this.SpriteObj.spriteFrame = SpriteFrame;
+    });
+    new BaseSpriteFrame(NpkImage.ingame, 48, (SpriteFrame: SpriteFrame) => {
+      this.oneSpriteFrame = SpriteFrame;
+    });
+    new BaseSpriteFrame(NpkImage.ingame, 49, (SpriteFrame: SpriteFrame) => {
+      this.twoSpriteFrame = SpriteFrame;
+    });
+
+    this.on(Node.EventType.MOUSE_ENTER, this.OnHever, this);
+    this.on(Node.EventType.MOUSE_LEAVE, this.OffHever, this);
+    this.on(Node.EventType.MOUSE_DOWN, this.OnDown, this);
+  }
+
+  OffHever() {
+    if (this.Disable) return;
+    this.SpriteObj.spriteFrame = this.NormalSpriteFrame;
+  }
+  OnHever() {
+    if (this.Disable) return;
+    this.SpriteObj.spriteFrame = this.oneSpriteFrame;
+  }
+
+  OnDown(event: EventMouse) {
+
+    //必须是鼠标左键
+    if (event.getButton() != EventMouse.BUTTON_LEFT || this.Disable ) return;
+    this.SpriteObj.spriteFrame = this.twoSpriteFrame;
+    this.Disable = true;
+  }
+}

assets/Script/DialogNode/CardNode.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "d249ab2c-fe35-459a-915d-a40a053488e2",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Script/DialogNode/SelectNumberNode.ts

@@ -0,0 +1,90 @@
+/*
+ * @Author: WoNiu
+ * @Date: 2024-03-21 13:28:47
+ * @LastEditTime: 2024-03-23 20:26:10
+ * @LastEditors: WoNiu
+ * @Description:
+ */
+/*
+ * @Author: WoNiu
+ * @Date: 2024-03-21 13:28:47
+ * @LastEditTime: 2024-03-22 21:24:13
+ * @LastEditors: WoNiu
+ * @Description: 顺序选择卡片节点
+ */
+import {
+  _decorator,
+  Node,
+} from "cc";
+import { BaseSprite } from "../../GlobalScript/CommonComponent/BaseSprite";
+import { NpkImage } from "../../Tool/NPKImage";
+import { BaseButtonAction } from "../../GlobalScript/CommonComponent/BaseButtonAction";
+import { CardNode } from "./CardNode";
+import { TimingProgressBar } from "../Common/TimingProgressBar";
+const { ccclass, property } = _decorator;
+
+/// 选择顺序卡牌Node
+@ccclass("SelectNumberNode")
+export class SelectNumberNode extends Node {
+  oneCard: CardNode;
+  twoCard: CardNode;
+  threeCard: CardNode;
+
+  constructor() {
+    super();
+
+    this.initBackground();
+    this.initCards();
+    this.initTiming();
+  }
+
+  initBackground() {
+    const node = new Node();
+    node.setPosition(184.5, -181.5);
+
+    const bs = node.addComponent(BaseSprite);
+    bs.updateSpriteFrame(NpkImage.ingame, 46);
+    this.addChild(node);
+  }
+
+  initCards() {
+    this.oneCard = new CardNode();
+    this.oneCard.setPosition(250, -220);
+    this.addChild(this.oneCard);
+    const Onebba = this.oneCard.addComponent(BaseButtonAction);
+    Onebba.onMouseLeftDown = ()=>{ this.onMouseLeftDown(0) };
+
+    this.twoCard = new CardNode();
+    this.twoCard.setPosition(444.5, -220);
+    this.addChild(this.twoCard);
+    const twoBba = this.twoCard.addComponent(BaseButtonAction);
+    twoBba.onMouseLeftDown = ()=>{ this.onMouseLeftDown(1) };
+
+    this.threeCard = new CardNode();
+    this.threeCard.setPosition(639, -220);
+    this.addChild(this.threeCard);
+    const threeBba = this.threeCard.addComponent(BaseButtonAction);
+    threeBba.onMouseLeftDown = ()=>{ this.onMouseLeftDown(2) };
+
+  }
+
+  initTiming(){
+    const time = new TimingProgressBar();
+    this.addChild(time);
+    time.tweenerStart(3,()=>{
+      console.log('缓动完成');
+    });
+  }
+
+  onMouseLeftDown(tag:number){
+    const cards = [this.oneCard,this.twoCard,this.threeCard];
+    cards.forEach((card)=>{
+      card.Disable = true;
+    });
+
+  };
+
+  update(deltaTime: number) {}
+}
+
+

assets/Script/DialogNode/SelectNumberNode.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "06193d25-5a05-4aaf-92a9-d5358c56a4ff",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Script/UIRoot.ts

@@ -15,7 +15,6 @@ import { DiceButtonNode } from "./UINode/DiceButtonNode";
 import { OtherWinNode, otherWinType } from "./UINode/OtherWinNode";
 import { BoardRoot } from "./BoardRoot";
 import { StartGameUINode } from "./StartGameNode/StartGameUINode";
-import { SelectNumberNode } from "./DialogNode/SelectNumberNode";
 import { GameRootSingleton } from "./GameRootController";
 const { ccclass } = _decorator;
 

assets/Script/common/TimingProgressBar.ts

@@ -0,0 +1,133 @@
+/*
+ * @Author: WoNiu
+ * @Date: 2024-03-21 13:44:57
+ * @LastEditTime: 2024-03-23 20:26:44
+ * @LastEditors: WoNiu
+ * @Description:
+ */
+/*
+ * @Author: WoNiu
+ * @Date: 2024-03-21 13:44:57
+ * @LastEditTime: 2024-03-23 12:57:36
+ * @LastEditors: WoNiu
+ * @Description: 倒计时进度
+ */
+import {
+  _decorator,
+  Component,
+  Node,
+  ProgressBar,
+  Sprite,
+  tween,
+  UITransform,
+  v2,
+} from "cc";
+import { BaseSprite } from "../../GlobalScript/CommonComponent/BaseSprite";
+import { NpkImage } from "../../Tool/NPKImage";
+import { LocationImportComponent } from "../../GlobalScript/CommonComponent/LocationImportComponent";
+const { ccclass } = _decorator;
+
+/// 倒计时时间进度Node
+@ccclass("TimingProgressBar")
+export class TimingProgressBar extends Node {
+  //* 进度条bar
+  progressBar: ProgressBar;
+  //* 进度条精灵
+  barSprite: Sprite;
+
+  //* 缓动控制
+  timingComponent: TimingComponent;
+
+  constructor() {
+    super();
+
+    this.setPosition(353.5, -355);
+    this.addComponent(UITransform).anchorPoint = v2(0, 1);
+
+    this.timingComponent = this.addComponent(TimingComponent);
+
+    this.initBackgrund();
+    this.initBarSprite();
+    this.initProgressBar();
+  }
+
+  //* 开始缓动
+  tweenerStart(time:number,back:Function){
+    this.timingComponent.tweenerStart(time,back);
+  }
+
+  initBackgrund() {
+    const bs = this.addComponent(BaseSprite);
+    bs.updateSpriteFrame(NpkImage.ingame, 43);
+  }
+
+  initProgressBar() {
+    const progressBar = this.addComponent(ProgressBar);
+    progressBar.barSprite = this.barSprite;
+    progressBar.mode = ProgressBar.Mode.FILLED;
+    progressBar.totalLength = 280;
+    progressBar.progress = 1;
+    this.progressBar = progressBar;
+  }
+
+  initBarSprite() {
+    const node = new Node();
+    this.addChild(node);
+    node.setPosition(60, -22);
+
+    const barNode = new Node();
+    node.addChild(barNode);
+    this.barSprite = barNode.addComponent(Sprite);
+
+    const bs = barNode.addComponent(BaseSprite);
+    bs.updateSpriteFrame(NpkImage.ingame, 45);
+
+    this.barSprite = bs.SpriteObj;
+    this.barSprite.spriteFrame = bs.SpriteObj.spriteFrame;
+    this.barSprite.type = Sprite.Type.FILLED;
+  }
+}
+
+@ccclass("TimingComponent")
+export class TimingComponent extends Component {
+
+
+  obj = { progress: 1};
+
+  onCompleteBack: Function;
+
+  start() {
+
+  }
+
+  tweenerStart(time:number,back:Function){
+
+    this.onCompleteBack = back;
+
+    tween(this.obj)
+      .to(
+        time,
+        { progress: 0 },
+        {
+          easing: "linear",
+          onUpdate: this.onUpdate.bind(this),
+          onComplete: this.onComplete.bind(this),
+        }
+      )
+      .start();
+  }
+
+  //* 缓动进度
+  onUpdate(target: any, ratio: number){
+    const timingProgressBar: TimingProgressBar = this.node as TimingProgressBar;
+    timingProgressBar.progressBar.progress = this.obj.progress;
+  }
+
+  //* 缓动完成
+  onComplete(){
+    this.obj.progress = 1;
+    this.onCompleteBack();
+  }
+
+  update(deltaTime: number) {}
+}

assets/Script/common/TimingProgressBar.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "f93a24df-e11c-4c40-a67f-9d1e61d67547",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scene/main.scene

@@ -175,7 +175,7 @@
     "_priority": 0,
     "_fov": 45,
     "_fovAxis": 0,
-    "_orthoHeight": 473.21751412429376,
+    "_orthoHeight": 444.3474801061008,
     "_near": 0,
     "_far": 1000,
     "_color": {