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.
> 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.
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!
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
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.
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.
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.
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.
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.
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.
- 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)
It’s not really an insult. One of the main uses of flexbox is responsive layouts, so this is a valid criticism (if a bit snarky). I also am viewing this on mobile and was sad that the page was much too wide for my phone.
It would be nontrivial to make this mobile friendly and require a lot more work.
The snark doesn't make sense because you don't just get a responsible layout by using flexbox, not even close. It takes a lot of thought and work that OP may have simply decided wasn't worth it.
So insert a “please check this site on a laptop /desktop” warning.
Simply not caring for most of the web (mobile) on a site discussing basic web technology, and one that is particularly useful for responsiveness, is very much snark worthy.
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.