Tower Defense with a twist: all towers must be positioned with CSS Flexbox | Hacker News Reader

Tower Defense with a twist: all towers must be positioned with CSS Flexbox

flexboxdefense.com

465 pointskissgyorgy47 comments

Great job! Couple suggestions:

1) When roads twist around on themselves, draw a bridge or some other kind of hint to indicate the path invaders will follow (e.g. https://i.imgur.com/t3fuboT.png). In Wave 9 it wasn't clear they'd take the long way through the loop.

2) When the tab goes into the background, pause the game instead of erasing the user's entire tower layout and progress.

Also a general observation / opinion: Does anyone else feel like flexbox syntax is unintuitive? I feel like you could achieve the same thing without rotating axes, and with more consistent naming conventions.

I think the first suggestion is definitely a good idea for those who aren't as familiar with tower defence games, they're not necessarily the most intuitive of games.

Definitely think the second one is a must -- there were a handful of times where I tabbed out and lost progress towards the end of a wave.

I would say flexbox syntax is one of the least intuitive additions to CSS of late. The combination between some properties and values having `flex-` prefixed and some not is always a bit of pain when using it.

Overall though, a great game and a bit of good fun for a Sunday morning!

> for those who aren't as familiar with tower defence games

Is there some universal Tower Defense rule for how they should walk? In the TDs I've played they always take the shortest possible route.

There's usually two types of Tower Defence pathing as far as I've observed over my years (and many games of Tower Defence / Tower Wars!):

1) Large lanes to build in; mobs will take the shortest route from spawn to end point. You often end up making mazes with your buildings in these.

2) Single lanes to build around; mobs must walk the path laid out and these will often include loops where you've got opportunity to build in the centre of. You often end up building close to turns and loops to maximise opportunity for your tower to hit any given mob more than once.

Then some TDs will allow users to "block" the path -- usually in these instances a blocked path will result in mobs actively attacking the structures in the way.

There's also a variant of 1), in which you have a big open space and several waypoints that mobs will visit. The optimal strategy for these TDs is to create a maze, but one that will require the mobs to travel several times through the center of the arena where you place the strong/short distance towers. Gem TD is an example of such TD

If 2 isn't possible, a fast forward button would be a decent alternative.

> Does anyone else feel like flexbox syntax is unintuitive? I feel like you could achieve the same thing without rotating axes, and with more consistent naming conventions.

I also think it is unintuitive. However, I'm pretty sure it was a conscious decision to not leave out non-left-to-right languages.

Notice that "flex-direction" depends on "dir" html attribute [1] and/or the "direction" CSS property. Hence, given the same flex definitions, the layout gets "mirrored" when you translate the page to a right-to-left language (such as arabic), which should work better for that language.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

Finished it and felt like it was perfectly gamified -- used concepts exactly as fast as I was ready to understand them, reused concepts enough that I felt like I had mastered them. Really helpful because I only ever use this property on one thing at a time so I never get practice.

This was really well done! I use flexbox all the time and ended up finishing every wave with a score of 100, but even I learned some stuff. In practice, I've pretty much never used the `order` property even though I've always vaguely been aware of its existence. I've had to use `align-self` on occasion, but it's still something that I rarely touched and would have to lookup or mess around with any time I needed it.

The forced need to use these rules for purposes of the game really helped drill the concepts home and I think I can confidently say that I'm now more comfortable with using flexbox for things without needing to open up documentation or alignment cheatsheets anymore. Nice work! I really appreciate the value this has and will definitely be sharing it with anyone else I know who uses flexbox on a day to day basis.

I think it'd be awesome if you expanded more levels to incorporate concepts like flex-grow/flex-basis and whatnot.

Somewhere down the road, flexbox will be replaced with some other technology.

And I'll come here and repost the article, but with the title: In Defense of Flexbox.

CSS Grid has replaced it, but people are too polite to say.

Grid is not a superset of Flexbox. The former always controls the layout in two dimensions (rows & columns). The latter controls one axis and calculates the layout of elements per flex line.

