113 lines
3.4 KiB
HTML
113 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Space Drifter</title>
|
||
|
|
<link rel="stylesheet" href="styles.css" />
|
||
|
|
<link rel="icon" href="assets/starship.svg" />
|
||
|
|
<meta property="og:title" content="Space Drifter" />
|
||
|
|
<meta property="og:type" content="article" />
|
||
|
|
<meta
|
||
|
|
property="og:image"
|
||
|
|
content="https://raw.githubusercontent.com/bence-toth/space-drifter/main/assets/space-drifter-cover.jpg"
|
||
|
|
/>
|
||
|
|
<meta
|
||
|
|
property="og:url"
|
||
|
|
content="https://bence-toth.github.io/space-drifter/"
|
||
|
|
/>
|
||
|
|
<meta name="twitter:card" content="summary_large_image" />
|
||
|
|
<meta
|
||
|
|
property="og:description"
|
||
|
|
content="A pretty darn difficult asteroid shooter game with realistic inertia and unconventional controls."
|
||
|
|
/>
|
||
|
|
<meta property="og:site_name" content="Space Drifter" />
|
||
|
|
<meta name="twitter:image:alt" content="Space Drifter" />
|
||
|
|
<meta
|
||
|
|
name="description"
|
||
|
|
content="A pretty darn difficult asteroid shooter game with realistic inertia and unconventional controls."
|
||
|
|
/>
|
||
|
|
<meta name="keywords" content="Space Shooter, Game" />
|
||
|
|
<meta name="author" content="Bence A. Tóth" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="splash">
|
||
|
|
<div class="innerWrapper">
|
||
|
|
<h1>Space Drifter</h1>
|
||
|
|
<button id="start">
|
||
|
|
<span>Start game</span>
|
||
|
|
<div class="line top"></div>
|
||
|
|
<div class="line right"></div>
|
||
|
|
<div class="line bottom"></div>
|
||
|
|
<div class="line left"></div>
|
||
|
|
</button>
|
||
|
|
<div class="controls">
|
||
|
|
<h3>Controls</h3>
|
||
|
|
<dl>
|
||
|
|
<dt>Fire thrusters</dt>
|
||
|
|
<dd>
|
||
|
|
<div class="wasd">
|
||
|
|
<kbd>W</kbd>
|
||
|
|
<kbd>A</kbd>
|
||
|
|
<kbd>S</kbd>
|
||
|
|
<kbd>D</kbd>
|
||
|
|
</div>
|
||
|
|
<div class="wasd">
|
||
|
|
<kbd>↑</kbd>
|
||
|
|
<kbd>←</kbd>
|
||
|
|
<kbd>↓</kbd>
|
||
|
|
<kbd>→</kbd>
|
||
|
|
</div>
|
||
|
|
</dd>
|
||
|
|
<dt>Launch torpedo</dt>
|
||
|
|
<dd>
|
||
|
|
<kbd>Space</kbd>
|
||
|
|
<kbd>Mouse click</kbd>
|
||
|
|
</dd>
|
||
|
|
<dt>Pause/Resume</dt>
|
||
|
|
<dd>
|
||
|
|
<kbd>P</kbd>
|
||
|
|
</dd>
|
||
|
|
</dl>
|
||
|
|
</div>
|
||
|
|
<footer>
|
||
|
|
<nav>
|
||
|
|
by
|
||
|
|
<a
|
||
|
|
href="https://github.com/bence-toth/space-drifter"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener"
|
||
|
|
>Bence A. Tóth</a
|
||
|
|
>
|
||
|
|
</nav>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="paused" class="hidden">
|
||
|
|
<div class="innerWrapper">
|
||
|
|
<h2>Game paused</h2>
|
||
|
|
<p>Press <kbd>P</kbd> to resume</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="gameOver" class="hidden">
|
||
|
|
<div class="innerWrapper">
|
||
|
|
<h2>Game Over</h2>
|
||
|
|
<h3>Your score: <span id="finalScore"></span></h3>
|
||
|
|
<button id="restart" tabindex="-1">
|
||
|
|
<span>Restart game</span>
|
||
|
|
<div class="line top"></div>
|
||
|
|
<div class="line right"></div>
|
||
|
|
<div class="line bottom"></div>
|
||
|
|
<div class="line left"></div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="canvasWrapper">
|
||
|
|
<canvas id="game-canvas"></canvas>
|
||
|
|
<div id="score">0</div>
|
||
|
|
</div>
|
||
|
|
<script src="game.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|