Permalink
Browse files

first commit

0 parents commit 62e2d96270468d4898ad0df9e66b6a2c2368f6c9 @thomaspark committed Nov 24, 2015
Showing with 37,318 additions and 0 deletions.
  1. +1 −0 CNAME
  2. BIN favicon.ico
  3. +187 −0 game.js
  4. BIN images/frog-green.png
  5. BIN images/frog-red.png
  6. BIN images/frog-yellow.png
  7. BIN images/lilypad-green.png
  8. BIN images/lilypad-red.png
  9. BIN images/lilypad-yellow.png
  10. +54 −0 index.html
  11. +203 −0 levels.js
  12. +11 −0 node_modules/animate.css/.editorconfig
  13. +4 −0 node_modules/animate.css/.npmignore
  14. +79 −0 node_modules/animate.css/Gruntfile.js
  15. +171 −0 node_modules/animate.css/README.md
  16. +119 −0 node_modules/animate.css/animate-config.json
  17. +3,272 −0 node_modules/animate.css/animate.css
  18. +6 −0 node_modules/animate.css/animate.min.css
  19. +12 −0 node_modules/animate.css/bower.json
  20. +55 −0 node_modules/animate.css/package.json
  21. +27 −0 node_modules/animate.css/source/_base.css
  22. +25 −0 node_modules/animate.css/source/attention_seekers/bounce.css
  23. +13 −0 node_modules/animate.css/source/attention_seekers/flash.css
  24. +33 −0 node_modules/animate.css/source/attention_seekers/jello.css
  25. +19 −0 node_modules/animate.css/source/attention_seekers/pulse.css
  26. +33 −0 node_modules/animate.css/source/attention_seekers/rubberBand.css
  27. +17 −0 node_modules/animate.css/source/attention_seekers/shake.css
  28. +26 −0 node_modules/animate.css/source/attention_seekers/swing.css
  29. +25 −0 node_modules/animate.css/source/attention_seekers/tada.css
  30. +35 −0 node_modules/animate.css/source/attention_seekers/wobble.css
  31. +36 −0 node_modules/animate.css/source/bouncing_entrances/bounceIn.css
  32. +31 −0 node_modules/animate.css/source/bouncing_entrances/bounceInDown.css
  33. +31 −0 node_modules/animate.css/source/bouncing_entrances/bounceInLeft.css
  34. +31 −0 node_modules/animate.css/source/bouncing_entrances/bounceInRight.css
  35. +31 −0 node_modules/animate.css/source/bouncing_entrances/bounceInUp.css
  36. +19 −0 node_modules/animate.css/source/bouncing_exits/bounceOut.css
  37. +19 −0 node_modules/animate.css/source/bouncing_exits/bounceOutDown.css
  38. +15 −0 node_modules/animate.css/source/bouncing_exits/bounceOutLeft.css
  39. +15 −0 node_modules/animate.css/source/bouncing_exits/bounceOutRight.css
  40. +19 −0 node_modules/animate.css/source/bouncing_exits/bounceOutUp.css
  41. +8 −0 node_modules/animate.css/source/fading_entrances/fadeIn.css
  42. +15 −0 node_modules/animate.css/source/fading_entrances/fadeInDown.css
  43. +15 −0 node_modules/animate.css/source/fading_entrances/fadeInDownBig.css
  44. +15 −0 node_modules/animate.css/source/fading_entrances/fadeInLeft.css
  45. +15 −0 node_modules/animate.css/source/fading_entrances/fadeInLeftBig.css
  46. +15 −0 node_modules/animate.css/source/fading_entrances/fadeInRight.css
  47. +15 −0 node_modules/animate.css/source/fading_entrances/fadeInRightBig.css
  48. +15 −0 node_modules/animate.css/source/fading_entrances/fadeInUp.css
  49. +15 −0 node_modules/animate.css/source/fading_entrances/fadeInUpBig.css
  50. +8 −0 node_modules/animate.css/source/fading_exits/fadeOut.css
  51. +14 −0 node_modules/animate.css/source/fading_exits/fadeOutDown.css
  52. +14 −0 node_modules/animate.css/source/fading_exits/fadeOutDownBig.css
  53. +14 −0 node_modules/animate.css/source/fading_exits/fadeOutLeft.css
  54. +14 −0 node_modules/animate.css/source/fading_exits/fadeOutLeftBig.css
  55. +14 −0 node_modules/animate.css/source/fading_exits/fadeOutRight.css
  56. +14 −0 node_modules/animate.css/source/fading_exits/fadeOutRightBig.css
  57. +14 −0 node_modules/animate.css/source/fading_exits/fadeOutUp.css
  58. +14 −0 node_modules/animate.css/source/fading_exits/fadeOutUpBig.css
  59. +31 −0 node_modules/animate.css/source/flippers/flip.css
  60. +30 −0 node_modules/animate.css/source/flippers/flipInX.css
  61. +30 −0 node_modules/animate.css/source/flippers/flipInY.css
  62. +20 −0 node_modules/animate.css/source/flippers/flipOutX.css
  63. +20 −0 node_modules/animate.css/source/flippers/flipOutY.css
  64. +26 −0 node_modules/animate.css/source/lightspeed/lightSpeedIn.css
  65. +15 −0 node_modules/animate.css/source/lightspeed/lightSpeedOut.css
  66. +17 −0 node_modules/animate.css/source/rotating_entrances/rotateIn.css
  67. +17 −0 node_modules/animate.css/source/rotating_entrances/rotateInDownLeft.css
  68. +17 −0 node_modules/animate.css/source/rotating_entrances/rotateInDownRight.css
  69. +17 −0 node_modules/animate.css/source/rotating_entrances/rotateInUpLeft.css
  70. +17 −0 node_modules/animate.css/source/rotating_entrances/rotateInUpRight.css
  71. +16 −0 node_modules/animate.css/source/rotating_exits/rotateOut.css
  72. +16 −0 node_modules/animate.css/source/rotating_exits/rotateOutDownLeft.css
  73. +16 −0 node_modules/animate.css/source/rotating_exits/rotateOutDownRight.css
  74. +16 −0 node_modules/animate.css/source/rotating_exits/rotateOutUpLeft.css
  75. +16 −0 node_modules/animate.css/source/rotating_exits/rotateOutUpRight.css
  76. +14 −0 node_modules/animate.css/source/sliding_entrances/slideInDown.css
  77. +14 −0 node_modules/animate.css/source/sliding_entrances/slideInLeft.css
  78. +14 −0 node_modules/animate.css/source/sliding_entrances/slideInRight.css
  79. +14 −0 node_modules/animate.css/source/sliding_entrances/slideInUp.css
  80. +14 −0 node_modules/animate.css/source/sliding_exits/slideOutDown.css
  81. +14 −0 node_modules/animate.css/source/sliding_exits/slideOutLeft.css
  82. +14 −0 node_modules/animate.css/source/sliding_exits/slideOutRight.css
  83. +14 −0 node_modules/animate.css/source/sliding_exits/slideOutUp.css
  84. +28 −0 node_modules/animate.css/source/specials/hinge.css
  85. +17 −0 node_modules/animate.css/source/specials/rollIn.css
  86. +16 −0 node_modules/animate.css/source/specials/rollOut.css
  87. +14 −0 node_modules/animate.css/source/zooming_entrances/zoomIn.css
  88. +17 −0 node_modules/animate.css/source/zooming_entrances/zoomInDown.css
  89. +17 −0 node_modules/animate.css/source/zooming_entrances/zoomInLeft.css
  90. +17 −0 node_modules/animate.css/source/zooming_entrances/zoomInRight.css
  91. +17 −0 node_modules/animate.css/source/zooming_entrances/zoomInUp.css
  92. +18 −0 node_modules/animate.css/source/zooming_exits/zoomOut.css
  93. +18 −0 node_modules/animate.css/source/zooming_exits/zoomOutDown.css
  94. +16 −0 node_modules/animate.css/source/zooming_exits/zoomOutLeft.css
  95. +16 −0 node_modules/animate.css/source/zooming_exits/zoomOutRight.css
  96. +18 −0 node_modules/animate.css/source/zooming_exits/zoomOutUp.css
  97. +3 −0 node_modules/jquery/.bowerrc
  98. +5 −0 node_modules/jquery/.jscsrc
  99. +14 −0 node_modules/jquery/.npmignore
  100. +227 −0 node_modules/jquery/AUTHORS.txt
  101. +214 −0 node_modules/jquery/CONTRIBUTING.md
  102. +21 −0 node_modules/jquery/MIT-LICENSE.txt
  103. +372 −0 node_modules/jquery/README.md
  104. +28 −0 node_modules/jquery/bower.json
  105. +9,210 −0 node_modules/jquery/dist/jquery.js
  106. +5 −0 node_modules/jquery/dist/jquery.min.js
  107. +1 −0 node_modules/jquery/dist/jquery.min.map
  108. +90 −0 node_modules/jquery/package.json
  109. +786 −0 node_modules/jquery/src/ajax.js
  110. +89 −0 node_modules/jquery/src/ajax/jsonp.js
  111. +75 −0 node_modules/jquery/src/ajax/load.js
  112. +13 −0 node_modules/jquery/src/ajax/parseJSON.js
  113. +28 −0 node_modules/jquery/src/ajax/parseXML.js
  114. +64 −0 node_modules/jquery/src/ajax/script.js
  115. +5 −0 node_modules/jquery/src/ajax/var/nonce.js
  116. +3 −0 node_modules/jquery/src/ajax/var/rquery.js
  117. +136 −0 node_modules/jquery/src/ajax/xhr.js
  118. +11 −0 node_modules/jquery/src/attributes.js
  119. +141 −0 node_modules/jquery/src/attributes/attr.js
  120. +158 −0 node_modules/jquery/src/attributes/classes.js
  121. +94 −0 node_modules/jquery/src/attributes/prop.js
  122. +35 −0 node_modules/jquery/src/attributes/support.js
  123. +161 −0 node_modules/jquery/src/attributes/val.js
  124. +205 −0 node_modules/jquery/src/callbacks.js
  125. +502 −0 node_modules/jquery/src/core.js
  126. +60 −0 node_modules/jquery/src/core/access.js
  127. +123 −0 node_modules/jquery/src/core/init.js
  128. +39 −0 node_modules/jquery/src/core/parseHTML.js
  129. +97 −0 node_modules/jquery/src/core/ready.js
  130. +4 −0 node_modules/jquery/src/core/var/rsingleTag.js
  131. +450 −0 node_modules/jquery/src/css.js
  132. +22 −0 node_modules/jquery/src/css/addGetHookIf.js
  133. +57 −0 node_modules/jquery/src/css/curCSS.js
  134. +70 −0 node_modules/jquery/src/css/defaultDisplay.js
  135. +15 −0 node_modules/jquery/src/css/hiddenVisibleSelectors.js
  136. +96 −0 node_modules/jquery/src/css/support.js
  137. +28 −0 node_modules/jquery/src/css/swap.js
  138. +3 −0 node_modules/jquery/src/css/var/cssExpand.js
  139. +12 −0 node_modules/jquery/src/css/var/getStyles.js
  140. +13 −0 node_modules/jquery/src/css/var/isHidden.js
  141. +3 −0 node_modules/jquery/src/css/var/rmargin.js
  142. +5 −0 node_modules/jquery/src/css/var/rnumnonpx.js
  143. +178 −0 node_modules/jquery/src/data.js
  144. +181 −0 node_modules/jquery/src/data/Data.js
  145. +20 −0 node_modules/jquery/src/data/accepts.js
  146. +5 −0 node_modules/jquery/src/data/var/data_priv.js
  147. +5 −0 node_modules/jquery/src/data/var/data_user.js
  148. +149 −0 node_modules/jquery/src/deferred.js
  149. +13 −0 node_modules/jquery/src/deprecated.js
  150. +50 −0 node_modules/jquery/src/dimensions.js
  151. +648 −0 node_modules/jquery/src/effects.js
  152. +114 −0 node_modules/jquery/src/effects/Tween.js
  153. +13 −0 node_modules/jquery/src/effects/animatedSelector.js
  154. +868 −0 node_modules/jquery/src/event.js
  155. +13 −0 node_modules/jquery/src/event/ajax.js
  156. +39 −0 node_modules/jquery/src/event/alias.js
  157. +9 −0 node_modules/jquery/src/event/support.js
  158. +24 −0 node_modules/jquery/src/exports/amd.js
  159. +32 −0 node_modules/jquery/src/exports/global.js
  160. +44 −0 node_modules/jquery/src/intro.js
  161. +37 −0 node_modules/jquery/src/jquery.js
  162. +580 −0 node_modules/jquery/src/manipulation.js
  163. +18 −0 node_modules/jquery/src/manipulation/_evalUrl.js
  164. +32 −0 node_modules/jquery/src/manipulation/support.js
  165. +3 −0 node_modules/jquery/src/manipulation/var/rcheckableType.js
  166. +207 −0 node_modules/jquery/src/offset.js
  167. +1 −0 node_modules/jquery/src/outro.js
  168. +142 −0 node_modules/jquery/src/queue.js
  169. +22 −0 node_modules/jquery/src/queue/delay.js
  170. +172 −0 node_modules/jquery/src/selector-native.js
  171. +14 −0 node_modules/jquery/src/selector-sizzle.js
  172. +1 −0 node_modules/jquery/src/selector.js
  173. +111 −0 node_modules/jquery/src/serialize.js
  174. +2,067 −0 node_modules/jquery/src/sizzle/dist/sizzle.js
  175. +3 −0 node_modules/jquery/src/sizzle/dist/sizzle.min.js
  176. +1 −0 node_modules/jquery/src/sizzle/dist/sizzle.min.map
  177. 0 node_modules/jquery/src/sizzle/test/data/empty.js
  178. +22 −0 node_modules/jquery/src/sizzle/test/data/mixed_sort.html
  179. +136 −0 node_modules/jquery/src/sizzle/test/data/testinit.js
  180. +242 −0 node_modules/jquery/src/sizzle/test/index.html
  181. +9,597 −0 node_modules/jquery/src/sizzle/test/jquery.js
  182. +95 −0 node_modules/jquery/src/sizzle/test/unit/extending.js
  183. +1,149 −0 node_modules/jquery/src/sizzle/test/unit/selector.js
  184. +169 −0 node_modules/jquery/src/sizzle/test/unit/utilities.js
  185. +199 −0 node_modules/jquery/src/traversing.js
  186. +100 −0 node_modules/jquery/src/traversing/findFilter.js
  187. +6 −0 node_modules/jquery/src/traversing/var/rneedsContext.js
  188. +3 −0 node_modules/jquery/src/var/arr.js
  189. +4 −0 node_modules/jquery/src/var/class2type.js
  190. +5 −0 node_modules/jquery/src/var/concat.js
  191. +5 −0 node_modules/jquery/src/var/hasOwn.js
  192. +5 −0 node_modules/jquery/src/var/indexOf.js
  193. +3 −0 node_modules/jquery/src/var/pnum.js
  194. +5 −0 node_modules/jquery/src/var/push.js
  195. +3 −0 node_modules/jquery/src/var/rnotwhite.js
  196. +5 −0 node_modules/jquery/src/var/slice.js
  197. +3 −0 node_modules/jquery/src/var/strundefined.js
  198. +4 −0 node_modules/jquery/src/var/support.js
  199. +5 −0 node_modules/jquery/src/var/toString.js
  200. +79 −0 node_modules/jquery/src/wrap.js
  201. +13 −0 package.json
  202. +252 −0 style.css
