HTML перемещает фазовращатель в контейнер div

В настоящее время создаю браузерную игру в фазере и пытаюсь добавить ее в тег контейнера div, который я создал, однако фазер, похоже, подталкивает себя к контейнеру div.

Два скриншота для сравнения:

  • http://gyazo.com/3cc9b9333cf89d7fc879bd2cdc741609 (это div-контейнер с моим div-заголовком внутри него, что я хочу, чтобы моя фазерная игра делала)

  • http://gyazo.com/5a7cea7514a9e295355c87933c3d14ac. см. блок-контейнер, а также отчетливо видно фазерную игру, которая в настоящее время находится под разделом нижнего колонтитула)

Это код моей HTML-страницы:

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

А это код моего 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;


    }

Кто-нибудь может помочь показать мне, где я ошибаюсь?


javascript html css phaser-framework
person Marc Brooks    schedule 11.12.2013    source источник
comment
Могу ли я узнать ваш ожидаемый результат ??   -  person Amarnath Balasubramanian    schedule 11.12.2013
comment
Я хочу, чтобы фазер выводил себя внутри гигантского темно-серого контейнера div точно так же, как это делает ‹div class=header›.   -  person Marc Brooks    schedule 11.12.2013
comment
Просто примечание OT, если у вас есть несколько шрифтов в объявлении font-family, вам нужно поставить апострофы вне имени, которое содержит пробелы. font-family: Century Gothic, Arial; -> font-family: 'Century Gothic', Arial;   -  person aksu    schedule 15.02.2016

Ответы (3)


arrow_upward
26
arrow_downward

Используя примеры, найденные на github для фазера (https://github.com/photonstorm/phaser)

в HTML:

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

на .js

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

Четвертый параметр Phaser.Game() — это идентификатор элемента DOM, в который вы хотите вставить элемент, созданный Phaser.

person LGama    schedule 10.01.2014

arrow_upward
13
arrow_downward

Для Phaser3 вы можете указать родительский идентификатор в объекте конфигурации.

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

new Phaser.Game(config);

проверить документы здесь: https://photonstorm.github.io/phaser3-docs/global.html#GameConfig

person bFunc    schedule 24.02.2018

arrow_upward
10
arrow_downward

Четвертым параметром конструктора Phaser.Game является родительский контейнер. Если вы оставите его пустым, он вставит холст в тело документа. Если вы дадите ему строку, она запустит document.getElementById() для этой строки и, если она будет найдена, вставит туда холст. Если вы предоставите ему HTMLElement, он пропустит проверку идентификатора и вместо этого вставит холст в этот элемент.

Так что конкретно в вашем случае я бы предложил вам создать div с идентификатором, а затем передать этот идентификатор в конструктор.

Подробнее здесь: http://gametest.mobi/phaser/docs/Phaser.Game.html

person PhotonStorm    schedule 16.12.2013
comment
Ух ты, какой полезный контент в вашем ответе, о котором я не знал! и спасибо за указание на эту ссылку для документации. кстати, еще одна вещь, что, если бы я использовал iframe? 4-й параметр необязателен? - person Gokigooooks; 01.02.2015
comment
Если вы используете iframe, то обычно вы оставляете 4-й параметр пустым, поэтому он заполняет весь документ. Убедитесь, что размеры iframe и размеры игры совпадают или совместимы. - person PhotonStorm; 02.02.2015