19

Currently making up a browser based game in phaser and trying to add it into the container div tag I've created however phaser seems to be pushing itself to below the container div.

Two screenshots for comparison:

This is the code for my HTML page:

    <!DOCTYPE html>
    <html>
    <head>
    <title>This is our menu bar!</title>

    <link rel="stylesheet" type="text/css" href="styles.css"/>

    </head>

    <body>


    <ul id="menu">
    <li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html" class="highlight"><span>Home</span></a></li>  
    <li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html"><span>Link1</span></a></li>   
    <li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html"><span>Link2</span></a></li>   
    <li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html"><span>Link3</span></a></li>   
    <li><a href="file:///H:/AINT103/xampp/htdocs/Weekfour/index.html"><span>Link4</span></a></li>   
    </ul>   


    <div class="container">

    <script rel="javascript" type="text/javascript" src="phaser.js"></script>
    <script rel="javascript" type="text/javascript" src="game.js"></script>


    <div class="header">
    Title of game & small talk about about with some a box surrounding this text before another text box surrounding the game below
    </div>

    <div class="instructions">
    </div>
    Instructions
    </div>

    <div id="footer">
     Copyright 2013 marc

    </div>

    </body>


    </html>

And this is the code for my CSS

    body {
    font-family: Century Gothic, Arial;
    background-color: #CCCCCC;
    margin: 0px auto;
    text-align: center;
    }
    .container {
    background-color: #999999;
    margin: auto;
    width: 1000px;
    height: 1000px;

    }
    .header {
    font-size: 22px;
    background-color: #999999;
    border: 1px dashed #666666;
    color: #444444;
    width: 800px;
    font-size: 14px;
    text-align: center;
    margin: 10px auto 0px auto;
    }   
    #menu {
    float: center;
    padding: 0px 10px;
    margin: 10px;
    border-bottom: 5px solid #6D7AB2;
    }

    #menu li {
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #menu li a {
    float: center;
    color: #000000;
    text-decoration: none;
    background: url('menuleft.gif') top left no-repeat;
    margin: 0px 0px;
    padding: 9px 0px 0px 9px;
    }

    #menu li a span {
    background: url('menuright.gif') top right no-repeat;
    padding: 9px 25px 6px 15px;
    }

    #menu li a:hover, 
    #menu li a.highlight {
    background: url('menuleft-hl.gif') top left no-repeat;
    color: #ffffff;
    }

    #menu li a:hover span, 
    #menu li a.highlight span {
    background: url('menuright-hl.gif') top right no-repeat;
    }


    canvas {
    padding: 0px;
    margin: auto;
    }

    #footer {
    clear:both;
    margin-top: 10px;
    border-top: 5px solid #6D7AB2;
    padding: 20px 0px;
    font-size: 80%;
    text-align:center;


    }

Anyone able to help show me where I'm going wrong?

3
  • May i know your expected output?? Dec 11, 2013 at 19:22
  • I want the phaser game to output itself within the giant dark grey container div exactly the same as like <div class="header"> is doing. Dec 11, 2013 at 19:38
  • Just a OT note if you have multiple fonts in the font-family declaration, you need to put apostrophes outside a name that contains spaces. font-family: Century Gothic, Arial; -> font-family: 'Century Gothic', Arial;
    – aksu
    Feb 15, 2016 at 18:06

3 Answers 3

26

Using the examples found on the phaser github (https://github.com/photonstorm/phaser)

in the Html:

<div id="phaser-example"></div>

on the .js

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });

The fourth parameter on Phaser.Game() is the id of the DOM element in which you would like to insert the element that Phaser creates.

0
19

For Phaser3 you can specify parent id in configuration object

const config = {
    width: 800, height: 600,
    ...
    parent: 'element-id'
};

new Phaser.Game(config);

checkout docs here: https://photonstorm.github.io/phaser3-docs/global.html#GameConfig

0
9

The 4th parameter to the Phaser.Game constructor is the parent container. If you leave it empty it will inject the canvas into the document body. If you give it a string, it will run a document.getElementById() on that string, and if found inject the canvas into there. If you provide it with an HTMLElement it will skip the ID check and inject the canvas into that element instead.

So in your case specifically I would suggest you create a div with an ID, then pass that ID into the constructor.

More details here: http://gametest.mobi/phaser/docs/Phaser.Game.html

2
  • Wow, some useful content in your answer that i didn't know! and thanks for pointing out that link for the documentation. btw, one more thing, what if i used iframe? is the 4th parameter optional? Feb 1, 2015 at 11:15
  • If you use an iframe then typically you leave the 4th parameter empty, so it fills the whole document. Ensure your iframe dimensions and game dimensions match, or are compatible. Feb 2, 2015 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.