Phaser嵌入Django：Canvas无法放入指定Div的问题求助

1. 脚本执行时机过早，DOM未加载完成 #

你的脚本写在{% endblock %}之后，可能在页面中<div id='phaser-canvas'></div>还未渲染到DOM时，Phaser就已尝试查找父元素，导致找不到目标节点，Canvas无法挂载。

解决方式：

• 将脚本放到{% block content %}内部的div之后，确保DOM元素先渲染：

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<div id='phaser-canvas'></div>

<script>
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-canvas',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload() {
}

function create() {
}

function update() {
}
</script>
{% endblock %}

• 或者用DOM加载完成事件包裹代码，确保DOM就绪后再初始化Phaser：

document.addEventListener('DOMContentLoaded', function() {
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        parent: 'phaser-canvas',
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };
    var game = new Phaser.Game(config);
});

2. 父容器缺少基础样式，导致Canvas不可见 #

<div id='phaser-canvas'></div>默认无宽高和布局样式，即便Canvas成功挂载，也可能因容器高度为0或布局问题被隐藏。要实现居中，需给容器添加CSS样式：

示例样式：

#phaser-canvas {
    width: 800px; /* 与Canvas宽度一致 */
    height: 600px; /* 与Canvas高度一致 */
    margin: 0 auto; /* 水平居中 */
    /* 如需垂直居中，可配合父容器的flex布局：
    父容器设置：display: flex; align-items: center; min-height: 100vh; */
}

你可将这段样式放到模板的<style>标签中，或引入的全局CSS文件内。

3. 确认Phaser库已正确引入 #

若页面未加载Phaser库，初始化代码会报错，进而导致Canvas无法渲染。确保layout.html中已通过CDN或本地文件引入Phaser，比如：

<script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>

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