[deleted]
Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
11–20 of 45 posts
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#12Cool game, but switching tabs breaks the game, you lose all points you didn't yet earn.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#13This 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.
Even better: allow using CSS transitions to make moving turrets.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#14Earlier quoted context omitted.
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!
Can someone explain to me why this only happens on linux?
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#15Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#16Hey, 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…
Ah, thanks for the tip. Looking into it.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#17Very 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.
Aye — implementing a "Restart Wave" button as we speak.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#18Hey, 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
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 :)
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#19Hey, 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
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 :)
align-items: center;
justify-content: space-between;
seems to work.
and align-self is mentioned on wave 10.
Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game
#20Earlier quoted context omitted.
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.
Even better: allow using CSS transitions to make moving turrets.
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 ;)