javascript HTML 将移相器移入容器 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20526933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML moving phaser into container div
提问by Marc Brooks
Currently making up a browser based game in phaser and trying to add it into the container divtag I've created however phaser seems to be pushing itself to below the container div.
目前在 phaser 中制作基于浏览器的游戏并尝试将其添加到div我创建的容器标签中，但是 phaser 似乎将自己推到容器下方div。
Two screenshots for comparison:
两张截图对比：
http://gyazo.com/3cc9b9333cf89d7fc879bd2cdc741609(This is the container div with my header div currently inside of it which is what I want my phaser game to be doing)
http://gyazo.com/5a7cea7514a9e295355c87933c3d14ac(This is what my phaser game is currently doing above the footer div you can see the container div and also clearly see the phaser game currently residing under the footer div)
http://gyazo.com/3cc9b9333cf89d7fc879bd2cdc741609（这是我的标题 div 的容器 div 目前在其中，这是我希望我的移相器游戏正在做的事情）
http://gyazo.com/5a7cea7514a9e295355c87933c3d14ac（这是我的移相器游戏目前在页脚 div 上方执行的操作，您可以看到容器 div，也可以清楚地看到当前驻留在页脚 div 下的移相器游戏）
This is the code for my HTML page:
这是我的 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>
And this is the code for my CSS
这是我的 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?
任何人都可以帮助我告诉我哪里出错了？
回答by LGama
Using the examples found on the phaser github (https://github.com/photonstorm/phaser)
使用在移相器 github ( https://github.com/photonstorm/phaser)上找到的示例
in the Html:
在 HTML 中：
<div id="phaser-example"></div>
on the .js
在 .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.
Phaser.Game() 的第四个参数是您想要插入 Phaser 创建的元素的 DOM 元素的 id。
回答by PhotonStorm
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.
Phaser.Game 构造函数的第四个参数是父容器。如果您将其留空，它会将画布注入文档正文。如果你给它一个字符串，它会在该字符串上运行一个 document.getElementById() ，如果找到的话，将画布注入那里。如果您为其提供 HTMLElement，它将跳过 ID 检查并将画布注入该元素。
So in your case specifically I would suggest you create a div with an ID, then pass that ID into the constructor.
因此，特别是在您的情况下，我建议您创建一个带有 ID 的 div，然后将该 ID 传递给构造函数。
More details here: http://gametest.mobi/phaser/docs/Phaser.Game.html
回答by bFunc
For Phaser3 you can specify parent id in configuration object
对于 Phaser3，您可以在配置对象中指定父 ID
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
在这里结帐文档：https: //photonstorm.github.io/phaser3-docs/global.html#GameConfig
