CSSconf EU 2017 | Una Kravets: Let’s Build a CSS Game

[Music] hello thank you so much for having me I'm super super excited to be here this is one of my absolute favorite conferences and this is such a massive and awesome audience so thank you give yourselves all a round of applause I love CSS comps because it honestly feels like this giant family we're all interviews really nerdy things we're all into them together and it really just feels like this big family so I wanted to announce something that I've been working on so the past couple of months almost a year that kind of feels like my baby and this is the only appropriate place to announce it I'm writing a book called the front end developers guidebook I just had to announce up here cuz I love all of you so this is about front-end development everything from soft skills like how to learn about side projects and make time to technical skills all foundations also internationalisation SEO accessibility performance all those things so for doing that for a while I'm working with a publisher is smashing and it'll be out soon there's a lot of practical stuff in this book but in this talk we'll flip that over and we'll end this conference with more of a party mode we're going to write a CSS game but don't worry we'll go over some something for you to learn we'll talk about SAS data structures there's going to be a lot of sass involved in this we heard some really good talks about CSS and JavaScript this is going to be writing functional programs inside of sass itself we're going to kind of flip that script a bit we're going to do some pixel art we're actually going to create some generative pixel art based on things that were writing individually inside of staff so that will be some fun we'll do some functions and loops will talk about grid very briefly we'll learn about some pointer events CSS animation and basically how to crash your web browser because none of these things are really great for production but they're great for making games for having fun for experimenting with CSS so let's meet our cast have you seen these people around these are our lovely organizers and MC is here today and I wanted to kind of bring them in the game I wanted to give him high fives for the awesome job that they did putting this together I was also inspired by Mario so I thought maybe I could get the cast of her game put them into Mario and make some magic happen so we're going to do that I brought them into illustrator first and I mapped out pixel by pixel exactly what I wanted them to look like and I translated them to map so we rehab Paulie Kevin Tim Christina you got Jessica and once this is all said and done if all works out well we will have created this CSS comp high-fives game oh gosh has been going a little crazy so last for eight seconds it counts up our points all of this is done in just CSS I am going to use gulp to essentially just run browser sync so that you're not waiting for me while I'm doing this and also runs off but yeah let's get started this all boils down to CSS and HTML so the first thing we wanted to do is build those characters but those characters are going to take a while doing them pixel by pixel so we'll do a little bit of a simplified demo with a heart first thing we want to do is hook this into the HTML with a clasp we'll call this class pixelize heart I'm using EMA so I just hit tab it creates that for me then I want to open my heart F CSS and get started next thing that we want to do is create a map of color so thus they want to use red and transparent we can map this with a key and a value so we can map this with ofer transparent and then we can use our for red cool so now we know what colors we're going to correlate our pixels to the second thing that we can do is determine the size of the pixels so let's make this 20s a little bit easier to see for all you out there now what we can do is start creating this pixel art I have a map called pixel art it's a variable and I'm going to have multiple maps inside of that map so I'm going to call this map heart and that's going to be a map itself and we're going to create this by adding multiple lines that are included in parentheses determine the number of rows that we have going to have six rows it's going to look something like this and they're going to fill those with the pixels that we're expecting to have trust me there's a method to my madness you can then go through and draw out all these pixels individually like you would see in a heart and I know that you can't see it yet but in a moment I can highlight all these Reds and show you what it's going to look like in a moment so here I am just drawing this out and I could see that I've aired here so I'm going to fix that and really you can just set these colors you can apply multiple colors you can create like stripes if I want to if I could add more colors to the list but when I highlight the Reds you can see very lightly that I've created a heart out of OHS and ours to create this pixel map so we have our heart pixel map but now we need to read through this entire map to pull out those pixels what we're going to be using here is box shadow because box shadow is really easy to hack and it allows us to give an unlimited number of arguments in the property list itself so we can have an unlimited number of arguments and we can place them based on an x and y coordinates from the top left as pixel values so let's just make this let's write that function because we can write functions in that so inside of here I'm going to say we first are going to generate the shadow list so we can create an empty string to begin with and we'll fill that as we go and then we're going to also need to get the road so as I mentioned earlier the roads is going to be the length of the matrix since we have six of these one two three four five six going down that's going to then denote the roads for our entire matrix and we can iterate through those roads to get the actual row number so in SAS we can also use a for-loop at four row from one through the number of rows here so here I'm going to use rows and variable that we just set I'm going to set that row number so it's just going to be row num and then we can use the int value to pull that in to the nth value of the matrix and the row so now we know what the actual row number is that we have landed on now we can filter that again and get the column number the column is going to be at 4:00 call from one through the length of the row number because that means that we're going to go through all nine values that are in that row and get the column value and finally we can see where the dot is so from that we can see if the dot is the end value of the row number in the column so now we know if we are in an R or an O value once we have that we can start building this shadow list of you have so the shadow list then becomes the shadow list this is how you append in SAS plus the values that were pulling from here so we can get the exposition by using size the pixel value that we set us twenty pixels times the column plus me to have a space here for the syntax of drop shadow plus the size times the row and from here we can get the color so we also want to add another space we want to then map guess which is how we access items inside of the map itself we're going to access from the colors map and then use the dot value to pull in either transparent or red now we're converting that from a no earn are to transparent or red we're almost done with this item the shadow list but next we then have to add a comma we have to have a comma between every single item in this list except for the very last item because if the last item has a comma it'll invalidate and it won't show up so we have to do a negated if statement so let's say at if not how is equal to the length of row num which means that we're at the very last item right number nine and rest the very last row so we can say Rho is equal to Rose then we want to add a comma then the shadow list becomes the shadow list plus a comma cool so the last thing I want to do is return a value we have to use at return unquote because currently it is still a string that we have unquote the shadow list and we can finally return a value so nothing is going to appear until we actually use it inside of our div that we created in the page so let's make this an after pseudo element and then apply any of the height and of width first so the height can be the size and the width can be the size and we want to give us a content since it's a after suit helmet this is going to be very fast ESS so I apologize about all of the like improper placement of all these things if you always make sure they're nice and neat and orderly and inside the box and we can use a function on the right hand side of the property so here we'll use our function which is called pixel eyes and we need to map yet because again the heart map is inside of another map so we're going to map get pixel art yep pixel art is our a sort of map of our map map get pixel art and heart and then we're going to send the size value again which is default and it's set globally here so once I save this our heart will appear appears in the screen I somehow didn't mess up that's great the next thing I'm going to do is step in set this I'm going to use this ampersand which acts as an anchor in sass so what will happen here is I can edit pixelized Hart give it some properties and it still has six pies Hart after setup in there I'm going to give this an outline so I can debug this a line 1px solid as you see that this element is not taking up any space on the page because we haven't given it a width or a height and that's not great if you want to use this within our game itself it has to take up some space so first I want to give a special relative oh and I then want to give it a width and height and I'm going to be using that based on the size that we've dynamically created in this nature because we can also set the size so I'm going to give it a height and the height again is the length that matrix times the size so get the pixel size and multiply it by the length of that matrix and in this case the matrix is map get pixel art Hart copy that paste it in there and then height the width is going to be the length of one of those columns so since we're out inside that loop again we can get the size and the length of just one of those columns so we're going to have to map get one of them and use that nth value again to say ends of this matrix and the first column because why not so say that and it is now properly placed but you can see that it's shifted over and the reason why is because black shadow starts at the bottom right corner of the div it starts at the end of it so now we have to shift this up so we can say top of negative size maybe left of negative size and boom our heart is placed inside of the div as we expected based on this heart that we just created out of literally letters on the screen together here so we can then take this idea and open something like I have a character's SCSS where I already did this and I'm going to just uncomment and zoom out of here so you can see what the characters actually look like my vision is forever ruined but it's fine so if I save this and then I open I have a characters file you can see all the characters have appeared out of this generated map and you can dynamically change the colors so like if I wanted to go into here and I wanted to change all of the black to like a red because why not once I save this instantly it'll all change so you can just create this art dynamically in your browser and it's really fun to play with you can also animate this if you're a masochist and want to make your browser run really slowly it wouldn't recommend animating box-shadow but it is an option so the next thing we want to do is keep some score we have our characters but we don't really have our game set so we have to create like our entire game area in here we're going to use Emmet to make this really quick for ourselves I'm going to have a list so just UL and that list is going to have a class of game area and then within that I want to have a couple of list items so I can say that I want to have a list item next to that I want to have an input it's going to be a checkbox so it's going to type equals checkbox this is going to be our click area that we're going to use to sort of make sure that we've counted up these points from once we click we'll count up the points next to that we have a div and it's going to be a character and with Emmet you can just do times three hit tab and now I have this list and within it I have these three list items inside the list item I have an input and I have our character nothing is going to show up until I go through and make sure that I add a little character so here I can say pixel eyes maybe we'll have a Kevin in there we can have three Kevin's or I can mix this up and add like let's add poly here let's add a Christina on our screen and now all of our characters are happy and have appeared and they're ready for high fives also with these boxes you can add a border radius make them round you can make them bigger or smaller based on the pixel size it's four pixels here but it really allows for a variety of options that you can play around with so we also want to add a place for our score to show up here so we can just have an h2 with a score and then inside of that lets get a span with a class of score that will access later to show our points go zoom out there a little you know with this screen here alright so the next thing we want to do is then open a new CSS file just to keep it organized we're going to open our game play s CSS so game plays it's called I've opened this now we need to design this click area so that's not just a small check box over there so we can just quickly edit this maybe give it a position of absolute so that it shows within its parent there we can give it a display:block and then we can do some things like give it an outline so we can debug this this is my favorite way to debug because outline doesn't take any space on the page whereas border does so I have that outlined maybe I want to give it a width of 40 pixels and a height of 40 pixels so you can see it it's currently behind the characters I believe so we need to give it a Z index the index of three could work at this point I'd probably want to create a Z index map and then use that to adjust accordingly so that everything is orderly but like I said we're just going to speed right this game and then here I can do appearance none to get rid of that checkbox this works really well in WebKit and in Chrome does not work in Firefox so you would have to create a span that surrounds your check box style that span and have appearance none on your check not a parent son you have to have a display of nominative checkbox in order to make this work in Firefox so everything else will be identical except for this little quick area I also want to give us a top of like negative 10 pixels and a left of like negative 5 so that it just positions nicely maybe you want to give it a tap of 10 so once I've done that when I click on it now you can't tell that it clicked on it so we need to make sure that there's some kind of feedback mechanism I don't even know that I can hover over it because the cursor hasn't changed so a really nice cursor for this is called grab because it's like a little hand you I don't know if you could see you here basic a little hand hovering here that's a little hand for the high-five so that was good we now know that we're hovering and maybe we want to add a property of if it's checked given like a background of green or something so we know we clicked on it ok cool so we know now what's things what's not we can get rid of this we'll deal with that later we can get rid of this outline great let's count up some points so here we currently have score and we have a span next to it with a class of score that has nothing in it because we haven't provided any value but we can do this with a property called counter increment in CSS counter increment was originally intended for outlines when you have an unlimited amount of data that you're counting up and you want to be able to just increment it up we can use counter increments in our game to check where we have our check boxes and apply the value put it out on the game so inside of score we can give it an after clear element with content and the content that we're spending over that we're pulling some Dom sending over is going to be the counter of a game so once I save this zero will appear because we don't have any points yet on the game and we can mitigate that by adding the rest of the things that matter so the game area needs a counter reset of game we're naming it here and then after that we want to give the Kliq area when it is checked a counter increment of game when I say that now once I've clicked on these you'll see that it's starting to count up our score so counter increment can be used for that if you want to make this game even challenging we can also use a decrement catta increment is won by nature but you can customize it so you can add multiple points negative points and really play this up we want to make it challenging so we do want to make it more challenging not in that way but we want to add a shield because right now I can just click on all of these and count up and I win so let's go back into our index let's you know get rid of some of this stuff I'm going to say that to my clipboard because we want to add a shield inside of our list we still have this unordered list with a class of game area inside of that we still have our list item but instead of having it directly next to the input and click area of the character we want to wrap that inside of a character wrapper so let's say we're going to say dot care sir wrapper and then next to that we want to have a shield so we're going to have a shield plus a character wrapper and maybe we want to have nine of those so once I hit tab now I have my list item with the shield a character wrapper inside of the character wrapper we have our checkbox aka our click area we have our characters and we're ready to go and make this game what it is we also have 9 of them so we can make kind of a grid a 3x3 grid and here I can go through and add pixelized characters let's have all of the Tim's just lines right up know about all the other characters here let's add a Jessica let's add a Christina let's here let's add a Kevin let's see Poli there might be a few multiple multiples so they're all here we have four times in a row but it's fine he likes to give high fives we'll just leave that so they're all kind of on top of each other I'm actually going to change them because it looks looks a little crowded they're all on top of each other we want to arrange them on the screen here so we're going to use some CSS grid fun have you all used CSS grid for how many of you used it I'm seeing like a quarter of you it's really amazing like oh it just gives me the shivers I love CSS grid okay so we have our click area right and the first thing that we want to do is give it a display of grid I'm first going to style the list items so that you can see it and see what's happening here I'm going to give it a background of Dodger blue unlike the papaya whip that Glen's like I am a Dodger blue kind of girl so we have that color I'm going to then go back into our grid and applies the magic nothing is happening yet but when I give it a grid template it's just automatically going to fall into place I want that 3x3 grid so I'm going to just use the fractional unit which says cake up as much of this remaining space as possible within this fractional unit so if I use one it's going to all be even to each other and then I can say I want one two three rows and then I want one two three columns you can also use a repeat property inside of grid to do this but it's a little bit more clear right now if I just do when fr one Fr went too far okay so this isn't moving but I'm wondering what I wrote wrong when I fire over one well let's let's find out as I save this out the the board isn't giving me a background here either let's see if I I spell something wrong what is it click area you're right it's game area that's exactly this is why I love you all you're sitting in front of me awesome so if I give it the correct class name you know live coding who thought something could go wrong it appears powerfully as I expected and then here I can give it a grid gap of say like 20 pixels and only the space between the pixels moves it's like magic nothing on the outside we don't have to work with these like weird end values or last child hacks it just works the way you expect it to and now we're going to do that mysterious second biggest problem of computer science and Center things so we're going to vertically align this with display flex we're going to do a line items Center and we're going to do justify content center here so once I save that all these elements will be kind of aligned within the space we're going to then use some margins here to center this area we're going to give it a width of like a tvw and a height of say a tvw and then we want to do a margin so you're Auto so it's centered inner screen and looks a little bit nicer here cool we've got that now we have this shield so I just pre wrote it because it's just placement background with height absolute positioning but we have it in front of our character so when you click you can't access that hand unless you go a little higher to get that score value up we want to bring the score back into here so let's go ahead and add that back in and when I click up you'll see that I can reach the hand here but not here so we'll needs to go back in to our board or our game play file to make this even harder because we can still tally up these points it's not something of challenging until we make it challenging and we can do that by using some animations so let's go back into this file and add some CSS animations we can use keyframes to do this we're going to say keyframes of move because we don't have to be creative we'll just really quickly come up with a name I'm going to have this go from 0% to 50% because at 60% I'm going to have it alternate and it's just going to go like a little bounce so we're going from 0 to 100 and I'm going to use a transform property to move this in a way that it's going to translate why to move up and down so I'm going to say it's transform translate Y and it's going to go from negative 25 pixels to 25 pixels I'm going to apply this to both the character and the click area this animation which is a move I'm going to say is 0.5 seconds it's going to be forever they're going to be jumping up at us infinite and it's going to be alternating for that bounce and it's going to be moving forward because we want the paint to move forward all right going to save that and now our characters are all jumping up at the same rate ready to give us high-five it is much harder now to click and to grab them while they're up there but it's still kind of weird that our characters are all moving at the same rate here on the screen so we can now use another for loop in sass but instead of doing it inside of our class we're going to generate our classes within the for loop so let's say at 4 we'll use i from 1 through 9 which is the number of characters that we have you can also use a variable for this we'll set a speed and here we can use a sass random function within this to create different animation durations different speeds for our characters so let's use random and we'll do random times like 1.5 and then we have to add the second so that it knows what we're using here for the duration so now we can say we want our list items and we can use end child a selector we're going to interpolate that I variable so we can use it within this class name this class like that we're creating here and inside of that we want to give it the speed so here we're going to say for all the characters and all of the click area within this list item with an end of 1 through 9 we are going to change up the animation duration and overwrite it to be again interpolating that speed variable hit save and now they will all be moving at different rates hope we got an excited Tim and Kevin here mmm maybe I like this 2.5 alright that's a little bit better Tim is still very excited to be playing this game so this is starting to look more like what we're expecting but we still are going to ultimately always be winning because we don't have a time limit yet so let's add a time limit we go back into our index we can then create a class like a stopper class so we'll create a stopper and inside this will have like an h3 that says game over sorry and we'll save that and then we can go into our board I have it here again so I could just uncomment that it's currently just on our page but what this is doing is its styling it so that is being an override of the page it's taking the full width and height getting that background of cyan I'm increasing the font size a little bit for styling purposes but now we want to move this off of the page so we want to do H transform translate Y of negative 100 Z H so it just moves off the page and we want that to eventually appear in when we want thing to move in CSS we have to add an animation so let's add that let's do a keyframe for stopper we'll name the animation stopper and we'll do a from init to here and we can use this value this transform translate why so we wanted to move from negative 100 V H to 0 V H so it goes back to the original location on the page there's kind of like that reverse animation that we heard about before with some of those awesome data visualizations so we're going to apply this to our stopper we're going to say we want to add an animation of stopper make that 0.5 seconds this could also be a variable really great for you're creating style systems to variable eyes your animations they have the same look and feel to them also with your Bezier curves and any kind of animation curve you have there I'm just using linear for now so I'm leaving it at its default and so I have this animation I also on the paint to go forward so it ends as it goes so I save this is pops in but that's a very short game the game is like less than half of a second long so they can use this animation delay property to make our game eight seconds longer or something like that so once i refresh this page it's going to take eight seconds and tell the animation stops working and I want to pull this out into a game link variable so we're going to have a game length be eight seconds and then I can diffuse that and use that and propagate it through the rest so if you have noticed we've lost our score the score is now behind our stopper because we haven't styled it yet an entire score is an h2 don't fight me on this it's just a demo yes you should namespace all of these things but we then want to style at h2 that appears above we're just going to do a z-index here of ten we are going to give it a position:relative and then we're going to also give this an animation we want this to appear but not from negative 100 to zero we want this to appear from zero to negative fifty VH because that way it can pop in and kind of go in with this game over so I haven't applied this yet oh gosh this is at the top of the page I think just title this has to be positioned oh that's why okay so this this needs to be scored we haven't applied this yet we're going to apply it here when we apply this animation you're my favorite person in here right now thank you so here we go we're going to apply the stopper we're going to have it have the same animations laid but maybe we want to add like 0.25 seconds so it occurs a little bit later than the last one and so once we play this refresh after eight seconds the first one will appear after eight point two five seconds the second one will appear and we'll have a nice little pop in effect for this game so that appears that way I want this to continue to look a little nicer so we can do some more things here by applying some um some notifications you've clicked on the characters like right now if I'm playing this game I clicking on the characters they're still moving around you don't really get any feedback the UI of this isn't that great because I don't know that I've really gotten the score and left I look down so we can then go into our click area and say if the click area is checked we want to stop the animation and this is why before when I was applying those animations I applied them to both the click area and the character instead of doing the character wrapper because we're using this click area and it's sibling the div right next to it to apply the stopping so with this check we want to say animation nun we also want to say pointer events nun because that means that it's no longer going to be able to be clicked on you can't unclick you can't remove your score we also are say any character next to this is going to get an animation nun and we want to maybe add a filter so here we can apply like a grayscale filter to it and as we play we can refresh once I have clicked on this eager little person they're hard to click sometimes they they should be stopping so let's debug click area checks animation done pointer events none let's see this theoretically should be stopping but I'm wondering why it's not maybe I'm not clicking on them maybe I am when this happens you have all these things being saved so believe me this usually works I'm going to go to another branch I have which is called step 12 and then I'm going to hit gulp and it's going to all be magically done for me when i refresh I'm going to click that and it's stopping now so it looks like the code is the same I may have done some kind of strange thing I'm going to refresh that I'm going to just close out of it and open board as CSS but yeah maybe I just wrote this wrong anyway as I'm clicking this it's stopping the propagation of the event this character stops moving we now know that we clicked them as they stopped moving that one which is really hard to click we have a SCOR we have our game let's add that heart back and then we created since that heart is an after pseudo element we can go and then just extend the class we've created so we can say add extend dot pixelized heart and when we replay the game a little heart animation a little heart will appear once I've clicked it so I clicked it the heart is there we can even give this a margin top of negative 25 pixels so it appears just on top of that character and we have created here in like 35 minutes a CSS game live on stage with all of your help so thank you it's a difficult game [Applause] [Music] so what I really want you to get from the talk is while you do these things there are so many a CSS properties that you might not use for everything but there are so many uses of them that are creative uses if you go onto code pen you can find through really awesome examples of CSS games you can even play this game if you go to this site you know IM slash CSS comp EU 2017 post your high score let's see how you do you can also fork this from code pen and make your own game you can improve it you can build upon it you can play it and you can make it even better with some of those awesome things that we've learned today thank you so much for having me and thanks for making the web fun and beautiful okay [Applause]

Channel: JSConf

Views: 14,919

Rating: 4.9322033 out of 5

Keywords: Cascading Stylesheets, CSSconf EU, CSS, game design, computer games, game development, experimental game, HTML

Id: WmVH85G59Lk

Length: 33min 33sec (2013 seconds)

Published: Fri Jun 02 2017

Reddit Comments

[u/TwelveButtonsJim]

It's using the check box trick. Maybe because I've seen it a thousand times before, but not really that amazing to me.

What IS really neat is how she uses Sass to make pixel art.

[u/contactlite]

She is so efficient. How does she use shorthand to create the list? How did she write on two rows at the same time?

[u/Rockztar]

Didn't expect to learn so many neat tricks in such a short amount of time. Really impressed with the creativity of it all.

In addition to this, I thought it was insane how she managed to type and speak so fluently at the same time. I get the feeling she must've prepared a ton for this.

Super cool, thanks for posting.

[u/tylerpestell]

When she was making the heart I totally had flash backs to Qbasic and making sprites like that.

http://www.petesqbsite.com/sections/tutorials/tutorials/sprite1.htm

I feel old ...