如何设置小游戏横屏模式

设置小游戏横屏模式通常取决于你使用的平台（如网页、手机应用、游戏引擎等）。以下是几种常见场景下的设置方法，供你参考：

✅ 一、网页小游戏（HTML5 + Canvas 或 WebGL）

1. 使用 CSS 设置横屏

在 HTML 中添加以下 CSS 代码：

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  orientation: portrait; /* 默认竖屏 */
}

/* 旋转屏幕 */
@media (orientation: portrait) {
  body {
    transform: rotate(0deg);
  }
}

@media (orientation: landscape) {
  body {
    transform: rotate(90deg);
  }
}

2. 使用 JavaScript 旋转屏幕

如果你使用的是 Canvas 或 WebGL，可以通过 JavaScript 旋转画布：

function rotateCanvas() {
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;

  // 旋转 90 度
  ctx.translate(width / 2, height / 2);
  ctx.rotate(Math.PI / 2);
  ctx.translate(-width / 2, -height / 2);

  // 重绘
  ctx.clearRect(0, 0, width, height);
  // 画你的游戏内容
}

✅ 二、手机游戏（Unity、Unreal、Godot 等）

1. Unity

• 设置屏幕方向：

  • 在 Project 窗口中，右键 Screen -> Set Screen Orientation。
  • 选择 Landscape Left 或 Landscape Right。

• 代码控制：

  void OnApplicationQuit() {
      Screen.fullScreen = false;
  }

2. Godot

• 设置屏幕方向：
  • 在 Project 窗口中，选择 Screen -> Set Orientation。
  • 选择 Landscape Left 或 Landscape Right。

✅ 三、游戏引擎（如 Cocos2d、Phaser、Pixi.js）

1. Phaser.js

• 在 config.js 中设置：

  const config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    scene: {
      preload: preload,
      create: create,
      update: update
    },
    backgroundColor: 0x000000,
    scale: {
      mode: Phaser.Scale.LANDSCAPE,
      width: 800,
      height: 600
    }
  };

2. Cocos2d-x

• 在 project.json 中设置：

  {
    "scene": {
      "type": "Landscape",
      "width": 800,
      "height": 600
    }
  }

✅ 四、游戏开发框架（如 Unity、Unreal）

1. Unity

• 设置屏幕方向：
  • 在 Project 窗口中，右键 Screen -> Set Screen Orientation。
  • 选择 Landscape Left 或 Landscape Right。

✅ 五、通用方法（适用于所有平台）

1. 使用设备旋转

• 在代码中检测设备方向，动态调整游戏内容：

  window.addEventListener('orientationchange', function () {
    if (window.orientation === 90 || window.orientation === -90) {
      // 横屏
    } else {
      // 竖屏
    }
  });

✅ 小技巧

• 使用 window.orientation：可以检测设备方向，实现自动旋转。
• 使用 deviceOrientationEvent：在移动设备上实现更精确的旋转控制。
• 使用 orientation 属性：在 CSS 中设置 orientation: landscape，实现横屏。

如果你有具体的平台（如网页、Unity、Godot 等）或游戏类型（如 2D、3D），我可以提供更详细的设置方法。欢迎补充说明！