<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#GameContainer {
width: 1001px;
height: 600px;
border: 1px solid black;
padding: 0px;
margin: 0px;
}
#GameCanvas {
width: 800px;
height: 600px;
background-color: green;
float: left;
}
#InfoContainer {
width: 200px;
height: 600px;
border-left: 1px solid black;
float: right;
position: relative;
}
h1 {
background: lightgray;
text-align: center;
margin: 0;
font-size: 16px;
font-family: Arial;
padding: 2px;
}
ul {
margin: 0;
list-style: none;
padding-left: 5px;
padding-top: 3px;
}
ul li {
margin-left: 0;
padding-left: none;
list-style-position: inside;
font-family: Arial;
font-size: 14px;
font-weight: bold;
}
ul li span {
font-weight: normal;
}
</style>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/external/jquery.js"></script>
<script src="js/helpers.js"></script>
<script src="js/files.js"></script>
<script src="js/tileset.js"></script>
<script src="js/tile.js"></script>
<script src="js/tileengine.js"></script>
<script src="js/level.js"></script>
<script src="js/animation.js"></script>
<script src="js/player.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="GameContainer">
<canvas width="800" height="600" id="GameCanvas"></canvas>
<div id="InfoContainer">
<h1>General</h1>
<ul>
<li>Bg src: <span id="InfoBgSrc">#</span></li>
</ul>
<h1>Tileset</h1>
<ul>
<li>Tileset loaded: <span id="InfoTilesetLoaded">#</span></li>
<li>Tileset src: <span id="InfoTilesetSrc">#</span></li>
</ul>
</div>
</div>
</body>
</html>