 Hi there, my friend and friends. Some people say that CSS isn't a programming language, but there's a whole niche out there of CSS only games. And I think if you can make these things with CSS, then maybe it is more of a programming language than you're giving it credit for. And honestly, people say I know what I'm doing with CSS, but some of these things are absolutely incredible. I've seen a few and actually what gave me the idea for this entire thing in the first place was did an interview with Ben Evans and he talked about creating this, just like this 3D maze that you can go through and walk and it's really, really cool. And you get to another part and eventually go down and stuff like that. And so I wanted to, I haven't done a reaction video in a long time to some of the crazy stuff people have made. And then I found this site 15 plus CSS games on freefrontend.com, I'll link it down below. So this one, I think I might have seen this one before because I see a lot of the stuff. This is by Jay who made this connect for in CSS only. You can see there's no JavaScript going on. It's all just some CSS and we can move this around and let's just drop there. Let's just do this really fast to try and make something, right? All right, here we go. And do we get a connect for? I get a connect for even the diagonal. I assume the up in the sides would be easy, but there we go. A fully sort of 3D-ish connect for with CSS only. I don't even know, lots of check boxes, I'm guessing. Usually on these, like yeah, it's gonna be pretty complicated. We're not gonna dive into how these work. We're just gonna be in awe of, like even making this, I would in 3D, the board is already good enough. Then making it work, who knows? All right, up next we have this one loading in, which is by Timani Fiff, who I think I forgot to get that give Jay a heart on that last one. So we're gonna give him a heart on that one. CSS only puzzle based on that original image. As usually should start with the corner pieces, right? Isn't that the trick to puzzles? Look at this, it just works. I'm just good at the puzzle. I don't know if I dropped something in the wrong spot. Oh, I got it in the right spot by accident. I think if I put it in the wrong spot, it won't go. So it only like drops in if it's in the right spot. Again, how does it know if it's in the right spot or not? I don't know, like what? To me, like some of this, I could sort of understand how you would do it, but how does it know if it's in the right spot? I was close, so it dropped it there. All right, we're almost at the end here. It took me longer than I want to admit. And there we go, the puzzle is done. That's really, really cool. I'm impressed. No idea how it knows to be in the right spot. Good job to many. I have no idea. All right, here we're getting into, this is Shamrindi. I hope I said your name right, we're in Minesweeper. I mean, come on, guys, it's getting timed. Is that how many mines there are? I can make, okay, there's definitely one here. I'm guessing I can't right click, but maybe I can select that, ha ha, and then I can dig with that. Okay, so let's just flag where we know there's going to be some. Oh, here it's keeping, it is keeping track of how many flags I've put down as well. Oh, no. I was just trying to clear a bit more space. Oh, I want to know what happens if I win, but click to try again, okay. Isn't this one of those ones where I just have to guess? Or am I just not good enough at Minesweeper to know? Yeah, it could be either one of those and either one of those, but there's only one left. So it has to be here. Yes, I did it. Yes, cool. That's awesome. Two minutes, eight seconds. That's not very good. I used to be better at Minesweeper when it was the only game on my computer when I was young. Really cool. And I don't know how, again, I have no idea. Oh, medium, you can change the difficulty. Check that out. Medium difficulty, 16 by 16, takes a long time and is slow to play. But you can set that up, you can change how many mines there are. Oh my goodness. And then it's using SAS to loop through things and all of that, well, it's just, it compiles to normal CSS. Match, okay, so if you update this, you wanna match here and then everything will just work and they're using Hamel as well just to build everything much faster. But, awesome. All right, John Slater has made space invaders with CSS only. Let's see, press to play. Now this is one of the limitations with CSS only. Oh, we don't, so, hmm, I don't have a bullet flying, but I'm definitely hitting or sometimes missing because they're not where I would be. This is usually what the limitation is. Oh, can I get that guy or is he gonna shoot at me? I don't know. Spam, spams, aw, he got blocked. Oh, I got him, okay, cool. And if I shoot here, oh, it does break my wall. So they're not shooting at me as far as I can tell. I bet you there'd be a, I don't know if there'd be a way, but it's still working and it seems to, I don't know how they're tracking what I'm shooting and like it's clearly looking if there's a line that I can shoot up through, but this is usually like, I can't do keyboard is what I was trying to get to originally. I sort of, I'm gonna die here. Actually, I'm just curious what happens if I die. We'll just keep shooting aliens. It's keeping track of my score too, which is really cool. I don't know how this, there's a few things like that, like keeping tracks of scores. I have no idea how, oh, oh, oh, oh, my wall's disappeared because the aliens got too close. So there's, you know, some interesting stuff going on here. No, okay. So we'll let them get one more lower down and see, oh, there we go. They landed, try again. Cool. Really, like, I mean, we have space invaders and CSS guys. It's not a programming language, right? I don't want the comment section of this just to be like people being pedantic, please. I'm being, maybe I'm enticing it a little bit by saying CSS is a programming language. I know some people will immediately without even watching this, maybe get mad at me, but you know, don't be like that. Oh my goodness. Hey Lee has made duck hunt in CSS only. Oh my, oh, oh, it's like classic duck hunt too with the flash of the whole screen and everything. Look at that. Oh wait, wait, if I shoot it, let's try and shoot it on this side. Okay. I just want to see is the dog come up. How, how do you do that? How does it know where it is? How do you keep track of where the duck is? How do you, I almost, oh, it got, it got away and it laughed at me even. The only thing I can think of with this is it's tracking. There's like a CSS animation running. And then when I shoot it, it gets like the checked so it follows another animation based on that point. And then the dog coming up with it might be linked to that situation, like that same part of the animation or something. That's the only thing I can think of for that. That's so fun. I'm suitably impressed and also very happy because I love duck hunt, but really cool. The caretaker, I pure CSS horror puzzle game. Hopefully it's not too violent. Let's zoom back out. The caretaker, look at this. It's even awesome right now. We got a loading screen, no JavaScript. The CSS for this is massive. They're loading it externally because it's over a, oh, there's over a one meg of CSS. Oh my goodness. They're using SAS to pre-compile it will not, so you can look at it here if you want. I'm not even, how many lines of CSS is, oh my goodness. Okay. Oh, did I, I broke it because I resize. Oh, but it readjusted. Okay, cool. So it's even responsive. This is like, we have a storyline going and everything. Can I interact? Oh, look, it's like a new guy. This is storage. Make sure you keep things in order. If you need to take anything specific, make sure you make a note of it so we can restock. How have I never seen this before? Lock tight, looks like some kind of security lockdown. So this is like, I mean, this could be done with checkboxes, I think. So like, say there's a checkbox on that so it's showing me the look type thing. And maybe there's even like that attributes on it to like define what different things are. The clock stopped working at 10, 10. The only thing I can think of for that, there's nothing here I need right now. Maybe some painkillers wouldn't go amiss. This is incredible. I wanna play this more. We need a key to get through the door. It's just a classic like point and click adventure. This is amazing. I don't even wanna know how much time this took to create. This is where like we need a key so clearly we can pick stuff up at one point. That clock's working. Can I go through this door? No, we need a key card for that door thing. I don't know. I'm not gonna play this for too long just cause I feel like we'd be on like a three hour. I'm gonna do like a live stream of trying to beat this or something maybe one day. Can I go through that door? No, okay. I didn't think so, but as they go, that would be a little bit too easy. This one I think from like a technical perspective, but the drawings, I just thought of that. The drawings on everything. How's he doing the art? I don't even know. What? Oh yeah, he's loading. I scrolled down and I was like, why is there no other CSS? I forgot that it's external. I'm curious how he did the art. If it's all drawn with CSS or if, cause if it's all drawn with CSS, the grainy effect definitely is like an animation that's on top that's just giving us something there, but I'm very curious on how the rest of the art was done. If it's just like an image that he created and we're sort of using that image, I don't know, but the effort and time that must have gone into this and just like hard coding so much of it. Wow, it's really, yeah. Jamie, how did I never see this before? This is really cool. All right, this one's by Ben Evans. I have seen this one before, so it's, but I do want to look at it cause I haven't been able to beat it. Basically I have to click and even in my interview with Ben, which I'll link down below, he talked about like how we had to come up with all the different combinations of stuff you could do here and he sort of had to start over again. But basically you click to add pieces and then click again to remove pieces, but you have to turn it into a lighthouse before nightfall. And if you get it to turn into a lighthouse, then you win. And if you don't get it to be a lighthouse, then you lose and you can see the sun's coming down. I'm not sure, is this my current combination? Yeah, okay. There's like the different combinations that seem to be going on. Maybe I could use that as a bit of a puzzle piece to help me, but I don't know. I have no idea how to make the lighthouse. Where I live now, I'm in Nova Scotia now. There's lots of lighthouses. I'm trying to think what they look like. Or like what would, right? Like, I can't figure it out. Maybe it's better if I don't beat it cause we don't want to like show the answer, right? There's too many combinations. I have no idea. I had it like, it just, I had it like completely. Oh, it's all wood now? I don't know. I had something that was different and I clicked in the whole, like there it all shifted. Now we have a castle. Where'd the castle come from? It had completely shifted. And then I was like, oh, I think I'm getting close. And then game over. I love it. I'm afraid we have some bad news. The ship has crashed into your beautiful island. Everybody is dead. You should build a lighthouse. Thank you, Ben. All right, there's two here by Alvaro. I'm going to look at the rock, paper, scissors, but he has another one that's like, what's it called? Hangman, or we called it Plankman. I know Alvaro is a CSS genius as well and he's made a lot of CSS only games. Rock, paper, scissors, paper. I won, nice. Okay, I'm on the right side. I was like, that's not paper, I'm on the right side. Refresh round. Rock. Computer wins, it took paper. Oh, we can just keep going. Cool. I don't know how this works either. Like, if I keep clicking, it's going to keep changing. It's not even cycling. It's not random. It knows which one is which. There's always these things where there's like, these simple sort of games or things that people put in their portfolios, especially very early on. Rock, paper, scissors is one of them that I often see. But if you did a rock, paper, scissors that is fully functional with CSS only, that might get someone's attention over using a bit of JavaScript for it. Yeah, really cool. Alvaro has also done a tic-tac-toe. I've seen a few tic-tac-toes, so we won't go into that one, but really cool. And again, that's sort of like Jay with the logic of like the dropping and then knowing who won somehow. That's like the hard part is like, okay, some of these things I get, then like, how do you create these win states, you know? All right, I got this one. It's another adventure game by Jamie Coulter. I think it's Coulter. The mine, a Node.js adventure game. I didn't want to like get too many repeating types of games for this, but adventure games, I'm a bit of a sucker for. And so I'm just curious, and the art looked really good. And it says it's using a seven-year-old technique. Oh, look, we have our backpack with an apple in it. So we have an inventory, nothing useful here. So a little bit of the same idea, maybe. But this time we can actually, how many lines of CSS just for fun? That's not even that bad. 1,600 lines, strange note. Did I get the note? And then you get the note in your inventory. So I have the healthy snack. Okay, I don't know if I can use them. I need a tool to get past this. I don't have a tool. So this is a simple, okay, just to go back here. The logic behind this is actually relatively simple. It uses a seven-year-old technique by clicking on an arrow. It checks the relevant input, and then using checked pseudo-selector, we can traverse the DOM. The correct amount of iterations and shift the entire viewport a segment over. This works entirely the same way, except instead when we click down, we're actually checking the segment below. Get it, but I still wouldn't be able, and then, okay, it's telling me that, here, nothing useful, damn, I was hoping to get the tool. Can I get the mushroom? No. So what I don't get then, I'm adding stuff to my inventory. Did I get any junk? I got a plank. I don't know what I would do with a plank. If I only had some dynamite, this is like classic adventure game where it's sort of hinting at you, the types of stuff that you need. Oh, we got a tool, a pickaxe. Ha, I got it. Okay, so there's the pickaxe. Because I had the pickaxe, we were able to break that. So they're keeping track, oh, and we got the... Oh, okay, so I was somewhere else that I probably didn't record, but I edited it out, I'm guessing, but there was a thing where it was like, something probably blows this up, but I think I just blew it up by clicking on that. So there's so much to keep track of this, and I love the style of art here. And again, I don't know how they made the art. That's the other thing. I guess, again, it might be a really big image or something, but really awesome. I don't want to get sucked into doing this. I've been recording this for way too long already. All right, here's one by Wuna Kravitz, which I think might... This is probably similar to the plank. Why did I, why did my turn end? Oh, whoa, whoa, that one's fast. I like the slow ones better. Do I have a timer? Oh, I have eight seconds. You have exactly eight seconds to do it. Okay, so that's using an animation. After eight seconds, they're gonna cover... There's another animation that's gonna come in with something on top. That's not too... I guess this one's checkboxes probably, actually, and everything's being animated. And as long as you're able to click the checkbox, I think it's working. This one, I think I understand. But still really cool. And I loved these end screens and stuff like this. Yeah, I think that must just be on an animation. I think I figured that one out. And it just gives me a little bit of confidence that I can understand a little bit of something that's happening in some of these. But there's a whole bunch more here that if you do wanna check them out, I'll put the link to this in the description because there is one other really cool one that I wanna show you, which is this right here, which is a CSS maze. And this is by Amit Sheen. So you go on top of here, we get a maze, if I hit the wall, oops, you hit the wall, it's finished. If I go back, it works. And if I get to the green one... Crap, one second. And there, I think I'm gonna make it this time. If I get to the green one, you did it. And you have a win state, and then you go back and you can reset it all. And if you wanna have an idea of how this is possible or just some other crazy CSS 3D magic as well, you might know Amit from videos he's done with me, but he also has just started his own YouTube channel. He's live streaming. He live stream creating this. So you can actually watch how he did this. And as you can see here, the replay is right there, but he's also done lots of other 3D craziness. This one was mind blowing. I don't know how he did it while I watched it, but so I sort of have an idea, but it's still awesome and incredible. So I definitely would recommend checking out Amit's channel and he's done some awesome stuff. But yeah, if you wanna get a bit of a behind the scenes on how the games are made, there is that. Also, as I mentioned, Ben Evans has a YouTube channel. I'll link to that in the description. He's there. It sort of gives you a little bit of an idea of the amount of work that goes into some of the crazy things he's building as well. So definitely go check out Amit's channel and Ben's channel. And there's probably some other people's channels that have done these things. If I didn't include the Mongo code links all down below. And so yeah, next time anybody's tells you CSS is not a programming language, maybe just link them over to this video. And if you just wanna get them a little bit angry or at you. And yeah, with that, I guess I wanna thank my enablers of awesome Andrew, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.