Some layouts are impossible with Grid but a perfect fit for Flexbox and vice versa.

> Some layouts are impossible

Do you have any links to demonstrate this? I’m starting to use grid more and more, so I’d like to have a little advance knowledge of when I shouldn’t apply it.

For sure! Whipped up a quick pen:

https://codepen.io/willem-aart/pen/oNxwRXY?editors=1100

This is impossible to achieve with CSS Grid.

One might alternatively approach this 'cluster layout' using inline-block elements. However, these elements would then be separated by space characters and the width of the space would be added to any applied margins. These issues could possibly be resolved by resorting to hacks such as setting font-size: 0 on the parent. Not pretty.

On the other hand, when using flexbox, space characters between flex childs are ignored which makes it a good fit for this kind of layout.

It is a quick pen. On the surface brilliant. But I can't imagine a use case in my projects and the faux Latin isn't helping me. Plus the negative margin is Jacky to me although standard fayre in pre Grid days.

I would prefer a more boring but simpler to code world of CSS. However I am going to look into flexbox more. Thanks for your pen!

That layout is reasonable common in at least one scenario: A list of tags with wrapping. If something supports a large number of tags and the textual content of tags can vary significantly in length, then thewy will usually be sized to fit.

On the other hand, that layout hardly needs flexbox, since inline block elements will wrap in much the same way. The vertical equivalent of that layout however would very much require flexbox. However, I'm not sure of the use cases for that.

The idea of having to defend towers by writing correct CSS reminded me of this classic XKCD:

https://xkcd.com/1168/

Original Show HN: https://news.ycombinator.com/item?id=11213475

I used to think programming games cannot actually help people learn. But now I believe, this game might have taught me more than my dozen visits to CSSTricks.

Flexbox really clicked when I went through Flexbox Froggy. They look very similar, I wonder if there is some relation between the 2

https://flexboxfroggy.com/

Another great game to get the ropes of flexbox is Flexbox Zombies (https://mastery.games/flexboxzombies/). It goes all the way from very basic stuff to things most people never bother to learn, like flex-basis and align-content.

I love how this defaults to horizontal scrolling on android, with line lengths exceeding screen width by a factor of two.

There is a bug in the last level. This css works (the path collision detection allows it):

  .tower-group-1 {display: flex;}
  .tower-1-1 {}
  .tower-1-2 {}
  .tower-1-3 {align-self: center;}
  .tower-1-4 {order: -1;}
  .tower-1-5 {order: -1;}

I'm not a HTML person normally, so for me this is bringing back memories of old games designed to teach touch-typing.

It's rather cute, I like it.

Good work! My personal suggestions:

- Get rid of google-analytics.com

- When there is a syntax error do not shake the box, as you have to wait until it is done in order to fix it. (it also shakes the box when you close the help dialog if there is a syntax error)

Awesome! Really good teaching tool. I loved your solution for forcing people to use the often-neglected row-reverse and introducing order.

The real braintwisters start when you introduce flex-wrap, flex-grow, and flex-shrink.

Clever concept. Very cool! Bookmarking it for later.

Daunting!

Flexbox is a little bit muscle memory but always so confusing and offputting to me at first!

Not currently up for the challenge but very fascinating!

I would play this if it taught me CSS Grid since I'm pretty sure that is the natural evolution of flex box styling : )

You might try this one: https://cssgridgarden.com/

Not Tower Defense and maybe less game-y, but it's nice anyway.

Too bad I cannot use it on mobile. The “ok got it” button is out of reach and I cannot scroll to it. (Iphone 11 Pro Max)

Did tower defense games first start in Starcraft maps or was it predated before that?

Before, see Rampart from 1990.

I love this! Tower defense games are my guilty pleasure if I'm being honest.

Great job! This is fun and I learned something too!

Really good! I use flexbox a lot and enjoyed it.

This is awesome for teaching!

Exactly, I was just trying to teach someone Flexbox a few days ago. This could've made it a lot more clearer.

Such a delightful concept

Easy Medium Hard CSS

Reply on news.ycombinator.com