@playcraft/cli 0.0.53 → 0.0.56

package/project-templates/playable-template-phaser/src/scenes/MainScene.ts

@@ -0,0 +1,301 @@
+import * as Phaser from 'phaser';
+import { sdk } from '@playcraft/adsdk';
+import { AudioManager } from '../managers/AudioManager';
+import { GameThemeConfig } from '../config/ThemeConfig';
+// 导入 UI 组件
+import { BrainAgeUI } from '../ui/BrainAgeUI';
+import { CountdownUI } from '../ui/CountdownUI';
+import { ScoreUI } from '../ui/ScoreUI';
+import { SuccessUI } from '../ui/SuccessUI';
+import { PlayButton } from '../ui/PlayButton';
+// 导入大脑图片资源
+import brainIcon from 'assets/brain.png';
+import warnBrainIcon from 'assets/warn_brain.png';
+
+/**
+ * 主游戏场景
+ * 
+ * 负责：
+ * - 游戏主要逻辑
+ * - UI 交互
+ * - 应用主题配置
+ * 
+ * ========================================
+ * 以下为 UI 组件使用示例，请根据实际需求裁剪
+ * ========================================
+ */
+export class MainScene extends Phaser.Scene {
+  private installButton!: Phaser.GameObjects.Container;
+  public audioManager!: AudioManager;
+
+  // --- UI 组件实例（按需选用） ---
+  private brainAgeUI?: BrainAgeUI;
+  private countdownUI?: CountdownUI;
+  private scoreUI?: ScoreUI;
+  private isGameOver: boolean = false;
+  // 匹配成功次数（用于进度追踪）
+  private matchCount: number = 0;
+  // 目标匹配次数（进度到 100% 所需次数）
+  private readonly totalMatchCount: number = 2;
+  
+  // 挑战是否已开始（用于标记首次交互）
+  private challengeStarted: boolean = false;
+  
+  // 演示定时器
+  private demoTimer?: number;
+
+  constructor() {
+    super({ key: 'MainScene' });
+  }
+
+  create() {
+    // 应用主题背景色
+    this.cameras.main.setBackgroundColor(GameThemeConfig.BACKGROUND_COLOR);
+    
+    // 初始化 AudioManager
+    this.audioManager = new AudioManager({
+      bgmVolume: 0.5,
+      effectVolume: 0.6,
+      enableBackgroundPause: true,
+      watchdogInterval: 500
+    });
+    this.audioManager.init(this);
+
+    // ========================================
+    // 示例 1：ScoreUI — 积分显示
+    // 注意：ScoreUI 已改为纯 DOM 实现
+    // ========================================
+    this.scoreUI = new ScoreUI(40, 15, 0); // x, y, 初始分数
+    
+    // 启动演示定时器：每秒 +10 分
+    this.demoTimer = window.setInterval(() => {
+      this.scoreUI?.add(10);
+    }, 1000);
+
+    // ========================================
+    // 示例 2：CountdownUI — LED 数码管倒计时（自动开始）
+    // 注意：CountdownUI 已改为纯 DOM 实现，创建后自动倒计时
+    // 参数：x坐标, y坐标, 配置对象
+    // 传入 window.innerWidth / 2 实现水平居中
+    // ========================================
+    this.countdownUI = new CountdownUI(window.innerWidth / 2, 40, {
+      initialSeconds: 30,
+      warnTime: 10,
+      onGameOver: () => this.onGameOver('countdown'),
+    });
+
+    // ========================================
+    // 示例 3：BrainAgeUI — 脑龄面板（自动开始）
+    // 注意：BrainAgeUI 已改为纯 DOM 实现，创建后自动计时
+    // 使用从 assets 导入的图片资源
+    // ========================================
+    this.brainAgeUI = new BrainAgeUI(30, 80, brainIcon, {
+      scale: 0.65,
+    }, {
+      initial: 60, max: 100, warningAge: 90,
+      iconUrl: brainIcon,        // 正常状态图片（从 assets 导入）
+      warnIconUrl: warnBrainIcon, // 警告状态图片（从 assets 导入）
+      onGameOver: () => this.onGameOver('brainAge'),
+    });
+
+    // ========================================
+    // Install 按钮（模板自带）
+    // ========================================
+    this.installButton = this.add.container(this.cameras.main.centerX, this.cameras.main.centerY);
+    const animationContainer = this.add.container(0, 0);
+    this.installButton.add(animationContainer);
+    const buttonBackground = this.add.image(0, 0, 'button');
+    buttonBackground.setScale(0.35);
+    const installText = this.add
+      .text(0, 0, 'Install', {
+        fontFamily: 'cursive',
+        fontSize: GameThemeConfig.FONT_SIZE_BUTTON,
+        color: GameThemeConfig.TEXT_COLOR,
+        fontStyle: 'bold'
+      })
+      .setOrigin(0.5);
+    installText.setShadow(4, 4, '#fffc6a', 9, true, true);
+    animationContainer.add([buttonBackground, installText]);
+    this.tweens.add({
+      targets: animationContainer,
+      scaleX: 1.1,
+      scaleY: 1.1,
+      duration: 800,
+      yoyo: true,
+      repeat: -1,
+      ease: 'Sine.easeInOut'
+    });
+    buttonBackground.setInteractive({ useHandCursor: true });
+    buttonBackground.on('pointerdown', () => {
+      // 首次点击时标记挑战开始
+      if (!this.challengeStarted) {
+        this.challengeStarted = true;
+        sdk.playcraftChallengeStart();
+      }
+      sdk.playcraftInstall();
+    });
+    // 全部加载完成，触发页面可以交互
+    sdk.playcraftInteractive();
+    
+    // ========================================
+    // 调试按钮：手动触发埋点事件
+    // ========================================
+    this.createDebugButtons();
+  }
+
+  /**
+   * 匹配成功时调用（示例）
+   */
+  onMatchSuccess(): void {
+    // 首次交互时标记挑战开始
+    if (!this.challengeStarted) {
+      this.challengeStarted = true;
+      sdk.playcraftChallengeStart();
+    }
+    
+    this.scoreUI?.add(5);
+    this.brainAgeUI?.onMatchSuccess();
+    this.matchCount++;
+    const percent = Math.min(100, Math.floor((this.matchCount / this.totalMatchCount) * 100));
+    sdk.recordPlaycraftChallengeProgress(percent);
+  }
+
+  /**
+   * 创建调试按钮（开发测试用）
+   */
+  private createDebugButtons(): void {
+    const buttonWidth = 140;
+    const buttonHeight = 50;
+    const buttonSpacing = 10;
+    const startX = 20;
+    // 使用 cameras.main.height 获取相机高度
+    const startY = this.cameras.main.height - 180;
+
+    console.log('[调试按钮] 创建调试按钮，屏幕高度:', this.cameras.main.height);
+
+    // 按钮配置
+    const buttons = [
+      {
+        text: '挑战开始',
+        color: 0x9C27B0,
+        hoverColor: 0xAB47BC,
+        onClick: () => {
+          if (!this.challengeStarted) {
+            this.challengeStarted = true;
+            sdk.playcraftChallengeStart();
+            console.log('[调试] 手动触发挑战开始');
+          } else {
+            console.log('[调试] 挑战已经开始过了');
+          }
+        }
+      },
+      {
+        text: '匹配成功',
+        color: 0x4CAF50,
+        hoverColor: 0x66BB6A,
+        onClick: () => this.onMatchSuccess()
+      },
+      {
+        text: '发送成功',
+        color: 0x2196F3,
+        hoverColor: 0x42A5F5,
+        onClick: () => sdk.playcraftRecordSuccess()
+      },
+      {
+        text: '发送失败',
+        color: 0xF44336,
+        hoverColor: 0xEF5350,
+        onClick: () => sdk.playcraftRecordFailed()
+      }
+    ];
+
+    buttons.forEach((config, index) => {
+      const y = startY + index * (buttonHeight + buttonSpacing);
+      
+      // 创建按钮背景（直接创建，不使用 container）
+      const background = this.add.rectangle(startX + buttonWidth / 2, y + buttonHeight / 2, buttonWidth, buttonHeight, config.color, 0.9);
+      background.setStrokeStyle(2, 0xffffff, 0.8);
+      background.setDepth(1000); // 设置高层级，确保在最上层
+      
+      // 创建按钮文字
+      const text = this.add.text(startX + buttonWidth / 2, y + buttonHeight / 2, config.text, {
+        fontFamily: 'Arial',
+        fontSize: '16px',
+        color: '#ffffff',
+        fontStyle: 'bold'
+      }).setOrigin(0.5);
+      text.setDepth(1001); // 文字层级比背景高
+      
+      // 添加交互
+      background.setInteractive({ useHandCursor: true });
+      
+      background.on('pointerover', () => {
+        background.setFillStyle(config.hoverColor, 0.9);
+        background.setScale(1.05);
+        text.setScale(1.05);
+      });
+      
+      background.on('pointerout', () => {
+        background.setFillStyle(config.color, 0.9);
+        background.setScale(1);
+        text.setScale(1);
+      });
+      
+      background.on('pointerdown', () => {
+        background.setScale(0.95);
+        text.setScale(0.95);
+      });
+      
+      background.on('pointerup', () => {
+        background.setScale(1.05);
+        text.setScale(1.05);
+        config.onClick();
+        console.log(`[调试按钮] ${config.text} 被点击`);
+      });
+
+      console.log(`[调试按钮] 创建按钮 "${config.text}"，位置: (${startX + buttonWidth / 2}, ${y + buttonHeight / 2})`);
+    });
+  }
+
+  /**
+   * 游戏通关时调用（示例）
+   */
+  onGameWin(): void {
+    new SuccessUI(this).show();
+  }
+
+  /**
+   * 游戏结束处理（示例）
+   */
+  onGameOver(reason: 'countdown' | 'brainAge'): void {
+    if (this.isGameOver) return;
+    this.isGameOver = true;
+
+    if (reason === 'countdown') {
+      this.countdownUI?.showGameOver();
+    } else {
+      this.brainAgeUI?.showGameOver();
+    }
+
+    new PlayButton(this).show(
+      this.scale.width / 2,
+      this.scale.height / 2 + 60,
+      0.45,
+      302,
+    );
+  }
+
+  update() {
+    if (this.installButton) {
+      this.installButton.setPosition(this.cameras.main.centerX, this.cameras.main.centerY);
+    }
+  }
+  
+  shutdown() {
+    // 清理演示定时器
+    if (this.demoTimer) {
+      clearInterval(this.demoTimer);
+      this.demoTimer = undefined;
+    }
+  }
+}

