import { Application } from 'pixi.js';

const app = new Application();
await app.init({
  width: 1024,                    // 画布宽度（像素）
  height: 768,                    // 画布高度（像素）
  backgroundColor: 0x1a1a2e,     // 背景色（十六进制）
  antialias: true,                // 抗锯齿
  resolution: 2,                  // 分辨率倍数（像素比）
  autoDensity: true,              // 自动适配 CSS 尺寸
  hello: true,                    // 控制台输出 WebGL 信息
});

import { Application, Sprite, Graphics, Text, TextStyle } from 'pixi.js';

const app = new Application();
await app.init({ width: 800, height: 600, background: '#1099bb' });
document.body.appendChild(app.canvas);

// 创建各种显示对象
const rect = new Graphics();
rect.rect(0, 0, 120, 80);
rect.fill(0xff6b6b);
rect.position.set(100, 100);

const label = new Text({
  text: 'Hello Pixi!',
  style: new TextStyle({ fontSize: 24, fill: '#ffffff' }),
});
label.position.set(100, 200);

// 添加到 stage
app.stage.addChild(rect);
app.stage.addChild(label);

// stage 本身也是一个 Container
console.log(app.stage.children.length); // 2

// 基本用法
app.ticker.add((ticker) => {
  const delta = ticker.deltaTime; // 帧间隔（归一化，60fps 时约为 1）
  const elapsedMS = ticker.deltaMS; // 帧间隔（毫秒）

  // 更新逻辑
  sprite.rotation += 0.01 * delta;
});

// 添加回调 —— 返回唯一 ID
const callbackId = app.ticker.add(() => {
  console.log('每帧执行');
});

// 通过对象添加
const myUpdater = {
  update(ticker: Ticker) {
    // 自定义更新逻辑
  }
};
app.ticker.add(myUpdater);

// 移除回调
app.ticker.remove(myUpdater);

// 暂停/恢复
app.ticker.stop();
app.ticker.start();

// 设置最大帧率
app.ticker.maxFPS = 30;

// ✅ 正确 —— 帧率无关
sprite.x += 200 * delta / 60;

// ❌ 错误 —— 60fps 时速度正常，30fps 时慢一半
sprite.x += 200 / 60;

// 获取 canvas 元素
const canvas = app.canvas;

// 添加到 DOM
document.body.appendChild(canvas);

// 或添加到指定容器
document.getElementById('game-container')!.appendChild(canvas);

// 设置样式
canvas.style.cursor = 'pointer';
canvas.style.border = '2px solid #333';

// 获取容器尺寸
const container = document.getElementById('game-container')!;

const app = new Application();
await app.init({
  resizeTo: container, // 自动监听容器尺寸变化
  backgroundColor: 0x1a1a2e,
  antialias: true,
  resolution: window.devicePixelRatio || 1,
  autoDensity: true,
});
container.appendChild(app.canvas);

// 监听窗口大小变化
window.addEventListener('resize', () => {
  app.renderer.resize(window.innerWidth, window.innerHeight);
  // 同时更新游戏逻辑中的宽高引用
  layoutGameObjects();
});

function resize(app: Application) {
  const screenW = app.screen.width;
  const screenH = app.screen.height;
  const gameW = 800;  // 设计宽度
  const gameH = 600;  // 设计高度

  // 等比缩放适配（保持宽高比，可能有黑边）
  const scale = Math.min(screenW / gameW, screenH / gameH);
  app.stage.scale.set(scale);

  // 居中
  app.stage.x = (screenW - gameW * scale) / 2;
  app.stage.y = (screenH - gameH * scale) / 2;
}

app.renderer.on('resize', () => resize(app));
resize(app);

const renderer = app.renderer;

// 手动渲染（通常不需要）
renderer.render(app.stage);

// 获取屏幕信息
console.log(renderer.width);     // 渲染宽度（像素）
console.log(renderer.height);    // 渲染高度（像素）
console.log(renderer.resolution); // 分辨率倍数

// 导出 canvas 为图片
const image = app.canvas.toDataURL('image/png');

// 截取指定区域
const extract = app.renderer.extract;
const imageElement = extract.image(app.stage);

// 完全销毁（包括 canvas）
app.destroy(true);

// 仅销毁内部资源，保留 canvas
app.destroy();

/* 全屏画布 */
body {
  margin: 0;
  overflow: hidden;
}
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

/* 容器内画布 */
#game-container {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

import { Application, Graphics, Text, TextStyle } from 'pixi.js';

class Game {
  app: Application;
  player!: Graphics;
  score: number = 0;
  scoreText!: Text;

  constructor() {
    this.app = new Application();
  }

  async start() {
    await this.app.init({
      width: 800,
      height: 600,
      backgroundColor: 0x2c3e50,
      antialias: true,
      resolution: window.devicePixelRatio || 1,
      autoDensity: true,
    });

    document.body.appendChild(this.app.canvas);

    this.createUI();
    this.createPlayer();

    // 主游戏循环
    this.app.ticker.add((ticker) => this.update(ticker.deltaTime));
  }

  createUI() {
    this.scoreText = new Text({
      text: 'Score: 0',
      style: new TextStyle({
        fontSize: 28,
        fill: '#ecf0f1',
        fontWeight: 'bold',
      }),
    });
    this.scoreText.position.set(20, 20);
    this.app.stage.addChild(this.scoreText);
  }

  createPlayer() {
    this.player = new Graphics();
    this.player.rect(0, 0, 40, 40);
    this.player.fill(0xe74c3c);
    this.player.position.set(400, 300);
    this.player.pivot.set(20, 20);
    this.app.stage.addChild(this.player);
  }

  update(delta: number) {
    this.player.rotation += 0.03 * delta;
    this.score += delta;
    this.scoreText.text = `Score: ${Math.floor(this.score)}`;
  }
}

// 启动游戏
const game = new Game();
game.start();