# 调整显示方式，同时保持游戏模型稳定

> 使游戏表面适应其容器，而不将模拟状态与屏幕尺寸联系起来，并在不断变化的视口中测试布局。

- URL: https://oneshotgems.ai/zh-Hans/topics/responsive-game-layouts
- 类别: 游戏开发者指南
- 类型: 指南
- 更新日期: 2026年10月5日

手机旋转、浏览器栏出现或面板打开时，浏览器游戏所在页面的尺寸可能会变化。请将游戏的模拟坐标与画布的显示尺寸分开。这样视口变化时，布局可以随之调整，而不会意外改变物体位置、物理状态或命中测试。

## 测量容器并选择秤

使用游戏容器的尺寸，而不是假设窗口是可玩区域。 ResizeObserver 可以报告该元素何时发生变化，包括由周围布局而不是视口调整大小引起的变化。决定游戏是否应该以窄长宽比进行信箱、裁剪或重排，并使选择可见，而不是将圆形拉伸成椭圆形。

对于固定的虚拟游戏场，计算一个适合其宽度和高度的比例因子，然后将剩余空间居中。在命中测试之前通过相同变换的逆转换指针坐标。对于回流游戏，一起更新布局锚点和碰撞形状，以便控件不会继续使用以前大小的位置。

## 保持在模拟循环之外调整大小

以稳定的单位存储游戏世界，并将画布背景分辨率、CSS 大小和设备像素比视为渲染问题。当尺寸改变时，更新绘图表面并重新绘制；除非游戏规则要求，否则不要重置关卡或重新计算对象状态。这种分离可以防止工具栏调整大小看起来像重新启动。

在游戏运行时测试窄视口和宽视口、桌面大小调整和方向变化。检查文本换行、触摸目标位置和坐标转换。 MDN 的 ResizeObserver 指南解释了观察元素尺寸，并警告更改回调内观察到的大小可能会产生循环。

## 常见问题

**当画布大小改变时，我应该调整游戏世界的大小吗？** 通常保持模拟坐标稳定并调整演示或布局。如果设计有意更改游戏场地，请一起更新其规则、对象和输入映射。

**为什么使用 ResizeObserver 而不是仅调整窗口大小？** 游戏容器可以由于周围布局而改变大小，而无需调整窗口大小。 ResizeObserver 直接报告元素尺寸变化。

## 跟随好奇心探索

- [处理浏览器游戏中的屏幕方向变化](https://oneshotgems.ai/zh-Hans/topics/game-orientation-changes): 当设备旋转时，通过重新计算布局和输入映射来保持游戏的可读性，而不将方向视为游戏重新启动。
- [浏览器游戏的触摸目标大小](https://oneshotgems.ai/zh-Hans/topics/game-touch-targets): 通过将视觉艺术作品与交互边界分开并检查触摸设备上的大小、间距和重叠，使游戏控件更容易点击。
- [将画布上的指针位置映射到游戏坐标](https://oneshotgems.ai/zh-Hans/topics/hit-testing-canvas-coordinates): 将指针位置转换为游戏世界坐标，以便可见目标和可点击的点击区域在缩放后保持对齐。

## 延伸阅读

- [MDN：调整大小观察者](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [MDN：纵横比](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio)

---
规范页面: https://oneshotgems.ai/zh-Hans/topics/responsive-game-layouts