6 ms·
Tower Defense with a twist: all towers must be positioned with CSS Flexbox
- jenshk 6y agoThis is awesome for teaching!
- LinusS1 6y agoExactly, I was just trying to teach someone Flexbox a few days ago. This could've made it a lot more clearer.
- unreal6 6y agoSuch a delightful concept
- rkagerer 6y agoGreat 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 6y agoI 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 6y ago> 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 6y agoThere'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 6y agoThere'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
- swilliamsio 6y agoIf 2 isn't possible, a fast forward button would be a decent alternative.
- kilburn 6y ago> 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_attributes/dir https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...
- banana_giraffe 6y agoI'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.
- tambourine_man 6y agoAnd yet, we can’t make a responsive website https://i.ibb.co/GTFvkWJ/10-AE7-C27-098-A-4653-B7-B0-35267-A1019-A7.jpg https://i.ibb.co/GTFvkWJ/10-AE7-C27-098-A-4653-B7-B0-35267-A...
- dicefordeath 6y agoThis was my immediate thought as well. Hilarious.
- stevehawk 6y agoya i guess everyone enjoying this is using it on a desktop?
- tambourine_man 6y agoThey have no other choice
- schrute 6y agoFlexbox has nothing to do with the responsiveness of a website so I am not sure why you are passively aggressively insulting what he has developed.
- jonsolo 6y agoIt’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.
- hombre_fatal 6y agoIt 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.
- renewiltord 6y agoClever concept. Very cool! Bookmarking it for later.
- dane-pgp 6y agoThe idea of having to defend towers by writing correct CSS reminded me of this classic XKCD: https://xkcd.com/1168/ https://xkcd.com/1168/
- Noumenon72 6y agoFinished 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.
- jtokoph 6y agoOriginal Show HN: https://news.ycombinator.com/item?id=11213475 https://news.ycombinator.com/item?id=11213475
- SCLeo 6y agoI 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 6y agoFlexbox 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/
- deleted 6y ago[deleted]
- xwdv 6y agoDid tower defense games first start in Starcraft maps or was it predated before that?
- lapinot 6y agoBefore, see Rampart from 1990.
- grensley 6y agoAwesome! 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.
- endergen 6y agoEasy Medium Hard CSS
- deleted 6y ago[deleted]
- bilalq 6y agoThis 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.
- wilsonrocks 6y agoReally good! I use flexbox a lot and enjoyed it.
- dependenttypes 6y agoGood 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)
- hengheng 6y agoI love how this defaults to horizontal scrolling on android, with line lengths exceeding screen width by a factor of two.
- zachruss92 6y agoI love this! Tower defense games are my guilty pleasure if I'm being honest.
- tobyhinloopen 6y agoToo 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)
- ourmandave 6y agoSomewhere 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 6y agoCSS Grid has replaced it, but people are too polite to say.
- wa1987 6y agoGrid 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 6y ago> 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 6y agoFor 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 6y ago
- foxhop 6y agoI would play this if it taught me CSS Grid since I'm pretty sure that is the natural evolution of flex box styling : )
- genezeta 6y agoYou might try this one: https://cssgridgarden.com/ https://cssgridgarden.com/ Not Tower Defense and maybe less game-y, but it's nice anyway.
- tda 6y agoThere 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;}
- redlac 6y agoGreat job! This is fun and I learned something too!
- vmception 6y agoDaunting! 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!
- fjmvieira 6y agoAnother 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.