6 ms·

Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

243 points by ChanningAllen 11y ago

ChanningAllen 11y ago
Hey, author here. I've always been a big fan of tower defense games so I thought it would be cool to make an open-source version of the game for teaching basic Flexbox properties. It's also a project that's helped me learn Ember.js. The code is on GitHub: https://github.com/channingallen/tower-defense https://github.com/channingallen/tower-defense
- evunveot 11y ago
  In Firefox on Linux (44.0.2), Wave 3 don't seem to be working as intended because for the second tower group you've got: div.board__tower-group div.tower-group__tower div.tower-group__tower div.board__tower-group--body and, even though it's `position:absolute`, Firefox is taking that third child into account when applying `justify-content:space-between`, placing the first tower on the left and the second in the center instead of on the right. Edit: Here's the Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=874718 https://bugzilla.mozilla.org/show_bug.cgi?id=874718
  - eponeponepon 11y ago
    Same deal in Iceweasel 41.0 - thought I was missing something crucial!
    - sethish 11y ago
      Can someone explain to me why this only happens on linux?
      - labster 11y ago
        No, because it's not a Linux only bug. There's a Mac OS X report below, which I can confirm.
  - ChanningAllen 11y ago
    Ah, thanks for the tip. Looking into it.
  - foggy80 11y ago
    It didn't work in Firefox on Windows 10 either.
  - ChanningAllen 11y ago
    Just put in a fix which works on Mac OS X and should work on Linux as well.
- groby_b 11y ago
  Unless I'm crazy, wave 6 requires align-self on the individual items, which is not mentioned in the help boxes, ever. Or am I missing something, and not adjusting individual items would still work there? Edit: Yeah, I'm missing something. /headdesk :)
  - littleajax 11y ago
    align-items: center; justify-content: space-between; seems to work. and align-self is mentioned on wave 10.
- rootlocus 11y ago
  A suggestion: don't wiggle the editor when there's a problem, or move the help icon outside. I wanted to check the "?" icon a couple of times, but couldn't click it because it was wiggling with the editor. It's really frustrating.
- molsson 11y ago
  This is just awesome! Huge thanks for teaching me flexbox today.
avonwodahs 11y ago
Definitely helpful to understanding flexbox. It took me a while to notice the help '?' icon to bring the tooltip back up.
kearneyandy 11y ago
This is awesome. I'd love to be able to move the towers around during the waves for some more challenging levels.
- ChanningAllen 11y ago
  Thanks! Yep, the idea was to get about 10 or so basic learning levels in and then to add some "challenge" levels, with features like the one you mentioned.
  - bburky 11y ago
    Even better: allow using CSS transitions to make moving turrets.
    - benjaminjt 11y ago
      Good point actually; you could extend this with a number of properties to make an awesome learn-while-you-play td game for CSS more generally... keep us posted ;)
Legion 11y ago
On Wave 3, "justify-content: space-between" appears to position incorrectly on Firefox 44 on OS X: http://i.imgur.com/nx6hROH.png http://i.imgur.com/nx6hROH.png On Chrome, it positions the turrets on the edges as expected. EDIT: Looks like evunveot noticed the same in Linux and linked to the Firefox bug.
d0m 11y ago
Awesome tutorial! I feel like flexbox could have been so much simpler.. I mean, there's a reason why there are so many "Learn flexbox tutorial" out there. Like, "justify-content: flex-end" won't win any API award.
- yoklov 11y ago
  It's awkward because CSS offers no good way to talk about the relationship between two things (it's very much 'one thing at a time'), whereas relationships between things are pretty much all layout is about.
- progx 11y ago
  And why not a simple "end" instead of "flex-end"... less to type and in context of "display: flex" obvious. We will never know, but millions of developers must type it for years.
jtokoph 11y ago
Very cool! Would love to be able to stop mid wave and tweak a mistake instead of waiting for the whole thing to finish/refresh. Sucks having to retype my rules all over again too.
- ChanningAllen 11y ago
  Aye — implementing a "Restart Wave" button as we speak.
  - M4v3R 11y ago
    While you're at it, a "Speed up" button would be handy as well :).
- ChanningAllen 11y ago
  There's now a "Cancel Wave" button that should address the first of your issues...
