/
project-3.html
230 lines (212 loc) · 11.1 KB
/
project-3.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!doctype html>
<html class="no-js" 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>Mark Weigel's Portfolio Site</title>
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<!-- The main layout out container for MDL -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--waterfall site-header">
<!-- Top row, always visible -->
<section class="mdl-layout__header-row site-header__title-row" aria-hidden="false">
<!-- Title -->
<div class="picture-me"></div>
<div class="title-text">
<h1 class="page-title mdl-typography--title">Mark Weigel</h1>
<h2 class="page-subtitle mdl-typography--subhead">Front End Developer</h2>
</div>
</section>
<!-- Bottom row, not visible on scroll -->
<section class="mdl-layout__header-row site-header__link-row">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">Portfolio</a>
<nav class="navigation__nested-links">
<a href="project-0.html" class="mdl-navigation__link navigation__nested-link">
GOATOOLS GO Grouping
</a>
<a href="project-1.html" class="mdl-navigation__link navigation__nested-link">
Dapper Goose Website
</a>
<a href="project-2.html" class="mdl-navigation__link navigation__nested-link">
Neighborhood Map
</a>
<a href="project-3.html" class="mdl-navigation__link navigation__nested-link">
Frogger Clone
</a>
<a href="project-4.html" class="mdl-navigation__link navigation__nested-link">
Mobile Portfolio
</a>
<a href="project-5.html" class="mdl-navigation__link navigation__nested-link">
Resume Project
</a>
<a href="project-6.html" class="mdl-navigation__link navigation__nested-link">
Portfolio Site
</a>
</nav>
<a class="mdl-navigation__link" href="about.html">About Me</a>
<a type="button" class="mdl-navigation__link show-dialog" href="#">Contact</a>
</nav>
</section>
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">Portfolio</a>
<nav class="navigation__nested-links">
<a href="project-0.html" class="mdl-navigation__link navigation__nested-link">
GOATOOLS GO Grouping
</a>
<a href="project-1.html" class="mdl-navigation__link navigation__nested-link">
Dapper Goose Website
</a>
<a href="project-2.html" class="mdl-navigation__link navigation__nested-link">
Neighborhood Map
</a>
<a href="project-3.html" class="mdl-navigation__link navigation__nested-link">
Frogger Clone
</a>
<a href="project-4.html" class="mdl-navigation__link navigation__nested-link">
Mobile Portfolio
</a>
<a href="project-5.html" class="mdl-navigation__link navigation__nested-link">
Resume Project
</a>
<a href="project-6.html" class="mdl-navigation__link navigation__nested-link">
Portfolio Site
</a>
</nav>
<a class="mdl-navigation__link" href="about.html">About Me</a>
<a type="button" class="mdl-navigation__link show-dialog" href="#">Contact</a>
</nav>
</div>
<!-- The main container, calls project-detail partial -->
<main class="mdl-layout__content">
<main class="mdl-layout">
<section class="mdl-grid project-detail">
<div class="card mdl-card mdl-cell--8-col">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Frogger Clone</h1>
</div>
<h3 class="mdl-cell mdl-cell--12-col mdl-cell--2-offset-desktop mdl-typography--headline">Initial Step</h3>
<div class="mdl-cell mdl-cell--4-col-tablet">
<p class="mdl-card__supporting-text">
Given an engine as well as assets, I was expected to make a working clone of the game 'Frogger'. While wrapping my head around the engine loop at first was discouraging, I enventually understood what was happening and the significance of RequestAnimationLoop.
</p>
</div>
<div class="mdl-cell mdl-cell--4-col-tablet desc-img">
<img src="assets/img/frogger-start-250.png" srcset="assets/img/frogger-start-250.png 250w, assets/img/frogger-start-500.png 500w, assets/img/frogger-start-750.png 750w, assets/img/frogger-start-1000.png 1000w" alt="Game's start screen">
</div>
<h3 class="mdl-cell mdl-cell--12-col mdl-cell--2-offset-desktop mdl-typography--headline">Next Step</h3>
<div class="mdl-cell mdl-cell--4-col-tablet desc-img">
<img src="assets/img/frogger-1000.png" srcset="assets/img/frogger-250.png 250w, assets/img/frogger-500.png 500w, assets/img/frogger-750.png 750w, assets/img/frogger-1000.png 1000w" alt="Game being played">
</div>
<div class="mdl-cell mdl-cell--4-col-tablet">
<p class="mdl-card__supporting-text">
Once I understood what was happening in the game engine, I focused on the logic of game elements. Using Object Oriented Programming, there were classes (enemies, gems, and the player) which could inherit a single placement method. I then added methods that were unique to each of the classes. For example, the player needs a method to add a life and to add to the score.
</p>
</div>
<h3 class="mdl-cell mdl-cell--12-col mdl-cell--2-offset-desktop mdl-typography--headline">Wrap Up</h3>
<div class="mdl-cell mdl-cell--4-col-tablet desc-img">
<img src="assets/img/frogger-end-1000.png" srcset="assets/img/frogger-end-250.png 250w, assets/img/frogger-end-500.png 500w, assets/img/frogger-end-750.png 750w, assets/img/frogger-end-1000.png 1000w" alt="Game's end screen">
</div>
<div class="mdl-cell mdl-cell--4-col-tablet">
<p class="mdl-card__supporting-text">
After getting the classes written, I decided to add the Start and End screens. I used HTML canvas to generate the screens and localstorage to keep track of an individual's scores. If I were to continue developing this game in the future, I would want to write functions that called a database, either in the cloud or on a server.
</p>
</div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="Frogger-Clone" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
</div>
</section>
</main>
<footer id="footer" class="mdl-mini-footer">
<section class="mdl-mini-footer__left-section">
<div class="mdl-logo">Find Me</div>
</section>
<section class="mdl-mini-footer__right-section">
<ul class="mdl-mini-footer__link-list">
<li>
<a href="https://www.github.com/mrkjesus2">
<svg id="github" class="svg-icon">
<use xlink:href="assets/icons/icons.svg#icon-github"></use>
</svg>
<div for="github" class="mdl-tooltip mdl-tooltip--top mdl-tooltip--large">
View my Github
</div>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/markweig">
<svg id="linkedin" class="svg-icon">
<use xlink:href="assets/icons/icons.svg#icon-linkedin"></use>
</svg>
<div for="linkedin" class="mdl-tooltip mdl-tooltip--top mdl-tooltip--large">
See my LinkedIn profile
</div>
</a>
</li>
<li>
<a href="mailto:markweig@gmail.com?subject=Weigel.site Contact" "email me">
<span class="sr-only">email me at</span>
<svg id="email" class="svg-icon">
<use xlink:href="assets/icons/icons.svg#icon-email"></use>
</svg>
<div for="email" class="mdl-tooltip mdl-tooltip--top mdl-tooltip--large">
markweig@gmail.com
</div>
</a>
</li>
<li>
<!-- TODO: Handle desktop cases where click does nothing -->
<a href="tel:+12676032621">
<span class="sr-only">Call me at</span>
<svg id="phone" class="svg-icon">
<use xlink:href="assets/icons/icons.svg#icon-phone"></use>
</svg>
<div for="phone" class="mdl-tooltip mdl-tooltip--top mdl-tooltip--large">
1-267-603-2621
</div>
</a>
</li>
</ul>
</section>
</footer>
</main>
</div>
<dialog class="mdl-dialog">
<h4 class="mdl-dialog-title">Get a hold of me!</h4>
<div class="mdl-dialog__content">
<p>
Email is the best way to get a hold of me, but feel free to call
if it is a reasonable hour in GMT -5.
</p>
</div>
<div class="mdl-dialog__actions mdl-dialog__actions--full-width">
<a href="mailto:markweig@gmail.com?Weigel.site Contact" class="mdl-button mdl-button--accent">Email Me</a>
<a href="tel:2676032621" class="mdl-button mdl-button--accent">Call Me</a>
<a href="#" class="mdl-button close">Nevermind</a>
</div>
</dialog>
<script src="assets/js/app.js" async></script>
<!-- Use Web Font Loader to prevent render blocking -->
<script async>
WebFontConfig = {
google: {
families: ['Roboto:300,400,500', 'Material Icons']
}
};
(function(d) {
var wf = d.createElement('script');
var s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
</script>
</body>
</html>