717 lines
19 KiB
TypeScript
717 lines
19 KiB
TypeScript
import { _decorator, Node, EditBox, instantiate, Vec3, Button, Label, Sprite, SpriteFrame, AudioClip, AudioSource, UITransform } from 'cc';
|
||
import { BaseView } from 'db://assets/scripts/core/BaseView';
|
||
import { ViewManager } from 'db://assets/scripts/core/ViewManager';
|
||
import { StorageManager } from 'db://assets/scripts/utils/StorageManager';
|
||
import { WxSDK } from 'db://assets/scripts/utils/WxSDK';
|
||
import { LevelDataManager } from 'db://assets/scripts/utils/LevelDataManager';
|
||
import { RuntimeLevelConfig } from 'db://assets/scripts/types/LevelTypes';
|
||
import { ToastManager } from 'db://assets/scripts/utils/ToastManager';
|
||
const { ccclass, property } = _decorator;
|
||
|
||
/**
|
||
* 关卡页面组件
|
||
* 继承 BaseView，实现页面生命周期
|
||
*/
|
||
@ccclass('PageLevel')
|
||
export class PageLevel extends BaseView {
|
||
// ========== 节点引用 ==========
|
||
@property(Node)
|
||
inputLayout: Node | null = null;
|
||
|
||
@property(Node)
|
||
submitButton: Node | null = null;
|
||
|
||
@property(Node)
|
||
inputTemplate: Node | null = null;
|
||
|
||
@property(Node)
|
||
actionNode: Node | null = null;
|
||
|
||
@property(Node)
|
||
iconSetting: Node | null = null;
|
||
|
||
@property(Node)
|
||
tipsLayout: Node | null = null;
|
||
|
||
@property(Node)
|
||
mainImage: Node | null = null;
|
||
|
||
@property(Node)
|
||
tipsItem1: Node | null = null;
|
||
|
||
@property(Node)
|
||
tipsItem2: Node | null = null;
|
||
|
||
@property(Node)
|
||
tipsItem3: Node | null = null;
|
||
|
||
@property(Node)
|
||
unLockItem2: Node | null = null;
|
||
|
||
@property(Node)
|
||
unLockItem3: Node | null = null;
|
||
|
||
@property(Label)
|
||
clockLabel: Label | null = null;
|
||
|
||
@property(Label)
|
||
liveLabel: Label | null = null;
|
||
|
||
// ========== 配置属性 ==========
|
||
@property({
|
||
min: 0,
|
||
tooltip: '当前关卡索引'
|
||
})
|
||
currentLevelIndex: number = 0;
|
||
|
||
@property(AudioClip)
|
||
clickAudio: AudioClip | null = null;
|
||
|
||
@property(AudioClip)
|
||
successAudio: AudioClip | null = null;
|
||
|
||
@property(AudioClip)
|
||
failAudio: AudioClip | null = null;
|
||
|
||
// ========== 内部状态 ==========
|
||
/** 当前创建的输入框节点数组 */
|
||
private _inputNodes: Node[] = [];
|
||
|
||
/** 倒计时剩余秒数 */
|
||
private _countdown: number = 60;
|
||
|
||
/** 倒计时是否结束 */
|
||
private _isTimeUp: boolean = false;
|
||
|
||
/** 当前关卡配置 */
|
||
private _currentConfig: RuntimeLevelConfig | null = null;
|
||
|
||
/** 是否正在切换关卡（防止重复提交） */
|
||
private _isTransitioning: boolean = false;
|
||
|
||
/**
|
||
* 页面首次加载时调用
|
||
*/
|
||
onViewLoad(): void {
|
||
console.log('[PageLevel] onViewLoad');
|
||
// 从本地存储恢复关卡进度
|
||
this.currentLevelIndex = StorageManager.getCurrentLevelIndex();
|
||
console.log(`[PageLevel] 恢复关卡进度: 第 ${this.currentLevelIndex + 1} 关`);
|
||
this.updateLiveLabel();
|
||
this.initIconSetting();
|
||
this.initUnlockButtons();
|
||
this.initSubmitButton();
|
||
|
||
// 异步加载关卡资源，完成后启动倒计时
|
||
this.initLevel().then(() => {
|
||
this.startCountdown();
|
||
}).catch(err => {
|
||
console.error('[PageLevel] 加载关卡失败:', err);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 页面每次显示时调用
|
||
*/
|
||
onViewShow(): void {
|
||
console.log('[PageLevel] onViewShow');
|
||
this.updateLiveLabel();
|
||
}
|
||
|
||
/**
|
||
* 页面隐藏时调用
|
||
*/
|
||
onViewHide(): void {
|
||
console.log('[PageLevel] onViewHide');
|
||
}
|
||
|
||
/**
|
||
* 页面销毁时调用
|
||
*/
|
||
onViewDestroy(): void {
|
||
console.log('[PageLevel] onViewDestroy');
|
||
this.clearInputNodes();
|
||
this.stopCountdown();
|
||
}
|
||
|
||
/**
|
||
* 初始化关卡（从 API 数据加载，异步确保资源就绪）
|
||
*/
|
||
private async initLevel(): Promise<void> {
|
||
// 先尝试从缓存获取
|
||
let config = LevelDataManager.instance.getLevelConfig(this.currentLevelIndex);
|
||
|
||
if (!config) {
|
||
// 缓存中没有，异步加载
|
||
console.log(`[PageLevel] 关卡 ${this.currentLevelIndex + 1} 资源未缓存，开始加载...`);
|
||
config = await LevelDataManager.instance.ensureLevelReady(this.currentLevelIndex);
|
||
}
|
||
|
||
if (!config) {
|
||
console.warn(`[PageLevel] 没有找到关卡配置，索引: ${this.currentLevelIndex}`);
|
||
return;
|
||
}
|
||
|
||
console.log(`[PageLevel] 初始化关卡 ${this.currentLevelIndex + 1}: ${config.name}`);
|
||
this._applyLevelConfig(config);
|
||
}
|
||
|
||
/**
|
||
* 应用关卡配置（通用初始化逻辑）
|
||
*/
|
||
private _applyLevelConfig(config: RuntimeLevelConfig): void {
|
||
this._currentConfig = config;
|
||
|
||
// 重置关卡切换状态，允许再次提交
|
||
this._isTransitioning = false;
|
||
|
||
// 重置倒计时状态
|
||
this._isTimeUp = false;
|
||
this._countdown = 60;
|
||
|
||
// 设置主图
|
||
this.setMainImage(config.spriteFrame);
|
||
|
||
// 设置线索1（默认解锁）
|
||
this.setClue(1, config.clue1);
|
||
|
||
// 隐藏线索2、3
|
||
this.hideClue(2);
|
||
this.hideClue(3);
|
||
|
||
// 显示解锁按钮2、3
|
||
this.showUnlockButton(2);
|
||
this.showUnlockButton(3);
|
||
|
||
// 根据答案长度创建单个输入框
|
||
this.createSingleInput(config.answer.length);
|
||
|
||
// 更新倒计时显示
|
||
this.updateClockLabel();
|
||
|
||
// 预加载下一关图片（静默加载，不阻塞）
|
||
LevelDataManager.instance.preloadNextLevel(this.currentLevelIndex);
|
||
|
||
console.log(`[PageLevel] 初始化关卡 ${this.currentLevelIndex + 1}, 答案长度: ${config.answer.length}`);
|
||
}
|
||
|
||
/**
|
||
* 创建单个输入框
|
||
* @param answerLength 答案长度，用于设置 placeholder 和宽度
|
||
*/
|
||
private createSingleInput(answerLength: number): void {
|
||
if (!this.inputLayout || !this.inputTemplate) {
|
||
console.error('[PageLevel] inputLayout 或 inputTemplate 未设置');
|
||
return;
|
||
}
|
||
|
||
// 清理现有输入框
|
||
this.clearInputNodes();
|
||
|
||
// 隐藏模板节点
|
||
this.inputTemplate.active = false;
|
||
|
||
// 创建单个输入框
|
||
const inputNode = instantiate(this.inputTemplate);
|
||
inputNode.active = true;
|
||
inputNode.name = 'singleInput';
|
||
|
||
// 设置位置
|
||
inputNode.setPosition(new Vec3(0, 0, 0));
|
||
|
||
// 获取 EditBox 组件
|
||
const editBox = inputNode.getComponent(EditBox);
|
||
if (editBox) {
|
||
// 设置 placeholder 提示
|
||
editBox.placeholder = `(${answerLength}个字)`;
|
||
|
||
// 设置最大长度为答案长度
|
||
editBox.maxLength = answerLength;
|
||
|
||
// 清空输入内容
|
||
editBox.string = '';
|
||
|
||
// 监听事件
|
||
editBox.node.on(EditBox.EventType.TEXT_CHANGED, this.onInputTextChanged, this);
|
||
editBox.node.on(EditBox.EventType.EDITING_DID_ENDED, this.onInputEditingEnded, this);
|
||
}
|
||
|
||
// 动态调整输入框宽度
|
||
const uitransform = inputNode.getComponent(UITransform);
|
||
let inputWidth = 200;
|
||
if (uitransform) {
|
||
// 每个字符约 60px，加上 padding
|
||
inputWidth = Math.min(600, Math.max(200, answerLength * 60 + 40));
|
||
uitransform.setContentSize(inputWidth, 100);
|
||
}
|
||
|
||
// 调整下划线宽度与输入框一致
|
||
const underLine = inputNode.getChildByName('UnderLine');
|
||
if (underLine) {
|
||
const underLineTransform = underLine.getComponent(UITransform);
|
||
if (underLineTransform) {
|
||
underLineTransform.setContentSize(inputWidth, underLineTransform.height);
|
||
}
|
||
}
|
||
|
||
this.inputLayout.addChild(inputNode);
|
||
this._inputNodes.push(inputNode);
|
||
|
||
console.log(`[PageLevel] 创建单个输入框，答案长度: ${answerLength}`);
|
||
}
|
||
|
||
/**
|
||
* 清理所有输入框节点
|
||
*/
|
||
private clearInputNodes(): void {
|
||
for (const node of this._inputNodes) {
|
||
if (node.isValid) {
|
||
node.destroy();
|
||
}
|
||
}
|
||
this._inputNodes = [];
|
||
}
|
||
|
||
/**
|
||
* 获取所有输入框的值
|
||
*/
|
||
getInputValues(): string[] {
|
||
if (this._inputNodes.length === 0) return [];
|
||
const editBox = this._inputNodes[0].getComponent(EditBox);
|
||
const str = (editBox?.string ?? '').trim();
|
||
return [str];
|
||
}
|
||
|
||
/**
|
||
* 获取拼接后的答案字符串
|
||
*/
|
||
getAnswer(): string {
|
||
if (this._inputNodes.length === 0) return '';
|
||
const editBox = this._inputNodes[0].getComponent(EditBox);
|
||
return (editBox?.string ?? '').trim();
|
||
}
|
||
|
||
// ========== EditBox 事件回调 ==========
|
||
|
||
/**
|
||
* 输入框文本变化回调
|
||
*/
|
||
private onInputTextChanged(_editBox: EditBox): void {
|
||
console.log('[PageLevel] 输入内容变化');
|
||
}
|
||
|
||
/**
|
||
* 输入框编辑结束回调
|
||
*/
|
||
private onInputEditingEnded(_editBox: EditBox): void {
|
||
console.log('[PageLevel] 输入编辑结束');
|
||
}
|
||
|
||
// ========== IconSetting 按钮相关 ==========
|
||
|
||
/**
|
||
* 初始化 IconSetting 按钮事件
|
||
*/
|
||
private initIconSetting(): void {
|
||
if (!this.iconSetting) {
|
||
console.warn('[PageLevel] iconSetting 节点未设置');
|
||
return;
|
||
}
|
||
|
||
const button = this.iconSetting.getComponent(Button);
|
||
if (!button) {
|
||
console.warn('[PageLevel] iconSetting 节点缺少 Button 组件');
|
||
return;
|
||
}
|
||
|
||
this.iconSetting.on(Node.EventType.TOUCH_END, this.onIconSettingClick, this);
|
||
console.log('[PageLevel] IconSetting 按钮事件已绑定');
|
||
}
|
||
|
||
/**
|
||
* IconSetting 按钮点击回调
|
||
*/
|
||
private onIconSettingClick(): void {
|
||
console.log('[PageLevel] IconSetting 点击，返回主页');
|
||
this.playClickSound();
|
||
ViewManager.instance.back();
|
||
}
|
||
|
||
// ========== 线索相关方法 ==========
|
||
|
||
/**
|
||
* 获取线索节点
|
||
*/
|
||
private getTipsItem(index: number): Node | null {
|
||
switch (index) {
|
||
case 1: return this.tipsItem1;
|
||
case 2: return this.tipsItem2;
|
||
case 3: return this.tipsItem3;
|
||
default: return null;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 设置线索内容
|
||
*/
|
||
private setClue(index: number, content: string): void {
|
||
const tipsItem = this.getTipsItem(index);
|
||
if (!tipsItem) return;
|
||
|
||
// 查找 TipsLabel 节点：Content -> TipsLabel
|
||
const contentNode = tipsItem.getChildByName('Content');
|
||
if (!contentNode) return;
|
||
|
||
const tipsLabelNode = contentNode.getChildByName('TipsLabel');
|
||
if (!tipsLabelNode) return;
|
||
|
||
const label = tipsLabelNode.getComponent(Label);
|
||
if (label) {
|
||
label.string = `提示 ${index}: ${content}`;
|
||
console.log(`[PageLevel] 设置线索${index}: ${content}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示线索
|
||
*/
|
||
private showClue(index: number): void {
|
||
const tipsItem = this.getTipsItem(index);
|
||
if (tipsItem) {
|
||
tipsItem.active = true;
|
||
console.log(`[PageLevel] 显示线索${index}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 隐藏线索
|
||
*/
|
||
private hideClue(index: number): void {
|
||
const tipsItem = this.getTipsItem(index);
|
||
if (tipsItem) {
|
||
tipsItem.active = false;
|
||
console.log(`[PageLevel] 隐藏线索${index}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示解锁按钮
|
||
*/
|
||
private showUnlockButton(index: number): void {
|
||
const unlockItem = index === 2 ? this.unLockItem2 : this.unLockItem3;
|
||
if (unlockItem) {
|
||
unlockItem.active = true;
|
||
console.log(`[PageLevel] 显示解锁按钮${index}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 隐藏解锁按钮
|
||
*/
|
||
private hideUnlockButton(index: number): void {
|
||
const unlockItem = index === 2 ? this.unLockItem2 : this.unLockItem3;
|
||
if (unlockItem) {
|
||
unlockItem.active = false;
|
||
console.log(`[PageLevel] 隐藏解锁按钮${index}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 初始化解锁按钮事件
|
||
*/
|
||
private initUnlockButtons(): void {
|
||
// 解锁按钮2
|
||
if (this.unLockItem2) {
|
||
this.unLockItem2.on(Node.EventType.TOUCH_END, () => this.onUnlockClue(2), this);
|
||
}
|
||
|
||
// 解锁按钮3
|
||
if (this.unLockItem3) {
|
||
this.unLockItem3.on(Node.EventType.TOUCH_END, () => this.onUnlockClue(3), this);
|
||
}
|
||
|
||
console.log('[PageLevel] 解锁按钮事件已绑定');
|
||
}
|
||
|
||
/**
|
||
* 初始化提交按钮事件
|
||
*/
|
||
private initSubmitButton(): void {
|
||
if (!this.submitButton) {
|
||
console.warn('[PageLevel] submitButton 节点未设置');
|
||
return;
|
||
}
|
||
|
||
this.submitButton.on(Node.EventType.TOUCH_END, this.onSubmitAnswer, this);
|
||
console.log('[PageLevel] 提交按钮事件已绑定');
|
||
}
|
||
|
||
/**
|
||
* 点击解锁线索
|
||
*/
|
||
private onUnlockClue(index: number): void {
|
||
// 检查生命值是否足够
|
||
if (!this.hasLives()) {
|
||
console.warn('[PageLevel] 生命值不足，无法解锁线索');
|
||
return;
|
||
}
|
||
|
||
// 消耗一颗生命值
|
||
if (!this.consumeLife()) {
|
||
return;
|
||
}
|
||
|
||
// 播放点击音效
|
||
this.playClickSound();
|
||
|
||
// 隐藏解锁按钮
|
||
this.hideUnlockButton(index);
|
||
|
||
// 显示线索
|
||
this.showClue(index);
|
||
|
||
// 设置线索内容
|
||
if (this._currentConfig) {
|
||
const clueContent = index === 2 ? this._currentConfig.clue2 : this._currentConfig.clue3;
|
||
this.setClue(index, clueContent);
|
||
}
|
||
|
||
console.log(`[PageLevel] 解锁线索${index}`);
|
||
}
|
||
|
||
// ========== 主图相关方法 ==========
|
||
|
||
/**
|
||
* 设置主图
|
||
*/
|
||
private setMainImage(spriteFrame: SpriteFrame | null): void {
|
||
if (!this.mainImage) return;
|
||
|
||
const sprite = this.mainImage.getComponent(Sprite);
|
||
if (sprite && spriteFrame) {
|
||
sprite.spriteFrame = spriteFrame;
|
||
console.log('[PageLevel] 设置主图');
|
||
}
|
||
}
|
||
|
||
// ========== 音效相关方法 ==========
|
||
|
||
/**
|
||
* 播放音效（通用方法）
|
||
*/
|
||
private playSound(clip: AudioClip | null): void {
|
||
if (!clip) return;
|
||
const audioSource = this.node.getComponent(AudioSource);
|
||
audioSource?.playOneShot(clip);
|
||
}
|
||
|
||
/**
|
||
* 播放点击音效
|
||
*/
|
||
private playClickSound(): void {
|
||
this.playSound(this.clickAudio);
|
||
}
|
||
|
||
/**
|
||
* 播放成功音效
|
||
*/
|
||
private playSuccessSound(): void {
|
||
this.playSound(this.successAudio);
|
||
}
|
||
|
||
/**
|
||
* 播放失败音效
|
||
*/
|
||
private playFailSound(): void {
|
||
this.playSound(this.failAudio);
|
||
}
|
||
|
||
// ========== 倒计时相关方法 ==========
|
||
|
||
/**
|
||
* 开始倒计时
|
||
*/
|
||
private startCountdown(): void {
|
||
this._countdown = 60;
|
||
this._isTimeUp = false;
|
||
this.updateClockLabel();
|
||
this.schedule(this.onCountdownTick, 1);
|
||
console.log('[PageLevel] 开始倒计时 60 秒');
|
||
}
|
||
|
||
/**
|
||
* 停止倒计时
|
||
*/
|
||
private stopCountdown(): void {
|
||
this.unschedule(this.onCountdownTick);
|
||
}
|
||
|
||
/**
|
||
* 倒计时每秒回调
|
||
*/
|
||
private onCountdownTick(): void {
|
||
if (this._isTimeUp) return;
|
||
|
||
this._countdown--;
|
||
this.updateClockLabel();
|
||
|
||
if (this._countdown <= 0) {
|
||
this._isTimeUp = true;
|
||
this.stopCountdown();
|
||
this.onTimeUp();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新倒计时显示
|
||
*/
|
||
private updateClockLabel(): void {
|
||
if (this.clockLabel) {
|
||
this.clockLabel.string = `${this._countdown}s`;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 倒计时结束
|
||
*/
|
||
private onTimeUp(): void {
|
||
console.log('[PageLevel] 倒计时结束！');
|
||
this.playFailSound();
|
||
// 可以在这里添加游戏结束逻辑
|
||
}
|
||
|
||
// ========== 生命值相关方法 ==========
|
||
|
||
/**
|
||
* 更新生命值显示
|
||
*/
|
||
private updateLiveLabel(): void {
|
||
if (this.liveLabel) {
|
||
const lives = StorageManager.getLives();
|
||
this.liveLabel.string = `x ${lives}`;
|
||
console.log(`[PageLevel] 更新生命值显示: ${lives}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 消耗一颗生命值（用于查看提示）
|
||
* @returns 是否消耗成功
|
||
*/
|
||
private consumeLife(): boolean {
|
||
const success = StorageManager.consumeLife();
|
||
if (success) {
|
||
this.updateLiveLabel();
|
||
console.log('[PageLevel] 消耗一颗生命');
|
||
} else {
|
||
console.warn('[PageLevel] 生命值不足，无法消耗');
|
||
}
|
||
return success;
|
||
}
|
||
|
||
/**
|
||
* 增加一颗生命值（用于通关奖励）
|
||
*/
|
||
private addLife(): void {
|
||
StorageManager.addLife();
|
||
this.updateLiveLabel();
|
||
console.log('[PageLevel] 获得一颗生命');
|
||
}
|
||
|
||
/**
|
||
* 检查是否有足够的生命值
|
||
*/
|
||
private hasLives(): boolean {
|
||
return StorageManager.hasLives();
|
||
}
|
||
|
||
// ========== 答案提交与关卡切换 ==========
|
||
|
||
/**
|
||
* 提交答案
|
||
*/
|
||
onSubmitAnswer(): void {
|
||
if (!this._currentConfig) return;
|
||
if (this._isTransitioning) return;
|
||
|
||
const userAnswer = this.getAnswer();
|
||
console.log(`[PageLevel] 提交答案: ${userAnswer}, 正确答案: ${this._currentConfig.answer}`);
|
||
|
||
if (userAnswer === this._currentConfig.answer) {
|
||
// 答案正确
|
||
this.playClickSound();
|
||
this.showSuccess();
|
||
} else {
|
||
// 答案错误
|
||
this.showError();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示成功提示
|
||
*/
|
||
private showSuccess(): void {
|
||
console.log('[PageLevel] 答案正确！');
|
||
|
||
// 标记正在切换关卡，防止重复提交
|
||
this._isTransitioning = true;
|
||
|
||
// 停止倒计时
|
||
this.stopCountdown();
|
||
|
||
// 播放成功音效
|
||
this.playSuccessSound();
|
||
|
||
// 通关奖励：增加一颗生命值
|
||
this.addLife();
|
||
|
||
// 延迟后进入下一关
|
||
this.scheduleOnce(() => {
|
||
this.nextLevel();
|
||
}, 1.0);
|
||
}
|
||
|
||
/**
|
||
* 显示错误提示
|
||
*/
|
||
private showError(): void {
|
||
console.log('[PageLevel] 答案错误！');
|
||
|
||
// 播放失败音效
|
||
this.playFailSound();
|
||
|
||
// 触发手机震动
|
||
WxSDK.vibrateLong();
|
||
|
||
// 显示 Toast 提示
|
||
ToastManager.show('答案错误，再试试吧！');
|
||
}
|
||
|
||
/**
|
||
* 进入下一关
|
||
*/
|
||
private async nextLevel(): Promise<void> {
|
||
// 保存当前关卡进度
|
||
StorageManager.onLevelCompleted(this.currentLevelIndex);
|
||
|
||
this.currentLevelIndex++;
|
||
|
||
// 检查是否还有关卡
|
||
const totalLevels = LevelDataManager.instance.getLevelCount();
|
||
|
||
if (this.currentLevelIndex >= totalLevels) {
|
||
// 所有关卡完成
|
||
console.log('[PageLevel] 恭喜通关！');
|
||
this.stopCountdown();
|
||
ViewManager.instance.back();
|
||
return;
|
||
}
|
||
|
||
// 重置并加载下一关，重新开始倒计时
|
||
await this.initLevel();
|
||
this.startCountdown();
|
||
console.log(`[PageLevel] 进入关卡 ${this.currentLevelIndex + 1}`);
|
||
}
|
||
}
|
||
|
||
|