Tower Defense with a twist: all towers must be positioned with CSS Flexbox(flexboxdefense.com)

465 pointsby kissgyorgy6 tahun yang lalu47 comments

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

http://www.flexboxdefense.com/

53 comments

rkagerer6 tahun yang lalu

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.

davidsojevic6 tahun yang lalu

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!

Kiro6 tahun yang lalu

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

davidsojevic6 tahun yang lalu

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.

skocznymroczny6 tahun yang lalu

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

swilliamsio6 tahun yang lalu

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

kilburn6 tahun yang lalu

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

Noumenon726 tahun yang lalu

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.

bilalq6 tahun yang lalu

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.

ourmandave6 tahun yang lalu

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.

Theodores6 tahun yang lalu

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

wa19876 tahun yang lalu

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.

shepmaster6 tahun yang lalu

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

wa19876 tahun yang lalu

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.

Theodores6 tahun yang lalu

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!

jsmith456 tahun yang lalu

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-pgp6 tahun yang lalu

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

https://xkcd.com/1168/

jtokoph6 tahun yang lalu

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

SCLeo6 tahun yang lalu

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.

flanbiscuit6 tahun yang lalu

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/

[deleted]6 tahun yang lalu

fjmvieira6 tahun yang lalu

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.

hengheng6 tahun yang lalu

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

tda6 tahun yang lalu

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_giraffe6 tahun yang lalu

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.

dependenttypes6 tahun yang lalu

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)

grensley6 tahun yang lalu

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.

renewiltord6 tahun yang lalu

Clever concept. Very cool! Bookmarking it for later.

vmception6 tahun yang lalu

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!

foxhop6 tahun yang lalu

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

genezeta6 tahun yang lalu

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

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

tobyhinloopen6 tahun yang lalu

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)

xwdv6 tahun yang lalu

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

lapinot6 tahun yang lalu

Before, see Rampart from 1990.

[deleted]6 tahun yang lalu

zachruss926 tahun yang lalu

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

redlac6 tahun yang lalu

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

wilsonrocks6 tahun yang lalu

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

jenshk6 tahun yang lalu

This is awesome for teaching!

LinusS16 tahun yang lalu

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

unreal66 tahun yang lalu

Such a delightful concept

endergen6 tahun yang lalu

Easy Medium Hard CSS

tambourine_man6 tahun yang lalu

(4)