Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
198 lines (172 sloc) 5.55 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rectangle Eater - Entity Component System Javascript Demo</title>
<meta name="description" content="">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
<style>
body, html {
background: RGBA(151, 135, 110, 0.2);
bottom: 0;
font-family: 'VT323', monospace;
left: 0;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
h1 { font-size: 7em; }
h2 { font-size: 5em; }
h3 { font-size: 3em; }
a {
color: #336699;
}
canvas {
background: #ffffff;
border: 5px solid #343434;
border-radius: 3px;
cursor: none;
display: table;
margin: 0 auto;
transition: all 0.2s;
position: relative;
width: 600px;
height: 400px;
}
@media only screen and (max-width : 800px) {
canvas {
width: 300px;
height: 200px;
}
}
canvas.game-over {
background: #181818;
}
canvas.badHit {
background: rgba(255,0,0,0.4);
}
canvas.goodHit {
background: rgba(0,255,0,0.4);
}
#score {
font-size: 6em;
}
#game-over {
bottom: 80px;
color: #ffffff;
left: 0;
position: fixed;
opacity: 1;
text-align: center;
text-shadow: 0 0 28px #000000, 1px 1px 28px #000000;
transition: all 0.3s;
right: 0;
top: 0;
visibility: visible;
}
#game-over.hidden {
opacity: 0;
visibility: hidden;
}
#game-over h1,#game-over h2 {
text-shadow: 1px 1px 0 #888, 2px 2px 0 #888, 3px 3px 0 #888;
}
#game-over h1 {
margin-top: 1.2em;
}
#game-over h2 {
margin-bottom: 0.1em;
}
#game-over h3 {
margin: 0;
padding: 0;
}
#game-over a {
border-bottom: 1px solid #22ff22;
color: #22ff22;
text-shadow: 1px 1px 0 #000000, 2px 2px 0 #000000, 3px 3px 0 #000000;
text-decoration: none;
}
.center {
text-align: center;
}
.description {
padding-top: 1em;
}
.description h2 {
margin: 0 0 0.1em 0;
padding: 0;
}
.description p {
padding: 0;
margin: 0;
}
.italic { font-style: italic; }
</style>
</head>
<body>
<div id='score' class='center'>0</div>
<canvas id='game-canvas' width=600 height=400></canvas>
<div id='game-over' class='hidden'>
<h1>
Game Over
</h1>
<h2>
Final Score:
<span id='final-score'>0</span>
</h2>
<h3>
<a href='javascript:window.location=window.location;'>Retry</a>
</h3>
</div>
<div class='description center'>
<h2>Rectangle Eater</h2>
<p>
Big guys hurt. Small guys help.
</p>
<br />
<br />
<p class='italic'>
This is a hacked together demonstration of <a href='http://vasir.net/blog/game-development/how-to-build-entity-component-system-in-javascript' target='blank'>Entity Component System</a> by
<a href='http://github.com/enoex' target='blank'>@enoex</a>.
<br />
<a href="https://twitter.com/share" class="twitter-share-button" data-via="enoex" data-hashtags="html5">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</p>
</div>
<!-- Scripts -->
<script>
// For tutorial purposes, we'll set up a global object containing
// references to all objects.
window.ECS = {
Components: {},
systems: {},
entities: [],
game: {},
score: 0
};
// Canvas functionality (NOT ECS specific)
// --------------------------------------
// For the demo, just grab a reference to the canvas
// Some systems (e.g., rendering) need to know about the canvas. We
// could pass in a reference to it or store it's state globally like
// this:
ECS.$canvas = document.getElementById("game-canvas");
ECS.context = ECS.$canvas.getContext("2d");
ECS.$score = document.getElementById("score");
</script>
<script src='scripts/lib/hammer.js'></script>
<script src='scripts/Entity.js'></script>
<script src='scripts/Components.js'></script>
<script src='scripts/Assemblages.js'></script>
<script src='scripts/systems/decay.js'></script>
<script src='scripts/systems/userInput.js'></script>
<script src='scripts/systems/collision.js'></script>
<script src='scripts/systems/render.js'></script>
<script src='scripts/game.js'></script>
</body>
</html>