現在、フェイザーでブラウザーベースのゲームを作成し、それをコンテナーdiv
タグに追加しようとしていますが、フェイザーはコンテナーdiv
の下に自分自身をプッシュしているようです。
比較のための2つのスクリーンショット:
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;
}
私がどこで間違っているのかを教えてくれる人はいますか?
フェイザー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()の4番目のパラメーターは、Phaserが作成する要素を挿入するDOM要素のIDです。
Phaser.Gameコンストラクターの4番目のパラメーターは、親コンテナーです。空のままにすると、キャンバスがドキュメントの本文に挿入されます。文字列を指定すると、その文字列に対してdocument.getElementById()が実行され、見つかった場合はそこにキャンバスが挿入されます。 HTMLElementを指定すると、IDチェックがスキップされ、代わりにキャンバスがその要素に挿入されます。
したがって、特にあなたの場合は、IDを使用してdivを作成し、そのIDをコンストラクターに渡すことをお勧めします。
Phaser3の場合、構成オブジェクトで親IDを指定できます
const config = {
width: 800, height: 600,
...
parent: 'element-id'
};
new Phaser.Game(config);
ここでドキュメントをチェックアウトします: https://photonstorm.github.io/phaser3-docs/global.html#GameConfig