package/project-templates/playable-template-phaser/src/scenes/PreloadScene.ts

@@ -0,0 +1,256 @@
+/**
+ * Preload 场景（原 Loading 场景）
+ * 显示 App Logo、名称、评分、描述和加载动画
+ * 支持横竖屏自适应
+ * 
+ * 负责预加载所有游戏资源，加载完成后启动 MainScene
+ */
+import * as Phaser from 'phaser';
+import { sdk } from '@playcraft/adsdk';
+import { LoadingConfig } from '../config/LoadingConfig';
+// 导入所有需要预加载的资源
+import buttonBg from 'assets/button.png';
+// UI 组件依赖的资源
+import interactImage from 'assets/interact.png';
+import brainIcon from 'assets/brain.png';
+import warnBrainIcon from 'assets/warn_brain.png';
+
+export class PreloadScene extends Phaser.Scene {
+  // UI 元素
+  private logoElement!: HTMLImageElement;
+  private loadingText!: Phaser.GameObjects.Text;
+  private gamepadIcon!: Phaser.GameObjects.Text;
+  
+  // 动画相关
+  private dotCount: number = 0;
+  private dotTimer!: Phaser.Time.TimerEvent;
+  
+  // 加载状态
+  private minTimeReached: boolean = false;
+  private resourcesLoaded: boolean = false;
+  private interactLoaded: boolean = false;
+
+  constructor() {
+    super({ key: 'PreloadScene' });
+  }
+
+  preload(): void {
+    // 在这里预加载所有游戏资源
+    this.load.image('button', buttonBg);
+    // UI 组件依赖的资源
+    this.load.image('brain', brainIcon);
+    this.load.image('warn_brain', warnBrainIcon);
+    
+    // 监听加载完成事件
+    this.load.on('complete', () => {
+      console.log('Resources loaded');
+      this.resourcesLoaded = true;
+      this.tryStartGame();
+    });
+
+    // 手动加载 interact 合图（通过 Image 对象，包含 playBtn、dangerTip 等帧）
+    const interactImg = new Image();
+    interactImg.onload = () => {
+      this.textures.addImage('interact', interactImg);
+      const tex = this.textures.get('interact');
+      // 定义合图帧区域（x, y, width, height）
+      tex.add('successBg', 0, 20, 13, 650, 440);
+      tex.add('playBtn', 0, 710, 278, 685, 200);
+      tex.add('failBg', 0, 20, 504, 650, 480);
+      tex.add('finger', 0, 1232, 588, 400, 400);
+      tex.add('aperture', 0, 1650, 850, 160, 160);
+      tex.add('dangerTip', 0, 700, 480, 530, 530);
+      console.log('Interact atlas loaded');
+      this.interactLoaded = true;
+      this.tryStartGame();
+    };
+    interactImg.src = interactImage;
+  }
+
+  create(): void {
+    this.createUI();
+    
+    // 最小显示时间计时器
+    this.time.delayedCall(LoadingConfig.SCENE_DURATION, () => {
+      console.log('Min time reached');
+      this.minTimeReached = true;
+      this.tryStartGame();
+    });
+  }
+
+  private createUI(): void {
+    const width = this.scale.width;
+    const height = this.scale.height;
+    const isLandscape = width > height;
+    const centerX = width / 2;
+
+    // 根据画布尺寸计算缩放比例（基于设计尺寸）
+    const baseWidth = isLandscape ? 667 : 375;
+    const baseHeight = isLandscape ? 375 : 667;
+    const scaleX = width / baseWidth;
+    const scaleY = height / baseHeight;
+    const scale = Math.min(scaleX, scaleY, 2); // 限制最大缩放
+
+    // 根据横竖屏获取基础布局配置，再乘以缩放比例
+    const logoSize = Math.round((isLandscape ? 80 : 120) * scale);
+    const titleFontSize = Math.round((isLandscape ? 24 : 32) * scale);
+    const starsFontSize = Math.round((isLandscape ? 18 : 24) * scale);
+    const descFontSize = Math.round((isLandscape ? 12 : 14) * scale);
+    const descMaxWidth = Math.round((isLandscape ? 300 : 280) * scale);
+    const iconFontSize = Math.round((isLandscape ? 18 : 24) * scale);
+    const loadingFontSize = Math.round((isLandscape ? 14 : 18) * scale);
+    const gap = Math.round((isLandscape ? 8 : 12) * scale);
+    
+    // 位置计算
+    const logoY = height * (isLandscape ? 0.35 : 0.28);
+    const titleY = logoY + logoSize / 2 + Math.round((isLandscape ? 15 : 25) * scale);
+    const starsY = titleY + Math.round((isLandscape ? 25 : 35) * scale);
+    const descY = starsY + Math.round((isLandscape ? 20 : 30) * scale);
+    const loadingY = height * (isLandscape ? 0.85 : 0.88);
+
+    // Logo - 使用 DOM 元素显示，避免 canvas 缩放锯齿
+    this.createDomLogo(centerX, logoY, logoSize);
+
+    // 标题
+    this.add.text(centerX, titleY, LoadingConfig.APP_TITLE, {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: `${titleFontSize}px`,
+      color: '#ffffff',
+      fontStyle: 'bold'
+    }).setOrigin(0.5);
+
+    // 五星评分
+    this.add.text(centerX, starsY, LoadingConfig.APP_STARS, {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: `${starsFontSize}px`,
+      color: '#ffc107'
+    }).setOrigin(0.5);
+
+    // 描述文字
+    this.add.text(centerX, descY, LoadingConfig.APP_DESC, {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: `${descFontSize}px`,
+      color: '#888888',
+      align: 'center',
+      wordWrap: { width: descMaxWidth }
+    }).setOrigin(0.5, 0);
+
+    // 游戏手柄图标 + Loading 文字（组合居中）
+    // 先创建文字获取宽度
+    this.loadingText = this.add.text(0, 0, `${LoadingConfig.LOADING_TEXT}...`, {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: `${loadingFontSize}px`,
+      color: '#888888'
+    });
+    
+    // 计算组合总宽度并居中
+    const textWidth = this.loadingText.width;
+    const iconWidth = iconFontSize;
+    const totalWidth = iconWidth + gap + textWidth;
+    const startX = centerX - totalWidth / 2;
+    
+    // 放置图标
+    this.gamepadIcon = this.add.text(startX + iconWidth / 2, loadingY, LoadingConfig.GAMEPAD_ICON, {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: `${iconFontSize}px`
+    }).setOrigin(0.5);
+    
+    // 添加跳跃动画
+    this.startBounceAnimation(loadingY, isLandscape, scale);
+    
+    // 放置文字（紧跟图标后面）
+    this.loadingText.setPosition(startX + iconWidth + gap, loadingY);
+    this.loadingText.setOrigin(0, 0.5);
+
+    // 启动点号动画
+    this.startDotAnimation();
+  }
+
+  // 尝试启动游戏（需要满足两个条件：资源加载完成 && 最小显示时间已到）
+  private tryStartGame(): void {
+    if (this.resourcesLoaded && this.minTimeReached && this.interactLoaded) {
+      console.log('All conditions met, starting MainScene');
+      // 移除 DOM logo 元素
+      this.removeDomLogo();
+      // 停止当前场景
+      this.scene.stop('PreloadScene');
+      // 启动主游戏场景
+      this.scene.start('MainScene');
+      // 通知 SDK 游戏开始
+      sdk.playcraftStart();
+    }
+  }
+
+  private startDotAnimation(): void {
+    this.dotTimer = this.time.addEvent({
+      delay: LoadingConfig.DOT_ANIM_DELAY,
+      callback: () => {
+        this.dotCount = (this.dotCount + 1) % 4;
+        const dots = '.'.repeat(this.dotCount);
+        this.loadingText.setText(LoadingConfig.LOADING_TEXT + dots);
+      },
+      loop: true
+    });
+  }
+
+  // 图标跳跃动画
+  private startBounceAnimation(baseY: number, isLandscape: boolean, scale: number): void {
+    const bounceHeight = Math.round((isLandscape ? LoadingConfig.BOUNCE_HEIGHT_LANDSCAPE : LoadingConfig.BOUNCE_HEIGHT_PORTRAIT) * scale);
+    
+    this.tweens.add({
+      targets: this.gamepadIcon,
+      y: baseY - bounceHeight,
+      duration: LoadingConfig.BOUNCE_DURATION,
+      ease: 'Quad.easeOut',
+      yoyo: true,
+      repeat: -1,
+      repeatDelay: LoadingConfig.BOUNCE_REPEAT_DELAY
+    });
+  }
+
+  shutdown(): void {
+    if (this.dotTimer) {
+      this.dotTimer.destroy();
+    }
+    this.removeDomLogo();
+  }
+
+  // 移除 DOM logo 元素
+  private removeDomLogo(): void {
+    if (this.logoElement && this.logoElement.parentNode) {
+      this.logoElement.parentNode.removeChild(this.logoElement);
+    }
+  }
+
+  // 创建 DOM logo 元素
+  private createDomLogo(centerX: number, centerY: number, size: number): void {
+    // 获取 canvas 元素和其在页面中的位置
+    const canvas = this.game.canvas;
+    const canvasRect = canvas.getBoundingClientRect();
+    
+    // 计算缩放比例（canvas 实际显示大小 vs 游戏内部尺寸）
+    const scaleX = canvasRect.width / this.scale.width;
+    const scaleY = canvasRect.height / this.scale.height;
+    
+    // 计算 logo 在页面中的实际位置和大小
+    const actualSize = size * scaleX;
+    const actualX = canvasRect.left + (centerX * scaleX) - (actualSize / 2);
+    const actualY = canvasRect.top + (centerY * scaleY) - (actualSize / 2);
+    
+    // 创建 img 元素
+    this.logoElement = document.createElement('img');
+    this.logoElement.src = LoadingConfig.LOGO_IMAGE;
+    this.logoElement.style.cssText = `
+      position: absolute;
+      left: ${actualX}px;
+      top: ${actualY}px;
+      width: ${actualSize}px;
+      height: ${actualSize}px;
+      border-radius: 15%;
+      pointer-events: none;
+      z-index: 1000;
+    `;
+    
+    document.body.appendChild(this.logoElement);
+  }
+}