同上改在我原文里 不然我看不懂import uiBase from "./uiBase.js";
import { Container, Graphics, Text, Assets, Sprite, Texture } from "pixi.js";
import gameData from "../Frame/gameDataMgr.js";
import networkMgr from "../Frame/networkMgr.js";
import { dataPersistenceMgr } from "../Frame/dataPersistenceMgr.js";
class uiShop extends uiBase {
mainContainer; // 主界面容器
overlay; // 背景遮罩
shopBg3Container; // 弹窗容器
shopBgButton; // 按钮
buttonText; //按钮文字
closeButton; // 叉叉按钮
introduceText; // 介绍背景
isInist = false;
async init() {
super.init();
// 创建主界面容器
this.mainContainer = new Container();
this.container.addChild(this.mainContainer);
// 预加载资源
await Assets.load([
"assets/UIShop/+.png",
"assets/UIShop/复制.png",
"assets/UIShop/商店底1_1.png",
"assets/UIShop/商店底2.png",
"assets/UIShop/商店底3.png",
"assets/UIShop/赠送底.png",
"assets/UIShop/赠送金额底.png",
"assets/UIShop/UI1_02.png",
"assets/UIShop/UI1_03.png",
"assets/UIShop/UI1_05.png",
"assets/UIShop/UI1_07.png",
"assets/UIShop/UI1_09_2.png",
"assets/UIShop/UI1_09.png",
"assets/UIShop/UI1_11.png",
"assets/UIShop/UI1_14.png",
"assets/UIShop/UI1_17.png",
"assets/UIShop/UI1_22.png",
]);
// === 主界面内容 ===
// 商店底2
const shopBg1 = new Sprite(Texture.from("assets/UIShop/商店底2.png"));
shopBg1.width = 650;
shopBg1.height = 55;
shopBg1.position.set(-330, -184);
// 商店底1_1
const shopBg2 = new Sprite(Texture.from("assets/UIShop/商店底1_1.png"));
shopBg2.width = 650;
shopBg2.height = 400;
shopBg2.position.set(-330, -210);
// 叉叉按钮
this.closeButton = new Sprite(Texture.from("assets/UIShop/UI1_03.png"));
this.closeButton.width = 50;
this.closeButton.height = 50;
this.closeButton.anchor.set(1, 0); // 锚点为右上角
this.closeButton.position.set(335 - 20, -190 + 20); // 右上偏移
this.closeButton.eventMode = "static";
this.closeButton.cursor = "pointer";
this.closeButton.on("pointerdown", () => this.hide());
// 将所有主界面元素加入 mainContainer
this.mainContainer.addChild( shopBg2, shopBg1,this.closeButton);
// === 弹窗与遮罩===
// 背景遮罩
this.overlay = new Graphics();
this.overlay.beginFill(0x000000, 0.6);
this.overlay.drawRect(-375, -667, 750, 1334);
this.overlay.endFill();
this.overlay.visible = true;
this.container.addChild(this.overlay);
// 弹窗背景
const shopBg3 = new Sprite(Texture.from("assets/UIShop/商店底3.png"));
shopBg3.width = 450;
shopBg3.height = 300;
shopBg3.position.set(0, 0);
// 弹窗容器
this.shopBg3Container = new Container();
this.shopBg3Container.position.set(-240, -140);
this.shopBg3Container.addChild(shopBg3);
this.container.addChild(this.shopBg3Container);
// 介绍文字
this.introduceText = new Text("介绍背景", {
fontFamily: "Arial",
fontSize: 13,
fill: 0xffffff,
align: "center",
stroke: "#000000",
strokeThickness: 0,
lineHeight: 25,
});
this.introduceText.anchor.set(0.5);
this.introduceText.position.set(
shopBg3.width / 2 + 48,
shopBg3.height / 2 - 10
);
this.shopBg3Container.addChild(this.introduceText);
// 确认按钮
this.shopBgButton = new Sprite(Texture.from("assets/UIShop/UI1_09.png"));
this.shopBgButton.width = 210;
this.shopBgButton.height = 60;
this.shopBgButton.position.set(-80, 80);
this.shopBgButton.eventMode = "static";
this.shopBgButton.cursor = "pointer";
// 按钮文字
this.buttonText = new Text("哈咯", {
fontSize: 28,
fill: 0xffffff,
align: "center",
stroke: "#000000",
strokeThickness: 2,
});
this.buttonText.anchor.set(0.5);
this.buttonText.position.set(
this.shopBgButton.width / 2,
this.shopBgButton.height / 2
);
this.shopBgButton.addChild(this.buttonText);
// 按钮点击事件
this.shopBgButton.on("pointerdown", () => {
if (this.shopBg3Container) this.shopBg3Container.visible = false;
if (this.shopBgButton) this.shopBgButton.visible = false;
if (this.overlay) this.overlay.visible = false;
// 启用叉叉按钮
if (this.closeButton) {
this.closeButton.eventMode = "static";
this.closeButton.cursor = "pointer";
}
});
this.container.addChild(this.shopBgButton);
// 初始化状态
this.resetState();
this.localize();
this.isInist = true;
}
show() {
console.log(this.constructor.name + " 1");
if (!this.isInist) {
this.init();
} else {
this.resetState();
}
console.log(this.constructor.name + " 2");
// 显示整个 UI 根容器
this.container.visible = true;
}
resetState() {
// 安全地重置可见性
if (this.shopBg3Container) this.shopBg3Container.visible = true;
if (this.shopBgButton) this.shopBgButton.visible = true;
if (this.overlay) this.overlay.visible = true;
if (this.mainContainer) this.mainContainer.alpha = 1;
// 初始禁用叉叉按钮
if (this.closeButton) {
this.closeButton.eventMode = "none";
this.closeButton.cursor = "default";
}
}
hide() {
this.container.visible = false;
}
localize() {
if (this.buttonText && this.introduceText) {
this.buttonText.text = super.getLocalWords("Confirmation");
this.introduceText.text = super.getLocalWords("introduce");
}
}
}
export const UIShop = new uiShop();