
Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game - ChanningAllen
http://www.flexboxdefense.com
======
ChanningAllen
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
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
Same deal in Iceweasel 41.0 - thought I was missing something crucial!

~~~
sethish
Can someone explain to me why this only happens on linux?

~~~
labster
No, because it's not a Linux only bug. There's a Mac OS X report below, which
I can confirm.

------
jtokoph
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
Aye — implementing a "Restart Wave" button as we speak.

~~~
M4v3R
While you're at it, a "Speed up" button would be handy as well :).

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

------
Legion
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
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.

~~~
progx
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.

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

------
evolve2k
Another fun 'learn flexbox' games is Flexbox Froggy

[http://flexboxfroggy.com](http://flexboxfroggy.com)

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

~~~
ChanningAllen
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
Even better: allow using CSS transitions to make moving turrets.

~~~
benjaminjt
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 ;)

------
rajangdavis
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
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
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
Hm, I see what you mean. Others have brought this up as well. I'll move the
fix up in the queue.

------
song
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 :-)

------
nickonline
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
Fixed!

------
Flimm
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.

------
reustle
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
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.

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

------
briantmaurer
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!

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

------
Vignitus
Great tutorial !

------
cristianjd
This is great!!

