-
Notifications
You must be signed in to change notification settings - Fork 0
/
frogger.html
129 lines (115 loc) · 7.77 KB
/
frogger.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Frogger</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans+Condensed:300" rel="stylesheet">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<a class="hidden" href="">Skip to Main Content</a>
<nav>
<nav>
<li><a href="/">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</nav>
</nav>
<a class='h1-link' href="/"><h1>Abby Starnes</h1></a>
<p class="tagline">front-end developer</p>
<ul class="links">
<li><a class="" href="https://jsfiddle.net/user/ordette/fiddles"><i class="fa fa-jsfiddle "></i> JSFiddle</a></li>
<li><a class="" href="https://github.com/abbystarnes"><i class="fa fa-github "></i> GitHub</a></li>
<li><a href="https://medium.com/@abbymstarnes/" class=""><i class="fa fa-medium "></i> Blog Posts</a></li>
<li><a href="https://www.linkedin.com/in/abbystarnes" class=""><i class="fa fa-linkedin "></i> LinkedIn</a></li>
</ul>
</div>
</header>
<main>
<div class="wrapper wrapper-max-width">
<h2>Frogger</h2>
<p class="subtitle">A Javascript Frogger Game Implemented with the <a href="https://robohash.org/">Robohash API</a></p>
<article class="project">
<!-- <img class="logo" src="" alt="IBM Analytics Platform Style Guide"> -->
<h3>Technologies</h3>
<ul class='tech-list'>
<li><img class='tech' src="img/technologies/javascript.png" alt="">
<p>Javascript ES6</p>
</li>
<li><img class='tech' src="https://robohash.org/halibusdfta?set=set3" alt="">
<p>Robohash API</p>
</li>
<li><img class='tech' src="img/technologies/sass.png" alt="">
<p>SASS</p>
</li>
<li><img class='tech' src="img/technologies/css.svg" alt="">
<p>CSS3</p>
</li>
<li><img class='tech' src="img/technologies/html.png" alt="">
<p>HTML5</p>
</li>
</ul>
</article>
<article class="project">
<h3>Overview</h3>
<p>Frogger is vanilla javascript implementation of the classic Frogger game. This is a week-long individual project from quarter 1 of Galvanize's 24-week web development immersion course. I used the <a href="https://robohash.org/">Robohash
API</a> to generate custom graphics for each user with a user-inputted seed value.</p>
<a class='code-link' target="_blank" href="http://abbystarnes-robot-frogger.surge.sh/">View Live <i class="fa fa-external-link" aria-hidden="true"></i></a>
<p class='link-caption'>(Controls are arrow keys: up down left right - ▲▼◀▶)</p>
<a class='code-link' target="_blank" href="https://github.com/abbystarnes/rogger">View Code <i class="fa fa-external-link" aria-hidden="true"></i></a>
</article>
<article class="project">
<h3>Game Instantiation & Collision Detection</h3>
<script src="https://gist.github.com/abbystarnes/4f80706beffa49db37f5004b1851ec52.js"></script>
<p class="text">Once the user has entered a seed value, clicking 'start' calls the createGame() function. Level data passed in from a JSON object determines the number, speed and direction of the bots for each level. Bots are generated with the Robot
class and pushed to an array. A new engine is instantiated at the top of createGame(). Once all of the bots have been created, the bot array is passed to the engine's InitRobots() function.</p>
<script src="https://gist.github.com/abbystarnes/807867463de10e4aca893cc19b49456a.js"></script>
<p>The engine class has a MoveRobots() function which calls the bot's move() function, and it sets the bot's requestId to window.requestAnimationFrame() with MoveRobots() as the callback. This way MoveRobots() is called every time the browser
performs the next repaint. The engine also has a RemoveRobots() function. It calls the bot's remove() function and cancels the previous animation frame request, which stops the bot's movement.</p>
<script src="https://gist.github.com/abbystarnes/2ade759fb88bac2864bbe5916ff3ff5a.js"></script>
<p>The Robot class's constructor takes in the bot's specific requirments, aquired from the level data passed into the createGame() function. These include the bot's initial vertical and horizontal offset, movement speed, and set value (used
to determine the bot's graphic). The create() function generate's a div with a background image from the Robohash API. The user's seed input and the bot's set value are passed as parameters to the url and determine which image is returned.
The move() function updates the bot's horizontal position (all bots move only left & right). It also call's checkCollision() every time the bot moves. Check collision checks the bot's current position against the player's current
position. If they overlap, the collide() function is called. Collide reset's the player's position to the beginning of the level and decrements the player's lives. If the player is out of lives, setModal() is called.</p>
<script src="https://gist.github.com/abbystarnes/a75a3b44b6ba69083d5cb389608ddf85.js"></script>
<p class="text">setModal() displays a modal to the player, allowing them to restart (if they're out of lives) or continue to the next level (if they've won). Once the user presses the submit() button on the modal, the process starts over from level 0
or the next level.</p>
</article>
</div>
</main>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>