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

http://www.flexboxdefense.com

by ChanningAllen • 10 years ago

243 42 10 years 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

evunveot• 10 years 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

eponeponepon• 10 years ago

Same deal in Iceweasel 41.0 - thought I was missing something crucial!

ChanningAllen10• 10 years ago

Ah, thanks for the tip. Looking into it.

foggy80• 10 years ago

It didn't work in Firefox on Windows 10 either.

ChanningAllen10• 10 years ago

Just put in a fix which works on Mac OS X and should work on Linux as well.

groby_b• 10 years 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• 10 years ago

align-items: center; justify-content: space-between;

seems to work.

and align-self is mentioned on wave 10.

rootlocus• 10 years 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• 10 years ago

This is just awesome! Huge thanks for teaching me flexbox today.

avonwodahs• 10 years ago

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

kearneyandy• 10 years ago

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

ChanningAllen10• 10 years 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• 10 years ago

Even better: allow using CSS transitions to make moving turrets.

Legion• 10 years ago

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

d0m• 10 years 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• 10 years 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• 10 years 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• 10 years 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.

ChanningAllen10• 10 years ago

Aye — implementing a "Restart Wave" button as we speak.

M4v3R• 10 years ago

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

ChanningAllen10• 10 years ago

There's now a "Cancel Wave" button that should address the first of your issues...

Etheryte• 10 years ago

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

rajangdavis• 10 years 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!

ChanningAllen10• 10 years 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• 10 years 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.

wingerlang• 10 years ago

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

nickonline• 10 years 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!

ChanningAllen10• 10 years ago

Fixed!

briantmaurer• 10 years 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• 10 years ago

This is great!!

Vignitus• 10 years ago

Great tutorial !

Rezouce• 10 years ago

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

Flimm• 10 years 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• 10 years 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• 10 years ago

Another fun 'learn flexbox' games is Flexbox Froggy

http://flexboxfroggy.com

reustle• 10 years 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.

ChanningAllen10• 10 years 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.

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

Related Stories