-
Notifications
You must be signed in to change notification settings - Fork 66
/
Copy pathindex.html
139 lines (125 loc) · 5.01 KB
/
index.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-142539004-1'></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-142539004-1');
</script>
<script src='build/app.js'></script>
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico'>
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap' rel='stylesheet'>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons'
rel='stylesheet'>
<title>Pacman</title>
<meta name="author" content="Brent Ward">
<meta name="description" content="The classic arcade game Pac-Man! Remade in Javascript by Brent Ward">
<meta name="keywords" content="Pac-Man, games, retro, arcade">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id='overflow-mask' class='overflow-mask'>
<img id='backdrop' class='backdrop' src='app/style/graphics/backdrop.png' alt='Backdrop'>
<div id='fps-display' class='fps-display'></div>
<div id='preload-div' class='preload-div'></div>
<div id='main-menu-container' class='main-menu-container'>
<a href="https://www.brentward.io" class="brent-ward-logo">
<img src="app/style/graphics/brent_ward_logo_black.svg" alt="Brent Ward Website Link"/>
</a>
<img id='logo' class='logo' src='app/style/graphics/pacman_logo.png' alt='Pacman Logo'>
<button id='game-start' class='game-start'>
PLAY
</button>
</div>
<div class='header-buttons'>
<a href="https://www.brentward.io" >
<img src="app/style/graphics/brent_ward_logo.svg" alt="Brent Ward Website Link"/>
</a>
<span>
<button>
<i id='pause-button' class='material-icons'>
pause
</i>
</button>
<button>
<i id='sound-button' class='material-icons'></i>
</button>
</span>
</div>
<div id='paused-text' class='paused-text'>
PAUSED
</div>
<div id='game-ui' class='game-ui'>
<div id='row-top' class='row top'>
<div class='column _25'>
<div class='one-up'>1UP</div>
<div id='points-display'></div>
</div>
<div class='column _50'>
<div>HIGH SCORE</div>
<div id='high-score-display'></div>
</div>
</div>
<div id='maze' class='maze'>
<img id='maze-img' class='maze-img' src='app/style//graphics/spriteSheets/maze/maze_blue.svg' alt='Maze'>
<div id='maze-cover' class='maze-cover'></div>
<div id='dot-container'></div>
<p id='pacman' class='pacman'></p>
<p id='pacman-arrow' class='pacman'></p>
<p id='clyde' class='ghost'></p>
<p id='inky' class='ghost'></p>
<p id='pinky' class='ghost'></p>
<p id='blinky' class='ghost'></p>
</div>
<div id='bottom-row' class='row bottom'>
<div id='extra-lives' class='extra-lives'></div>
<div id='fruit-display' class='fruit-display'></div>
</div>
</div>
<div id='left-cover' class='loading-cover left'></div>
<div id='right-cover' class='loading-cover right'></div>
<div id='loading-container' class='loading-container'>
<div id='loading-pacman' class='loading-pacman'></div>
<div id='loading-dot-mask' class='loading-dot-mask'></div>
<div class='loading-dot _5'></div>
<div class='loading-dot _10'></div>
<div class='loading-dot _15'></div>
<div class='loading-dot _20'></div>
<div class='loading-dot _25'></div>
<div class='loading-dot _30'></div>
<div class='loading-dot _35'></div>
<div class='loading-dot _40'></div>
<div class='loading-dot _45'></div>
<div class='loading-dot _50'></div>
<div class='loading-dot _55'></div>
<div class='loading-dot _60'></div>
<div class='loading-dot _65'></div>
<div class='loading-dot _70'></div>
<div class='loading-dot _75'></div>
<div class='loading-dot _80'></div>
<div class='loading-dot _85'></div>
<div class='loading-dot _90'></div>
<div class='loading-dot _95'></div>
</div>
<div id='error-message' class='error-message'>
<div class='header'>
<div>OOPS!</div>
<div class='error-pacman'></div>
</div>
<div class='body'>
We were unable to load the images/sounds needed to play the game.</br></br>
This could be due to a poor connection, a strict network policy, or
by playing on an unsupported browser.
</div>
</div>
<script>
window.onload = () => {
let gameCoordinator = new GameCoordinator();
}
</script>
</div>
</body>
</html>