deleted 11y ago
[deleted]
Etheryte 11y ago
Cool game, but switching tabs breaks the game, you lose all points you didn't yet earn.
rajangdavis 11y ago
Sometimes, the box where you input the CSS rules will shake when you click on the hint box. Not sure if this is supposed to happen or not, but it was unexpected from me. Otherwise, I thought this was pretty neat and very informative. Good job and thanks for sharing!
- ChanningAllen 11y ago
  The input boxes run a validation check whenever the user presses enter or focuses out of them; if this check determines the input value to be invalid, the stylesheet will shake. In your case, you were probably typing some input before you clicked the hint box, thus focusing out of the input and invoking the validation check.
  - unholiness 11y ago
    Okay, but this validation happens instead of opening the help dialog. Whatever event triggers there eats the button click. When typing an incorrect input, the first place a user will go to fix it is the help. It's a bit of a catch-22 when the help button will only help you after you fix your typos.
    - ChanningAllen 11y ago
      Hm, I see what you mean. Others have brought this up as well. I'll move the fix up in the queue.
wingerlang 11y ago
Pretty cool. Buggy when changing tabs and I wish there were a speedup button (I don't like tower defence games).
nickonline 11y ago
This is fantastic as I've just started learning flex-boxes, I did have one problem using it, there's no stop button once the circles start flowing!
- ChanningAllen 11y ago
  Fixed!
briantmaurer 11y ago
This is great. I have been meaning to learn the CSS flex box model and thanks to this game it took only a few minutes!
cristianjd 11y ago
This is great!!
Vignitus 11y ago
Great tutorial !
Rezouce 11y ago
It's a fun way to learn flexbox. You should think to add an autocomplete helper when typing the flexbox properties.
Flimm 11y ago
This is cool, I'm looking forwarding to the next waves to be released, as I would love to try other properties like flex-grow and flex-shrink.
song 11y ago
Really fun, I enjoyed playing all the waves... Would definitely be cool to have more challenge levels with maybe css transitions to move the tower while the wave is happening :-)
evolve2k 11y ago
Another fun 'learn flexbox' games is Flexbox Froggy http://flexboxfroggy.com http://flexboxfroggy.com
reustle 11y ago
This is fantastic! I would love to be able to bring back the helpful modal at the beginning of each turn, as a refresher on the options.
- ChanningAllen 11y ago
  There is a "?" button in the top right of every stylesheet that brings the modal back up, but I'm also in the process of adding tool tips that are more obvious and always available.
deleted 11y ago
[deleted]

243 points by ChanningAllen 11y ago

Hey, author here. I've always been a big fan of tower defense games so I thought it would be cool to make an open-source version of the game for teaching basic Flexbox properties. It's also a project that's helped me learn Ember.js. The code is on GitHub: https://github.com/channingallen/tower-defense https://github.com/channingallen/tower-defense

evunveot 11y ago
In Firefox on Linux (44.0.2), Wave 3 don't seem to be working as intended because for the second tower group you've got: div.board__tower-group div.tower-group__tower div.tower-group__tower div.board__tower-group--body and, even though it's `position:absolute`, Firefox is taking that third child into account when applying `justify-content:space-between`, placing the first tower on the left and the second in the center instead of on the right. Edit: Here's the Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=874718 https://bugzilla.mozilla.org/show_bug.cgi?id=874718
- eponeponepon 11y ago
  Same deal in Iceweasel 41.0 - thought I was missing something crucial!
  - sethish 11y ago
    Can someone explain to me why this only happens on linux?
    - labster 11y ago
      No, because it's not a Linux only bug. There's a Mac OS X report below, which I can confirm.
- ChanningAllen 11y ago
  Ah, thanks for the tip. Looking into it.
- foggy80 11y ago
  It didn't work in Firefox on Windows 10 either.
- ChanningAllen 11y ago
  Just put in a fix which works on Mac OS X and should work on Linux as well.
groby_b 11y ago
Unless I'm crazy, wave 6 requires align-self on the individual items, which is not mentioned in the help boxes, ever. Or am I missing something, and not adjusting individual items would still work there? Edit: Yeah, I'm missing something. /headdesk :)
- littleajax 11y ago
  align-items: center; justify-content: space-between; seems to work. and align-self is mentioned on wave 10.
rootlocus 11y ago
A suggestion: don't wiggle the editor when there's a problem, or move the help icon outside. I wanted to check the "?" icon a couple of times, but couldn't click it because it was wiggling with the editor. It's really frustrating.
molsson 11y ago
This is just awesome! Huge thanks for teaching me flexbox today.

avonwodahs 11y ago

Definitely helpful to understanding flexbox. It took me a while to notice the help '?' icon to bring the tooltip back up.

