HTML将移相器移入容器格 [英] HTML moving phaser into container div
问题描述
目前在移相器中构建基于浏览器的游戏，并试图将其添加到我创建的容器div标记中，但移相器似乎将自己推向容器div之下。
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.
http://gyazo.com/3cc9b9333cf89d7fc879bd2cdc741609 （这是带有我的header div的container div这是我希望我的相位游戏正在做的事情）
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 （这是我的相位游戏目前正在做的页脚div上面，你可以看到容器div，也清楚地看到当前居住在页脚div下的phaser游戏）
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)
这是我的HTML页面的代码：
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>
这是我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?
推荐答案
使用phaser github上的例子（ https://github.com/photonstorm/phaser ）
Using the examples found on the phaser 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元素的id插入Phaser创建的元素。
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.
这篇关于HTML将移相器移入容器格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
