HTML将移相器移入容器div答案

【问题标题】：HTML moving phaser into container divHTML将移相器移入容器div
【发布时间】：2013-12-29 21:16:06
【问题描述】：

目前在 Phaser 中制作基于浏览器的游戏并尝试将其添加到我创建的容器 div 标签中，但是 Phaser 似乎将自己推到容器 div 下方。

两张截图对比：

http://gyazo.com/3cc9b9333cf89d7fc879bd2cdc741609（这是容器 div，我的标题 div 当前在其中，这是我希望我的移相器游戏做的事情）
http://gyazo.com/5a7cea7514a9e295355c87933c3d14ac（这是我的移相器游戏目前在页脚 div 上方所做的事情，您可以看到容器 div，也可以清楚地看到当前位于页脚 div 下的移相器游戏）

这是我的 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;


    }

谁能帮我告诉我哪里出错了？

【问题讨论】：

我可以知道你的预期输出吗？？
我希望移相器游戏在巨大的深灰色容器 div 中输出自己，就像
正在做的那样。
如果您在font-family 声明中有多种字体，您需要在包含空格的名称之外放置撇号。 font-family: Century Gothic, Arial; -> font-family: 'Century Gothic', Arial;

【解决方案3】：

Phaser.Game 构造函数的第四个参数是父容器。如果你把它留空，它会将画布注入到文档正文中。如果您给它一个字符串，它将在该字符串上运行 document.getElementById()，如果找到，则将画布注入其中。如果您为其提供 HTMLElement，它将跳过 ID 检查并将画布注入该元素。

因此，在您的情况下，我建议您创建一个带有 ID 的 div，然后将该 ID 传递给构造函数。

【讨论】：

哇，你的回答中有一些我不知道的有用内容！并感谢您指出该文档的链接。顺便说一句，还有一件事，如果我使用 iframe 会怎样？第四个参数是可选的吗？
如果您使用 iframe，那么通常您将第 4 个参数留空，这样它就会填满整个文档。确保您的 iframe 尺寸和游戏尺寸匹配或兼容。