Phaser & Django: Place canvas inside div-CodePudding

I'm trying to embed a Phaser game into a Django application, but struggling with the most basic of operations to get started: Making sure the canvas is placed inside a particular div as to center it on the middle of the page.

From what I could gather, for this to work, I should simply specify the parent div. However, whenever I specify the parent div, the canvas is nowhere to be found. When I leave out the line again, it reappears, but outside the layout.

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

{% block content %}

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

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

{% endblock %}

<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>

What am I not understanding?

CodePudding user response：

Your html file extends your app/layouts.html. That layouts.html has a content block in which the content of your content block gets inserted. But as all the rest of your code is not within that block, it does not get inserted to layouts.html.

Create more blocks in your layouts.html like one for styles, one for javascript etc. Then put your code also in these blocks. Because only what's inside those blocks gets transferred to the template which is to extend.

layout.html:

{% block styles %}
{% endblock %}
{% block content %}
{% endblock %}
{% block javascript %}
{% endblock %}

your template:

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

{% block content %}

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

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

{% endblock %}

{% block javascript %}
<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 %}