一、Facebook即时游戏的正确适配尺寸 #

Facebook即时游戏的容器尺寸是动态变化的——它会根据用户的设备（移动端/桌面端）、浏览器窗口大小自动调整可用空间，所以不能固定死一个静态尺寸（比如你用的640x480）。正确的做法是：

• 优先以Facebook提供的容器宽高作为游戏基础尺寸，或者设置游戏为响应式，适配容器的实际大小
• 对于Phaser 2 CE，建议使用基于容器的动态初始化，或者通过缩放模式让游戏自动适配可用空间

二、解决图片不居中、内容遮挡的问题 #

你的代码里固定了游戏宽高，却没配置缩放与居中逻辑，导致在不同设备上显示错位。下面是修改后的完整代码，我会逐点解释关键调整：

// 以基础尺寸初始化，后续通过缩放适配容器
var game = new Phaser.Game(
    640,  // 基准宽度
    480,  // 基准高度
    Phaser.AUTO, 
    'game', 
    { preload: preload, create: create, update: update }
); 
var sprite;

function preload () {
    this.load.image('dude', 'assets/sprites/phaser-dude.png');
}

function create() {
    // 配置缩放与居中核心逻辑
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // 保持比例完整显示内容，无拉伸
    // 若需要填满容器可改用Phaser.ScaleManager.FIT（可能裁剪边缘，按需选择）
    game.scale.pageAlignHorizontally = true; // 游戏容器水平居中
    game.scale.pageAlignVertically = true; // 游戏容器垂直居中
    game.scale.refresh(); // 立即应用缩放配置

    // 创建精灵并真正居中
    sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'dude');
    sprite.anchor.setTo(0.5, 0.5); // 关键！将精灵锚点设为中心，否则会以左上角为基准对齐
    sprite.inputEnabled = true;
    sprite.events.onInputDown.add(myHandler, this);
}

function myHandler() {
    sprite.x += 10;
}

function update() { }

关键修改点说明： #

1. 缩放模式配置：SHOW_ALL模式能保证游戏内容按原始比例完整展示，不会出现拉伸变形；如果需要让游戏填满容器，可切换为FIT模式（注意可能会裁剪边缘）
2. 页面居中设置：开启水平和垂直居中后，游戏容器会自动对齐到页面可视区域的中心，避免内容偏移
3. 精灵锚点调整：Phaser默认以精灵的左上角为锚点，所以你之前用game.world.centerX/Y时，只是把精灵左上角放在了世界中心，看起来像是没居中。设置锚点为中心后，精灵的正中心才会和世界中心对齐

进阶优化（贴合Facebook即时游戏特性） #

如果要完全适配Facebook的动态容器，可以在初始化前获取容器的实际尺寸：

// 获取游戏容器的实时宽高
var container = document.getElementById('game');
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;

// 用容器尺寸直接初始化游戏
var game = new Phaser.Game(
    containerWidth, 
    containerHeight, 
    Phaser.AUTO, 
    'game', 
    { preload: preload, create: create, update: update }
);

这样游戏会直接适配Facebook提供的容器大小，从根源上避免遮挡或留白问题。

内容的提问来源于stack exchange，提问作者albator2018