Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
1–10 of 45 posts
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#2Hey, 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
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#3Definitely helpful to understanding flexbox. It took me a while to notice the help '?' icon to bring the tooltip back up.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#4This is awesome. I'd love to be able to move the towers around during the waves for some more challenging levels.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#5Hey, 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
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
Edit: Here's the Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=874718
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#6On Wave 3, "justify-content: space-between" appears to position incorrectly on Firefox 44 on OS X: 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.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#7This is awesome. I'd love to be able to move the towers around during the waves for some more challenging levels.
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.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#8Awesome 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.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#9Very 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.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#10Hey, 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
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 cente…
Same deal in Iceweasel 41.0 - thought I was missing something crucial!