Geek Answers Handbook

HTML phaser move to div container

I am currently compiling a browser-based game in the phaser and trying to add it to the container div tag I created however the phaser seems to be pushing 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; }

Can anyone help show me where I'm going wrong?

+10
source share
3 answers

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

in html:

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

on .js

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

The fourth parameter in Phaser.Game () is the identifier of the DOM element into which you want to insert the element created by Phaser.

+21
source

The 4th parameter for the Phaser.Game constructor is the parent container. If you leave it blank, it will insert the canvas into the document body. If you give it a line, it will run document.getElementById () on that line and, if it finds it, enter the canvas there. If you provide it with an HTMLElement, it will skip validating the identifier and add a canvas to this element instead.

So, in your case, I would suggest you create a div with an identifier, and then pass that identifier to the constructor.

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

+10
source

For Phaser3, you can specify the parent id in the configuration object

 const config = { width: 800, height: 600, ... parent: 'element-id' }; new Phaser.Game(config);

Checkout here: https://photonstorm.imtqy.com/phaser3-docs/global.html#GameConfig

+4
source

More articles:


All Articles