求助：Phaser脚本无法渲染自定义创建的地图

核心问题分析 #

1. 场景配置不匹配：游戏配置中scene字段指定了独立的preload/create/update函数，但实际实现的是gameScene类，两者不匹配导致Phaser无法执行地图渲染逻辑。
2. 场景名称不一致：添加场景时使用了mainScene，但场景类名为gameScene，名称错误导致启动的场景不存在，无法加载内容。
3. 全局变量冗余：全局的drawX/drawY可移至create方法内部，避免全局作用域污染。

修正后的完整代码 #

// map 变量在 map.js 中声明
class GameScene extends Phaser.Scene {
    constructor() {
        super('game');
    }

    preload() {
        // 预加载资源
        this.load.atlas("player", "assets/temp.png");
        this.load.image("spike", "assets/spike.png");

        this.load.image("floor", "assets/floor.png");
        this.load.image("wallLeft", "assets/wallLeft.png");
        this.load.image("wallRight", "assets/wallRight.png");
        this.load.image("wallBottom", "assets/wallBottom.png");
        this.load.image("wallTop", "assets/wallTop.png");
        this.load.image("bg", "assets/bg.png");
    }

    create() {
        this.floor = this.physics.add.staticGroup();
        this.wallTop = this.physics.add.staticGroup();
        this.wallBottom = this.physics.add.staticGroup();
        this.wallLeft = this.physics.add.staticGroup();
        this.wallRight = this.physics.add.staticGroup();
        this.bg = this.physics.add.staticGroup();

        let drawX = 0;
        let drawY = 0;
        // 将地图字符串按分隔符转为数组
        const mapArr = map.split('.');
        
        mapArr.forEach(row => {
            drawX = 0;
            for (let i = 0; i < row.length; i++) {
                const tile = row.charAt(i);
                switch(tile) {
                    case '7':
                        this.floor.create(drawX, drawY, "floor");
                        break;
                    case '9':
                        this.wallTop.create(drawX, drawY, "wallTop");
                        break;
                    case '8':
                        this.wallBottom.create(drawX, drawY, "wallBottom");
                        break;
                    case '5':
                        this.wallLeft.create(drawX, drawY, "wallLeft");
                        break;
                    case '6':
                        this.wallRight.create(drawX, drawY, "wallRight");
                        break;
                    case '1':
                        this.floor.create(drawX, drawY, "floor");
                        // 玩家相关代码可在此恢复
                        break;
                    default:
                        this.bg.create(drawX, drawY, "bg");
                }
                drawX += 16;
            }
            drawY += 16;
        });
    }

    update() {
        // 后续可添加游戏逻辑
    }
}

// 游戏配置
const config = {
    type: Phaser.AUTO,
    width: 3000,
    height: 1500,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: [GameScene] // 直接使用场景类
};

// 初始化游戏
const game = new Phaser.Game(config);
// 若需其他场景，按正确类名添加
// game.scene.add("load", LoadScene);
// game.scene.add("end", EndScene);
// 启动游戏场景
game.scene.start('game');

额外注意事项 #

• 确保map.js中的map字符串格式正确：每行用.分隔，无多余空字符或换行，例如"777.956.888"这类结构。
• 图片资源路径需与实际文件位置一致，避免加载失败导致渲染空白。

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