<!DOCTYPE html>
<html>
<head>
<title>Sample: Ping pong</title>
<link rel="stylesheet" href="css/game.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/wterminal.css" />
<script src="js/wterminal.js"></script>
<script src="js/wterminal-autoextend.js"></script>
<script src="js/theme.js"></script>
<script src="js/game-pong-context2d.js"></script>
</head>
<body>
<header>
<button style="float: right;" title="Dark theme on/off" onclick="toggleTheme();">☀</button>
<a href="index.html">Home</a>
<a href="static-terminal.html">Static</a>
<a href="dropdown.html">Dropdown</a>
<a href="pong.html">Pong</a>
<a href="addon.html">Addon</a>
</header>
<main>
<span style="float:right">
<button onclick="WTerminal.open()">Open terminal</button>
</span>
<h1>Game sample: Ping pong</h1>
<div id="game-area" class="game-area"></div>
<p><b><u>How to:</u></b><br>
Use the arrow keys up and down to move, or [W] and [S].<br>
Press spacebar or enter, to start a next round, or to pause/resume.</p>
<p>To restart the game use the buttons below. Or open the terminal, type "restartgame" and press enter.</p>
<p>To get more information about pong open the terminal, type "printgame" and press enter.<br>
Or open the terminal, type "popvar game" and press enter (DEBUG_PARENT_OBJECT must be true for this to work).</p>
<button onclick="startPingPong('game-area');">start normal</button>
<button onclick="startPingPong('game-area', 640, 480, 1);">start large</button>
<button onclick="startPingPong('game-area', 320, 240, 2);">start zoomed</button>
<script>
WTerminal.instalDropdownTerminal();
startPingPong('game-area');
</script>
</main>
<footer>
<p class="float-right">Author: Ward Truyen</p>
</footer>
</body>
</html>