Making Games with Javascript and React

Howdy Folks I'm Mark I make stuff and today we're going to be talking about making games with JavaScript and react WHY games you ask well actually you're not asking have you ever noticed that when people say people often ask me it's almost always a lie just to fit the format of what they're saying anyway I make them because they're a great creative Outlet I've made games ever since I was a little kid in basic on a TRS-80 games are fun to make and hopefully they're fun to play and maybe just maybe people might enjoy playing your game most importantly though and really the focus of what we're going to be talking about today games are a great learning opportunity as a software engineer you're constantly making side projects to expand your skill set or to sharpen existing skills and for me personally if I'm working on a project based on a tutorial or I work through a small sample project I don't feel like it often sinks into my bones the way it does if I build a project all the way through to production and get it in front of people people who might ask for changes or notice bugs and the great thing about making a game of course is that there is an incentive to take that project all the way to production so you can share it with your friends and other people on the internet and they have an incentive to play it because hopefully it's fun and that leads me to a disclaimer I'm going to be talking about my own personal experiences with game development and react I am not going to be telling you how to do things as if there's only one way to do it another thing too if you look at your old code and from a couple of years ago as I've had to do in preparing for this talk and you see stuff that maybe you're a little embarrassed by because you have a better idea about how to write that code now to borrow an old shampoo commercial that's the tingle that lets you know it's working you're learning you're doing what you're supposed to do there's no reason to feel embarrassed now it's a free country you can feel embarrassed if you want to but you don't have to end of disclaimer back in the early 2000s I made a lot of flash games probably too many I loved it it was super fun flash is gone flash had to die I'm very sad to see it go but I I loved it and I miss it every day like an old friend and after that I got into making games and game like kids book apps for Publishers for iOS devices as well as the Highlights for Children hidden pictures app in the mid-2010s and that led to some JavaScript games for random house and things like that it was a lot of fun I was really lucky to be able to work on that stuff after that I got more into making games with engines like unity and Godot those are more like games you would download from an app store and play in your desktop on a Windows PC or a Mac just last year I made a game called star Squadron student driver I I struggled to describe it it's basically a survival space shooter where your only weapon shoots ping pong balls I should probably have disclosed that most of the projects I do are kind of silly or they have some kind of element that makes them feel kind of whimsical or dumb take your pick I put it out on Steam for free just to see what that process was like but really today we're going to be talking about react games some of the games that you see here we're going to be talking about a little more detail later on every one of these games taught me something really valuable about the libraries and the patterns that I use in my day job every day of the week I did want to mention that there are some really great game engines out there for JavaScript and I definitely encourage you to check out Kaboom and pixie and phaser 3js is really cool it's not strictly a game engine necessarily on its own but you definitely can make games with it in the process of making games in react you're going to run into a lot of the concepts that you might be very familiar with and may use every single day but you're going to see them from a different perspective or you're going to be able to learn them a little more deeply because in a game environment very often the interactivity the state update speed those kinds of things that never seemed like an issue before become an issue very very quickly we're going to get into each of these topics in a little more detail as we go along let's talk about planning a game project I found it really helpful to begin thinking about the distribution method in the very beginning of the process how do people engage with this hypothetical product that you're making are they going to play it directly in a web browser are they going to download it from an app store are they going to download it from a website how are you going to monetize it do you want to monetize it those kinds of questions up front are very helpful because they're going to help you guide your decisions as you start making Technical and creative decisions along the line for example if you want to make a game for a web browser something turn based might be ideal for that something that's very fast paced and action oriented might work just fine in the browser but it may not work really well on everyone's web browser you may want to think about that and every one of these approaches has pluses and minuses if you make a game in Godot or unity and have people download it from Steam for example that might be great for performance in some ways but it's going to put up a little bit of a barrier to people finding your game and playing it if it's on the web it might be more accessible to everybody in the world but then you might have other issues about performance and also people are going to be downloading those same assets over and over again if they're playing the game whereas with an app they download it one time and they're done so you want to Bear those things in mind let's think about art considerations as well when I say art considerations I'm saying what are you committing to creatively for your game so for example if you want to make a game that's a card game like Solitaire or something like that you could probably find assets for that fairly easily and you're not going to be making up a whole bunch of new artwork for that if you wanted to make a tile based game you're going to be making some tile sets or you're going to be sourcing those tile sets somehow that's more of a programmatic approach to your artwork you're going to be making your levels with your tile set or in a more extreme example let's say it's a point-and-click adventure game and it might seem really simple to you but from an art standpoint it might be very intensive you might have to create brand new Vector art or pixel art for every one of those backgrounds that could be a lot more work than you might feel like you want to do I also think it's a good idea to decide up front what's most important to you why are you making the game you know for example do you want to reach a lot of people do you want to monetize this you want to make a lot of money is this about creative control you have an idea that you really want to get across you want to show off a little bit technically creatively of all the items on this list none of them are necessarily better than anything else in fact they're not even mutually exclusive you might decide that two or three of them are really important too you know for me personally I'm not good at the business part of it so I'm not interested in the money and I'm not very good at figuring out what people want to play I'm much more interested in making the kind of games that I want to play and if other people want to play it that's fine so I'm much more interested in the second two things and these are only a couple of items there could be way more things that are important to you a note about project scope a lot of times when I talk to people who are making games for the first time it's very easy to get in over your head or to bite off more than you can chew personally I don't think there's anything wrong with getting in and over your head I I happen to think that the best way to learn is to get in and over your head and get a little bit scared doubt yourself a little bit and then you make the thing and you go through that process of I can't I will I did that's how you earn confidence in pretty much anything not just software develop but on the same token it's really easy to get overwhelmed for me I usually like to pick a couple of new items for each project that are things I want to practice things I want to try that are new things that I want to focus on technically that I don't have an instant answer to if I had an instant answer to every aspect of a project I'm in no way interested because I've already done it one thing to be aware of when it comes to scope is that if you limit that scope to something that's manageable and especially early on maybe make it really really small not even a mini game but a micro game that's going to put you in a position where you're more likely to finish the game and to put into people's hands and get that feedback that you need I happen to know enough about myself to know that if I work on something for more than a couple of months I'm gonna start to hate it so I try to keep my projects bite-sized or snack sized to keep them from getting out of control so John Paul George and Ringo here have good advice for you to keep it simple silly [Music] so a design document is kind of like a paper prototype you're going to use that document to describe what you want to do to somebody else you might be collaborating with or even to your future self so in case you can't get to the project right away you could at least think about it it also forces you to get your ducks in a row before you start making assets and and that is a discipline that I have always struggled with I want to just start making a POC on the day I have the idea and I found that it's almost always better to just write up a document and think it through and then maybe what I find is the the project I end up diving into is different because I had a chance to think it through a little bit so think through the mechanics the the tone that you're trying to achieve walk through the game Loop and the user experience and think about how the player is going to engage with the game for me I often have some of my favorite ideas while I'm in the middle of working on something else and I can't stop and work on it so I sometimes when people are stuck for an idea for a game by the way I usually tell them to start on something else and you'll probably come up with a better idea while you're in the middle of that another thing to mention at this point is game design documents are really good for making a game from the outside in which is a very professional way of doing it you can for example sit down and say I know pretty much what it's going to look like I know what audience I'm making it for I know a lot of the marketing elements of it more or less before I get to the details of what the game mechanics are going to be so for me the most fun way to do it is inside out which is I start with a game mechanic and I work outward toward presentation story marketing all the rest of it so for the star Squadron student driver game I worked on the core game mechanic for about a month and it was just the player controller I wanted something at first that was more like asteroids rotate left rotate right and thrust that was not what I wanted and so I came up with a hybrid that was up down left right but the ship would rotate to match what you were doing and I like that a lot better once I got the control mechanic the way I wanted it then the other pieces of it creatively seem to hang on that Central game mechanic fairly easily also one thing I really want to mention at this point is the value proposition for the player I tend to give my games away for free I do this because I have a job and I don't want your money even though I'm giving my games away for free I have to recognize that when people play my games they are doing me a favor at the end of the day we all have things we could do with our time and if somebody chooses to spend some of that time and that effort on your game they are doing you an enormous favor and what's really cool of course is when they do that they took this thing that was in your head the thing that was living in your brain and now it's in theirs so when they do that they're closing a loop on a really cool magical thing that's I guess art and on the Fairly short list of coolest things we can do as human beings creating something that lives in somebody else's head has got to be near the top of the list the game I made for this talk is called Tic Tac know k n o w because I am terrible at naming things don't ask me to name things I am bad at it I thought it was funny in August one I was asked to come up with this talk now I don't think so it's basically a very simple tic-tac-toe game you flip a coin to see who goes first it learns as you play by storing historical game data if it's Unique in your local storage that kind of thing it doesn't really qualify as machine learning well that's not really the point the point is that you have four different levels of intelligence you can choose to play against and some of them are difficult even though the algorithm is actually surprisingly simple and the one that's complicated takes a while for you to train it so that it's smarter than the very simple one and this is the basic game Loop for tic-tac-no and the reason I chose this style of game is that it has a very simple game Loop uh and you can kind of see the through the flow here we figure out whose turn it is uh either the computer or the player will make a selection we animate that selection then we figure out if somebody won the game or if it was a draw if it was a game end situation then we display that and we store the value from the game if it's Unique can we update the wins and losses if not we start another round we figure out whose turn it is and that's basically it so here's the game that we're talking about this logo up here is just SVG and we're using CSS to make these pieces appear to come in and out randomly but it's just a pattern this is for resetting the local storage uh memory of past games and we'll choose X and we can choose whichever intelligence level we want to play against these aren't necessarily in order of how smart they are um this is the uh random one this one will look one move into the future it's actually the toughest one because it's actually really hard to beat it if it can look one move into the future this one can look pretty deep into the future using records of past games and past moves and try to figure that out but this algorithm is actually much simpler and it actually wins more often because it doesn't have to train to know how to beat you this one just picks at random from different elements we're going to go with the randomized one uh we have a coin toss we won the coin toss so we're gonna go middle because who wouldn't go in the middle uh we're gonna go here and if we were going Killer Instinct it would automatically go up here to prevent us from winning uh but we can go there and win if we want right for Tic Tac no the game component is kind of the main component for the game and then we're just doing a couple of layers of prop drilling uh to get these props down to the relevant components if I felt strongly about that I could probably just put a put together a custom use context hook to grab all this stuff it didn't seem to make a lot of sense but so I didn't in this case but you certainly could right if you felt strongly about it so in this case uh you can see that we have separate use State instances for the pieces of the game State um in turn-based games very often I will uh use just a single game State object that may have some a complicated shape and I'll keep a shape file somewhere or I'll use typescript and keep that that interface file somewhere in this case uh because you're playing against a computer um keeping these separate made a lot more sense so that uh we could easily access that with some of the helper functions for the game one of the first things you may notice when working on a game in react is that set state is not instantaneous I'm not telling you anything you don't already know it's something you've probably known since the first day you started working with react set state is not instantaneous but you may not have felt it quite as hard as you feel it when you're working with a game in react because state is updating pretty quickly and the user slash player is sending a lot of inputs to the application so we have to be careful a couple of things we can do we can use the previous state in our state setter this is also a great use case for use effect hooks we're using a handful of use effect hooks here to check when a game is over so game result means that the game is done and so we check to see uh who won right it could be the player it could be the CPU or it could be a draw right so we're gonna update um our wins and losses through this function and it's going to save it to local state so you can see that in a couple of different cases we're using use effect in this way to catch these changes and react accordingly so going into this project one of the main things I wanted to work on was getting better at testing specifically with react test library and one thing I really like about test Library we have some really nice asynchronous functions that allow me to simulate clicks for integration testing so in a case like this I'm firing an event for the start button I'm waiting for the first cell to be available to click on right to not be disabled and then we're going to fire a click on that so the first play of the game will happen now you might ask uh but you probably aren't but what you might ask um why do we know that we won the coin toss right so we click Start there's a coin toss to see who goes first could be the CPU could be me well it's going to be the player because we are mocking random running unit tests on games randomization is going to mess with everything you do right when you're testing you want that repeatability and so I'm using a library to mock random but honestly looking back on it if I were building this now I would just I would just mock it with like a global I'll show you in a second how we mock local storage but that's basically the idea here but by mocking random it's always going to return zero so it's always going to return heads or tails whatever it is so if you say to match snapshot you could be confident that this won't change every other time you run this test we're testing the version of the computer's intelligence where it's going to look at previous records in order to do that in our testing we are going to fake out local storage so we go storage prototype get item and then get item will return this specifically designed string which can be parsed in Json and that will tell the computer that it wants to choose a specific value in this case to choose value three because we're telling it hey the player is going to win unless you choose cell three and then again we do the same thing but we return an empty value for that history and that will return value one because it's going to default to random which again is going to be the first item in the list uh which would be the first cell which is cell one so this is a reverse engineered uh text Adventure engine based on the Scott and Alexis Adams uh pirate Adventure engine from 1978. I'm a big fan of those games and those people uh I did put together another video that's a little more in depth on the history of that original game what I ended up doing here why I did this um and the the two new games that I made for this and I'm making a note for future me to add a card or something future me is going to add a card or a link or something ah thank you also there's a link in the description uh but basically this is a text Adventure game basically you know go north go south that kind of thing um this is kind of a fun game it's it's sort of related to Greek mythology in a weird way the reason I bring up the text Adventure game is kind of a cautionary tale about managing objects in your JavaScript game uh objects are not passed as actual objects they're passed as references to objects as we move things around between functions and other things in JavaScript well we all know that academically but sometimes late at night when you're working on a side project all that goes out the window and you start to scratch your head try to figure out uh why this very basic thing isn't working the way you expect it this is a good example of that so in a text Adventure game almost all of your game logic really exists in this player turn function because once they enter a noun and a verb it's going to pull in the data we're going to take in the game State and then we're going to run the logic against what we've said we want to do based on our inventory and all that other stuff and then we're going to end up with a changed game State at the end and that's what we're going to send to the set state what I had been doing was I I kept an old game State uh copy of the object around to compare old and new game state to see if for example the player's location had changed well the problem with that of course is again it was very late at night and um I forgot that when I make a copy of game state I'm copying the reference not the actual object and so when I changed game state to change the location of the player the historical version was also being changed right that makes perfect sense when it's not two o'clock in the morning there are loads of ways around this issue in this case what I did was I just created this new object based on just the handful of things I actually needed out of game State the other way of doing this is wrap the whole thing inside of a A you say uh Setter and then I could bring in my previous uh state from there that's one way I could have done that [Music] this is a game called noodle Quest it was started as a pandemic project I thought oh little kids would love this when they're stuck home from school the intent of this was to get better at using memoization and react memo to calm down unnecessary re-renders so you can see it's pretty pretty responsive even though there are over a hundred I would guess sells on screen at any given time um so we're picking up these you can see we have an inventory uh we have a dialog system here just uses mui um and we have different areas we can go to so this is actually a floor below where we were and because we have the key because we have the key we can open the door we can go to other parts of the map in the noodle Quest code we can see that we're using uh use memo here to calm down the unnecessary re-renders especially when it comes to depth sorting because with um isometric games like this the the Sorting of different objects to be in front of or behind objects as they go vertically up and down the screen uh that's going to change their depth so we needed to be very careful about preventing these groups of layers from uh causing too many re-renders and then here is the tile component and it's multi-purpose it gets used for all of these items we're using a memoized version of the component in react memo to help calm down those unnecessary re-renders as far as the SVG animations are concerned this is a great example of a component I would definitely not build this way if I were building it right now this is like what a 400 line 500 line component you could break this up into body parts pretty easily but you can see this is all just SVG these are Line Circle path and you can even use this animate tag which is specific to this kind of work really fun stuff this was really fun to put together you'll notice too that um in some cases some browsers won't respect the CSS animations of these SVG elements we have to zero pad some of our values so when we go to the CSS you'll see for example we have this animation 1.2 seconds linear player going up for example well if this was 0.2 seconds and if I just said 0.2 without a zero up front browsers like Firefox would not recognize that would see that as a syntax error other browsers will understand what you mean and go for that and and animate that properly but Firefox was giving me problems so one thing to bear in mind when you're doing this kind of stuff is when you run into trouble with these kinds of animations just making sure that your values are zero padded maybe a a path to a solution for you you can see that this uh CSS is actually pretty simple here's the going up animation and the going down as the player is facing us or facing away um this was enormously fun uh to put together to design the system of how this player controller would work this is not technically a react game I built this just in raw JavaScript years ago but it's a good example of using uh games with JavaScript and uh SVG animations this is basically an update of mugwump which was an old terminal game that you'd play on the terminal or on an old vic-20 or something like that old game you make it basic uh this has graphics and we also I think flipped the table so now you're the mugwump and you're hunting the people I think I can't remember what I did here but you can see uh cute little detail that uh the character blinks and if we refresh the page you can see it when he drops in he waves at you um which was actually really easy to do uh but I did this in in vanilla JavaScript so I did you know some timeouts adding and removing classes to make that happen thank you so this was a lot of fun I'm I'm very bad at this game I'm not demoing this game because I'm I'm very very bad at it this is a minimalist RPG that I'm working on so instead of going through a landscape with a character controller you're actually just gonna click on parts of the map it's sort of based on or inspired by games like Kingdom of loathing so we can go into the town you can see this is there's a lot of temp art in here there's no real art here to speak of in some cases but we can go into the shop and we can we can buy items we can actually even sell the fancy Buckle that we have and to earn money to buy spells and healing potions and stuff like that you know Adventure game stuff the reason I bring this up is this is an SVG character creator I wanted to make a character creator where you didn't have a gender because the gender is kind of irrelevant to the gameplay and so I wanted to make it as androgynous as possible and so honestly I'm thinking about getting rid of all of these uh controls because honestly I have a lot of fun just doing this this is just a randomizer that uh yeah the Princess Leia with the kiss makeup is my favorite so uh yeah I like the Character Creator I'm not super jazzed about the rest of it maybe I'll finish it maybe I won't not sure this game is called Figure five frenzy it's a math card game that I made for Flash I actually made a multiplayer version of this in Flash about 10 years ago and then this is a react version of it if we play it hopefully I'll get an easy hand so we got to do six uh actually won't be too bad this will be easy so uh 10 minus nine and then uh seven minus two is seven um actually we probably want this over here then we uh we subtract it and we win yay um I'm very bad at this game so I'm I'm gonna just quit uh I'm very bad at my own games um so that's how this works but the reason I brought this up is that uh in the score section this is coming from a micro service that I created in AWS because I wanted an excuse to use Lambda as an API API Gateway and dynamodb and after brainstorming for quite a while uh this was the best idea I could come up with was a high scores application I don't have time to get into the details of that actually there's a separate video for that and hopefully I will have had the presence of mine to put a little card up on the screen tell you where to find that but the reason I bring that up is that in this case it worked perfectly in development when I pushed it to production it became clear that I had an architectural issue at the end of the day it was a fairly easy fix of just separating some responsibilities in the API Gateway but it was a really neat example of what I could learn about my own mistakes when I take it to production most of the side projects I make in react will end up getting hosted on an S3 bucket so let me walk you through that deployment process and some of the potential pitfalls first of all when you're deploying to S3 you're going to probably want to test each step along the way so if there were issues you could figure out where they started with your S3 bucket you're going to enable hosting you're going to make your objects public with a bucket policy we'll go to AWS certificates to create a certificate for our domain or subdomain we're going to use that certificate in our cloudfront distribution the cloudfront distribution is going to take our S3 bucket and going to make a cache for it and we're going to use our AWS cert and we are going to set up some custom errors for 404 and 403 that will return the browser to index.html and very importantly here it will return a 200. now this last part I used to sometimes forget to do that and then you would have all kinds of issues sometimes related to deep linking and things like that in Route 53 you can connect your Cloud front distro to your hosted Zone and you're going to create aliases pointing to your cloudfront disturo for a and 4A that's for ipv you can set up your AWS CLI log in and then you can use an npm script to build and deploy for you automatically it's pretty simple once you set it up a note about deploying to itch IO you can certainly deploy HTML games on hio that's well known but I've seen several notes on the internet about not being able to deploy react games on itch and it turns out it's actually not that hard all you have to do is go into your package file and add the home page prop at the root of your package Json and make the value a DOT basically saying look in this directory so let's say you want to make a game let's say you want to make a game in react where is your idea going to come from sometimes it's helpful to take a common game type that you already like simplify it and put your own twist on and that way you're replicating a game mechanic that you already know is probably going to be fun one thing I've always wanted to do is adapt a work of classic literature I.E public domain Pride and Prejudice is a dating Sim Antigone as a stealth tactics game Don Quixote is a windmill beat em up or brothers Karama is an 8-bit platformer as we're rounding the last corner here I really want to encourage you to finish that project that you have on your plate or or start the one that you have in your head the turtle has a really good point but I think he's also missing the point when it comes to making games anyway in this world there are two types of fun right there's there's fun while it's happening that's type one fun making games is fun especially at the beginning right the beginning of a game project is fun it's the only thing you want to do when you start working on it type 2 fun is only fun in retrospect I went on a big backpacking trip this summer it was one of those we call type 2 fun once once you're off the mountain and your your muscles stop hurting oh it was really really fun maybe at the time it was tough but once it's all over it's fun and I think that's true of game development that last quarter of a project that can be type 2 fun where it's fun but only when you're done and you get to share it with people I just really really hope that you don't give up on your idea even if you think it's garbage because frankly and I'm not even kidding I think the world needs more bad games uniquely Bad Games the world is full of too many games that are Sami Sami and bad but uniquely bad oh that's great so go out and make something uniquely bad break a game mechanic in a way that nobody's done before do something so bad it cannot be ignored you can do it foreign

Channel: Mark Makes Stuff

Views: 61,646

Keywords: Javascript, React, ReactJS, Game Development, Isometric Game, Adventure Game, Platformer Game, 2D Game, Text Adventure, Retro, Turn-Based, Typescript, Unit Testing, Web Development, Software Engineering

Id: DFt-CL68Qb0

Length: 33min 32sec (2012 seconds)

Published: Sun Dec 18 2022