kearneyandy 11y ago

This is awesome. I'd love to be able to move the towers around during the waves for some more challenging levels.

ChanningAllen 11y ago
Thanks! Yep, the idea was to get about 10 or so basic learning levels in and then to add some "challenge" levels, with features like the one you mentioned.
- bburky 11y ago
  Even better: allow using CSS transitions to make moving turrets.
  - benjaminjt 11y ago
    Good point actually; you could extend this with a number of properties to make an awesome learn-while-you-play td game for CSS more generally... keep us posted ;)

Legion 11y ago

On Wave 3, "justify-content: space-between" appears to position incorrectly on Firefox 44 on OS X: http://i.imgur.com/nx6hROH.png http://i.imgur.com/nx6hROH.png On Chrome, it positions the turrets on the edges as expected. EDIT: Looks like evunveot noticed the same in Linux and linked to the Firefox bug.

d0m 11y ago

Awesome tutorial! I feel like flexbox could have been so much simpler.. I mean, there's a reason why there are so many "Learn flexbox tutorial" out there. Like, "justify-content: flex-end" won't win any API award.

yoklov 11y ago
It's awkward because CSS offers no good way to talk about the relationship between two things (it's very much 'one thing at a time'), whereas relationships between things are pretty much all layout is about.
progx 11y ago
And why not a simple "end" instead of "flex-end"... less to type and in context of "display: flex" obvious. We will never know, but millions of developers must type it for years.

jtokoph 11y ago

Very cool! Would love to be able to stop mid wave and tweak a mistake instead of waiting for the whole thing to finish/refresh. Sucks having to retype my rules all over again too.

ChanningAllen 11y ago
Aye — implementing a "Restart Wave" button as we speak.
- M4v3R 11y ago
  While you're at it, a "Speed up" button would be handy as well :).
ChanningAllen 11y ago
There's now a "Cancel Wave" button that should address the first of your issues...

deleted 11y ago

[deleted]

Etheryte 11y ago

Cool game, but switching tabs breaks the game, you lose all points you didn't yet earn.

rajangdavis 11y ago

Sometimes, the box where you input the CSS rules will shake when you click on the hint box. Not sure if this is supposed to happen or not, but it was unexpected from me. Otherwise, I thought this was pretty neat and very informative. Good job and thanks for sharing!

ChanningAllen 11y ago
The input boxes run a validation check whenever the user presses enter or focuses out of them; if this check determines the input value to be invalid, the stylesheet will shake. In your case, you were probably typing some input before you clicked the hint box, thus focusing out of the input and invoking the validation check.
- unholiness 11y ago
  Okay, but this validation happens instead of opening the help dialog. Whatever event triggers there eats the button click. When typing an incorrect input, the first place a user will go to fix it is the help. It's a bit of a catch-22 when the help button will only help you after you fix your typos.
  - ChanningAllen 11y ago
    Hm, I see what you mean. Others have brought this up as well. I'll move the fix up in the queue.

wingerlang 11y ago

Pretty cool. Buggy when changing tabs and I wish there were a speedup button (I don't like tower defence games).

nickonline 11y ago

This is fantastic as I've just started learning flex-boxes, I did have one problem using it, there's no stop button once the circles start flowing!

ChanningAllen 11y ago
Fixed!

briantmaurer 11y ago

This is great. I have been meaning to learn the CSS flex box model and thanks to this game it took only a few minutes!

cristianjd 11y ago

This is great!!

Vignitus 11y ago

Great tutorial !

Rezouce 11y ago

It's a fun way to learn flexbox. You should think to add an autocomplete helper when typing the flexbox properties.

Flimm 11y ago

This is cool, I'm looking forwarding to the next waves to be released, as I would love to try other properties like flex-grow and flex-shrink.

song 11y ago

Really fun, I enjoyed playing all the waves... Would definitely be cool to have more challenge levels with maybe css transitions to move the tower while the wave is happening :-)

evolve2k 11y ago

Another fun 'learn flexbox' games is Flexbox Froggy http://flexboxfroggy.com http://flexboxfroggy.com

reustle 11y ago

This is fantastic! I would love to be able to bring back the helpful modal at the beginning of each turn, as a refresher on the options.

ChanningAllen 11y ago
There is a "?" button in the top right of every stylesheet that brings the modal back up, but I'm also in the process of adding tool tips that are more obvious and always available.

deleted 11y ago

[deleted]