index.html

﻿<!DOCTYPE html>

<!--
	JavaScriptris v0.3.1, by Anders Hagward
	Date: 2013-08-27
-->

<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptris</title>
		<link rel="shortcut icon" href="./favicon.ico">
		<style>
			body {
				font: 1em "Segoe UI", Tahoma, sans-serif;
			}
			canvas {
				display: block;
				position: absolute;
				left: 50%;
			}
			td:first-child {
				text-align: left;
			}
			td:last-child {
				text-align: right;
			}
			#header {
				font-size: 1.3em;
				text-align: center;
				margin-bottom: 10px;
			}
			#footer {
				font-size: 0.7em;
				color: gray;
				text-align: center;
				margin-top: 4px;
			}
			#game {
				position: relative;
			}
			#landedCanvas, #activeCanvas {
				border: 1px solid gray;
			}
			#scoreLevelContainer {
				margin: 4px auto 10px;
			}
			#combo {
				visibility: hidden;
				text-align: center;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="header">JavaScriptris v<span id="version"></span></div>
		<div id="game">
			<canvas id="landedCanvas">
				Your browser does not support the HTML5 <code>canvas</code> element!
			</canvas>
			<canvas id="activeCanvas"></canvas>
			<canvas id="nextCanvas"></canvas>
		</div>
		<div id="scoreLevelContainer">
			<span style="float: left">Score: <span id="score"></span></span>
			<span style="float: right">Level: <span id="level"></span></span>
			<div style="clear: both"></div>
		</div>
		<div id="combo">0</div>
		<div id="footer">
			<table style="width: 200px; margin: 0 auto;">
				<tr>
					<td>LEFT:</td>
					<td>move left</td>
				</tr>
				<tr>
					<td>RIGHT:</td>
					<td>move right</td>
				</tr>
				<tr>
					<td>UP/X:</td>
					<td>rotate clockwise</td>
				</tr>
				<tr>
					<td>CTRL/Z:</td>
					<td>rotate anticlockwise</td>
				</tr>
				<tr>
					<td>DOWN:</td>
					<td>soft drop</td>
				</tr>
				<tr>
					<td>SPACE:</td>
					<td>hard drop</td>
				</tr>
				<tr>
					<td>G:</td>
					<td>show/hide ghost</td>
				</tr>
				<tr>
					<td>P:</td>
					<td>pause</td>
				</tr>
				<tr>
					<td>R:</td>
					<td>restart</td>
				</tr>
			</table>
		</div>
		<script src="random.js"></script>
		<script src="tetris.js" defer></script>
	</body>
</html>