index.html

<!DOCTYPE html>

<html lang="en" manifest="invaders.appcache">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content="HTML5, JavaScript, game, Invaders"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
		<script src = "main.min.js" type= text/javascript></script>
	</head>
	<body>
		<section id = "game" class="container">
			<div id = "gamearea">
				<canvas id = "backgroundCanvas" width = "100" height = "100">Sorry, your browser doesn't support canvas technology.</canvas>
				<canvas id = "enemiesCanvas" width = "100" height = "100"></canvas>
				<canvas id = "textCanvas" width = "100" height = "200"></canvas> 
				<canvas id = "playerCanvas" width = "100" height = "100"></canvas> <!-- having multiple canvas helps us optimise resources by separating elements of our game and avoiding unnecessary rendering -->
				
				<!--
				<div class = "aright">
					<h4>+CONTROLS</h4>
					<div id = "controls">
						<h4>MOVEMENT:</h4>
						<p><b>UP -</b> W or   ↑</p>
						<p><b>DOWN -</b> S or   ↓</p>
						<p><b>LEFT -</b> A or   ←</p>
						<p><b>RIGHT -</b> D or   →</p>
						<h4>ACTIONS:</h4>
						<p><b>FIRE -</b> Space bar</p>
						<p><b>RESTART -</b> Esc</p>
					</div>
				</div>
					-->
			</div>
		</section>
	</body>
</html>