
Tower Defense with a twist: all towers must be positioned with CSS Flexbox - kissgyorgy
http://www.flexboxdefense.com/
======
rkagerer
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](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.

~~~
davidsojevic
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!

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

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

~~~
skocznymroczny
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

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

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

------
ourmandave
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._

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

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

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

~~~
wa1987
For sure! Whipped up a quick pen:

[https://codepen.io/willem-
aart/pen/oNxwRXY?editors=1100](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.

~~~
Theodores
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!

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

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

[https://xkcd.com/1168/](https://xkcd.com/1168/)

------
jtokoph
Original Show HN:
[https://news.ycombinator.com/item?id=11213475](https://news.ycombinator.com/item?id=11213475)

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

~~~
flanbiscuit
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/](https://flexboxfroggy.com/)

------
fjmvieira
Another great game to get the ropes of flexbox is Flexbox Zombies
([https://mastery.games/flexboxzombies/](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.

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

------
tda
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;}

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

------
dependenttypes
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)

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

------
renewiltord
Clever concept. Very cool! Bookmarking it for later.

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

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

~~~
genezeta
You might try this one:
[https://cssgridgarden.com/](https://cssgridgarden.com/)

Not Tower Defense and maybe less _game-y_ , but it's nice anyway.

------
tobyhinloopen
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)

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

~~~
lapinot
Before, see Rampart from 1990.

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

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

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

------
jenshk
This is awesome for teaching!

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

------
unreal6
Such a delightful concept

------
endergen
Easy Medium Hard CSS

