/
chip8.html
86 lines (85 loc) · 2.99 KB
/
chip8.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<title>Chip8 emulator</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Chip8 Emulator</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link nav-style" href="">Github</a>
</nav>
</div>
</header>
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid canvas-keys">
<div class="mdl-card mdl-shadow--6dp mdl-canvas-div">
<div class="mdl-card__media">
<canvas id="screen" width="640" height="320"></canvas>
</div>
</div>
<div class="mdl-card mdl-shadow--6dp mdl-keys-div">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Controls</h2>
</div>
<div class="mdl-card__actions mdl-card--border">
<div class="mdl-layout-spacer"></div>
<table class="mdl-data-table mdl-js-data-table table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>q</td>
<td>w</td>
<td>e</td>
<td>r</td>
</tr>
<tr>
<td>a</td>
<td>s</td>
<td>d</td>
<td>f</td>
</tr>
<tr>
<td>z</td>
<td>x</td>
<td>c</td>
<td>v</td>
</tr>
</table>
<div class="style-select">
<div class="mdl-selectfield">
<label>Select a game</label>
<select class="browser-default" id="select-game">
<option value="" disabled selected>Select a game</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<audio src="sound/beep.wav" style="display: none" id="beep"></audio>
</body>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<script type="text/javascript" src="js/chip8.js"></script>
<script type="text/javascript" src="js/renderer.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
<script type="text/javascript" src="js/emulate.js"></script>
</html>