@@ -0,0 +1 @@
+flexboxfroggy.com
Binary file not shown.
@@ -0,0 +1,187 @@
+var game = {
+ level: parseInt(localStorage.level, 10) || 0,
+
+ start: function() {
+ $('#level-counter .total').text(levels.length);
+
+ $('#submit').on('click', function() {
+ var level = levels[game.level];
+ var code = $('#code').val();
+ var selector = level.selector || '';
+ $('#pond ' + selector).attr('style', code);
+ $('#code').focus();
+ game.check(level);
+ });
+
+ $('#code').on('keydown', function(e) {
+ if (e.keyCode === 13) {
+ var max = $(this).data('lines');
+ var code = $(this).val();
+ var trim = code.trim();
+ var codeLength = code.split('\n').length;
+ var trimLength = trim.split('\n').length;
+
+ if (codeLength >= max) {
+
+ if (codeLength === trimLength) {
+ e.preventDefault();
+ $('#submit').click();
+ } else {
+ $('#code').focus().val('').val(trim);
+ }
+ }
+ }
+ });
+
+ $('#editor').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
+ $(this).removeClass();
+ });
+
+ $('.arrow').on('click', function() {
+ $('#code').focus();
+ });
+
+ $('.arrow.left').on('click', function() {
+ if (game.level >= 1) {
+ game.level--;
+ } else {
+ game.level = 0;
+ }
+
+ game.loadLevel(game.level);
+ });
+
+ $('.arrow.right').on('click', function() {
+ if (game.level < (levels.length - 1)) {
+ game.level++;
+ } else {
+ game.level = levels.length - 1;
+ }
+
+ game.loadLevel(game.level);
+ });
+
+ this.loadLevel(this.level);
+ },
+
+ loadLevel: function(level) {
+ level = levels[level] || levels[this.level];
+
+ localStorage.setItem('level', this.level);
+
+ $('#background, #pond').removeClass('wrap').attr('style', '').empty();
+ $('#code').val('');
+
+ $('#level-counter .current').text(this.level + 1);
+ $('#instructions').html(level.instructions);
+
+ $('#before').text(level.before);
+ $('#after').text(level.after);
+
+ var lines = Object.keys(level.style).length;
+ $('#code').height(20 * lines).data("lines", lines);
+
+ var string = level.board;
+ var markup = '';
+ var colors = {
+ 'g': 'green',
+ 'r': 'red',
+ 'y': 'yellow'
+ };
+
+ for (var i = 0; i < string.length; i++) {
+ var c = string.charAt(i);
+ var color = colors[c];
+
+ var lilypad = $('<div/>').addClass('lilypad ' + color).data('color', color);
+ var frog = $('<div/>').addClass('frog ' + color).data('color', color);
+
+ $('<div/>').addClass('bg').css(game.transform()).appendTo(lilypad);
+ $('<div/>').addClass('bg animated pulse infinite').appendTo(frog);
+
+ $('#background').append(lilypad);
+ $('#pond').append(frog);
+ }
+
+ var classes = level.classes;
+
+ if (classes) {
+ for (var rule in classes) {
+ $(rule).addClass(classes[rule]);
+ }
+ }
+
+ var selector = level.selector || '';
+ $('#background ' + selector).css(level.style);
+ },
+
+ check: function(level) {
+ var lilypads = {};
+ var frogs = {};
+ var correct = true;
+
+ $('.frog').each(function() {
+ var key = JSON.stringify($(this).position());
+ var val = $(this).data('color');
+ frogs[key] = val;
+ });
+
+ $('.lilypad').each(function() {
+ var key = JSON.stringify($(this).position());
+ var val = $(this).data('color');
+
+ if (!(key in frogs) || frogs[key] !== val) {
+ correct = false;
+ }
+ });
+
+ if (correct) {
+ ga('send', {
+ hitType: 'event',
+ eventCategory: level.name,
+ eventAction: 'correct',
+ eventLabel: $('#code').val()
+ });
+
+ if (game.level >= levels.length - 1) {
+ game.win();
+ } else {
+ game.level++;
+
+ $('.frog').addClass('animated bounceOutUp');
+
+ setTimeout(function() {
+ game.loadLevel();
+ }, 2500);
+ }
+ } else {
+ ga('send', {
+ hitType: 'event',
+ eventCategory: level.name,
+ eventAction: 'incorrect',
+ eventLabel: $('#code').val()
+ });
+
+ this.tryagain();
+ }
+ },
+
+ tryagain: function() {
+ $('#editor').addClass('animated shake');
+ },
+
+ win: function() {
+ $('#instructions').text('You win! Thanks to your mastery of flexbox, you were able to bring all of the frogs to safety.');
+ },
+
+ transform: function() {
+ var scale = 1 + ((Math.random() / 5) - 0.2);
+ var rotate = 360 * Math.random();
+
+ return {'transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)'};
+ }
+};
+
+$(document).ready(function() {
+ game.start();
+});
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Flexbox Froggy - A game for learning CSS flexbox</title>
+ <link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
+ <link href='https://fonts.googleapis.com/css?family=PT+Sans|Fredoka+One|Source+Code+Pro' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+ <section id="sidebar">
+ <div>
+ <div id="level-counter"><span class="arrow left">◀</span> Level <span class="current">1</span> of <span class="total">1</span> <span class="arrow right">▶</span></div>
+ <h1>Flexbox Froggy</h1>
+ <p id="instructions"></p>
+ <p id="docs"></p>
+ </div>
+ <div id="editor">
+ <div id="css">
+ <div class="line-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>
+ <pre id="before"></pre>
+ <textarea id="code" autofocus></textarea>
+ <pre id="after"></pre>
+ </div>
+ <div id="submit" class="button">Submit</div>
+ </div>
+ <div id="credits">
+ <p>Flexbox Froggy is created by <a href="http://thomaspark.co">Thomas Park</a></p>
+ <p><a href="http://github.com/thomaspark/flexboxfroggy/">GitHub</a> • <a href="https://twitter.com/thomashpark">Twitter</a></p>
+ </div>
+ </section>
+ <section id="view">
+ <div id="board">
+ <div id="pond">
+ </div>
+ <div id="background">
+ </div>
+ </div>
+ </section>
+ <script src="node_modules/jquery/dist/jquery.min.js"></script>
+ <script src="levels.js"></script>
+ <script src="game.js"></script>
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-23019901-13', 'auto');
+ ga('send', 'pageview');
+
+ </script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 62e2d96

Please sign in to comment.