How To Make HTML 5 Game

Hey I’m RC and in this video series we’ll, be teaching you how to create an html5 multiplayer game using not GS, Express and socket IO. So those are the same technologies that are use in my own video game called reining chain.

So you can take a look at my game at reigning king of calm, if you want to have a rough idea of what is achievable with html5. So in this video series I will assume that you have basic JavaScript knowledge, so if you have never coded in JavaScript before and would recommend you to go check out my tutorial about making a single player html5 video game by clicking the annotation on the screen.

So the first thing I will be covering in this video are the software’s. You will need to create your game, so the first and most important software is not yes, so this will be the server. You will also need NPM, which is the library installer for not GS, and it comes with not yet so you only have one package to download.

You will also need a good text. Editor. You can use pretty much anything you want, but the one I use personally is not pad + +. You will also need a browser. Aka, a client and the one I recommend is Google Chrome.

We will also be using two main libraries. The first one is Express that will be used for delivering files and the second one will be suck at i/o that will be used for communication between the client and the server.

The link to all of those softwares can be found in the description. So now what I want to do is to cover a little bit about the project folder structure, and this is because this is the first thing we will do so – create an empty projects.

So a server is split in multiple parts. The first and most important file in our project is the abductors file, so this is the main entry point of our server. This is where we load all the other files, and this is where we initialize the server pretty much.

Then we have a big package. Json file, so this will be automatically generated with the library installer it’s. Basically, a description of our server. The list of libraries we are using stuff like that.

We won & # 39, t really have to to change much in that, and actually we will use the default one. It’s, going to be real, quick and we got a non module folder, and this is the folder that contains all the libraries we have so, for example, Express and socket IO.

So we do not modify those this folder manually. What we do is that we asked the library installer to install Express Express, for example, and it will do all the modification and it will modify the package to chasten to matically.

So it’s pretty convenient. Then we got a folder called server. That will contain all the logic of our game in gs files, and then we got the client folder. So everything in the client folder will be accessible by the clients.

Things in the server folder order will not be accessible. So if you have something secure that needs to be secured, put it in the server folder, otherwise the client will have access to it. So the client is split in three main parts: there’s, the JavaScript folder.

So for the logic there’s, the image for images and then there’s, the index.html, which is our main page, a web page for our game. So this is how it should look. So you should add a empty add. The J’s file.

You should add a server with nothing inside it. You should add a non module that should be empty, that client folder. That contains a bunch of images. If you want a bunch of JavaScript file and your empty index dot HTML file, so the next part will be to download the not J’s server, so just download it install it.

And then you’re ready to move on to the next step. So now what you want to do is to open a command prompt. So if you’re on Windows, simply search for common prompt and if you’re on Linux, then you probably already know how to do that.

So all the command prompt works is that you have a current directory. So, for example, right now, my current directory is C user Sam. I want to change that current directory to the directory of my projects.

So in my case it’s C users. Some YouTube, not GS, guide episode, 1 project. So there are multiple ways to do that. The first one is to do it manually. So right now I’m in Sam folder. I want to CD which then for change directory.

So I want to change directory to YouTube, and then I will want to change my directory to not GS guide, so see the nod, jazz guide and then just continue all the way to episode 1 and then to project there.

We go if you want to go backwards, you do CD dot dot. So, for example, if I do CD dots, you go back to up to your normal C and you can also do it in one go. So you just um copy paste. The link over here.

You do CD and then right click. It’s. A bit weird um copy paste in command prompt is not normal. In order to pace you need to right-click, so it would be CD. Then I right-click what I am copy paste and then I press ENTER, and I will be directly in the right folder.

So now that you’re here. What you’ll want to do is to type note like this, and if this happens, so you have a little arrow right here, then this means node was incorrectly installed on your software. In the other hand, if you type node – and you get a message like that – so note is not recognized as an internal or external comment, and this means you will have to reset your computer and hopefully this will fix the problem.

It’s because not is not part of your path, which is the list of all the commands you can use so by resetting the computer. It should fix the problem. If not, then, in the description of this video, you will find more information about how to fix that problem.

Um and the other software we will use. The other comment is and p.m. which is our library installers. The first thing you will want to do is to generate our package.json file because we don’t have one like I said the library installer will do it for us, we do in it and then we can simply um.

You can put like a description for your game and stuff like that, but it’s naturally needed you can just use all the default settings and there we have it. We got our empty package that JSON file. The next step will be to install our libraries and in order to do that, use type NPM, which is our library installer the install comment, and then we specify what to install.

In our case, we & # 39, ll want to install Express and then you just press ENTER and you wait and it will automatically download Express and the second software will want to install is suck at i/o. So NP install socket IO, you press ENTER and you should have it.

So if you take a look at your node module, you should see a bunch of files, so those are Express and arm socket, IO pretty much. So if everything went well, what you will want to do next is to open the app the J’s file, which is the main entry point of our server, and then we can specify what we want the server to do.

In our case, we will simply want to console.log loled, for example. So if we save the file – and we go here um in order to start a server, you will need to use the common node and then the name of the file that should be started.

In our case, it’s. Add the Jazz. You do not space at the Jazz enter and you should see Ella belt and we can do all sorts of things. We could do a equal one, a equal, a plus one, and then we could do console.

log a example. And if we start the server again, we should we should see L well and then obviously we can do more than just printing values, but before getting into the complex stuff, I want to cover a little bit about communication.

So this is a rough summary of communication that we’ll, be using for our game. Obviously it’s, a lot more complex than that, but long story short. What you need to do to understand is that there are two types of communication: there’s file communication, so when the client asks the server for a specific file, bring up all the player image and this will be endl by express – and then there’s, the second type of communication that will be handled by socket IO and it’s um.

When the client wants to send data to the server, for example, its input and it’s, when the server also wants to send data to the client example, the player position. So now I’m, going to talk a little bit about the URL, so this is used in file communication.

So when the client has the server for a specific file, the file location will be represented by a URL, and this is how it’s. I’m composed, so there are three main parts there’s. The domain there’s, the port, and there is the pack.

You should be familiar with the domain, for example, raining Ching calm on google.com stuff, like that, then there’s, the port, which is a number and then finally, there’s, the path which is the location of the file on that server.

So um the thing about the port. One way to see the port is that a domain could be represented by laptop and the port could be represented by a USB port. So sometime, you would want a laptop to have multiple device, so the laptop would need multiple USB port and the same applies for domain.

So on the same website you could want um. You could want multiple servers to run on the same domain, and in order to achieve that, you would be using multiple ports, for example um. I could have a server running on port one.

I could have a server running on port two, so I would have two two things running on the same website. In our case, we & # 39. Ll only need one one port and the one we’ll, be using it’s. Two thousand, it could be anything but for the project we’ll be using 2003 port is a bit more complex than that, but that’s.

All you need to know for now. Okay, so in order to do file communication with Express this is what we will need to code. So there we go and that’s, it that’s, the first and only time we will be using Express in the entire video game creation.

So because that’s, the only time we will be using it. I won’t, go too much into the detail. Obviously, if we, if you want to make a full website with multiple pages, then you will need to understand. I’ll Express works a little bit more, but in our case, because our game is only one page, that’s, all you need to know, and even if you, don & # 39, t really understand what’s going On it’s, not really that important! Okay! So in this video series I want to focus on making a multiplayer game rather than just a general website, so that’s.

Why I won’t cover that too much um long story short. What’s going on? Is we create a server? We make it listen to the port mm, so this means whenever there is a request, the port mm. Our server will be notified and, depending on the request, we will do a certain action bringable.

If the request is nothing so, for example, we go to my website comm port mm, then the query is nothing. So this is the function that will be called, and in that case we will sin simply send the file clients on slash index.

And if the query starts with client, we will send the fall request in and, as you can see with that system. If the query is serve slash server, something’s, we’re gonna pull sake, your foul GS um. This will do absolutely nothing because it does not match nothing and it does not match slash clients.

So this request will do nothing. So that’s, why the client can only request off and the client folder or if he specifies nothing and by default it’s, the equivalent of requesting the client slash index file.

So now, at this point you’re. Probably wondering what the domain will be, because the board is two thousand, the path will depend on the file we are requesting, but for the domain you probably don’t own a domain.

So how it works is that by default, your computer as a domain that is called local. Oh so, if you go to local O’s, it’s exactly like requesting to yourself. So, in all our example, the domain will be local post, so what we are going to do is to modify the index file to something else.

So if you remember correctly, the index file is inside client and then index file over here, and I’m, going to put loled kind of save. And here, if I go to local host mm, so local oasiz that the main and 2000 is the port with a colon in the middle we press Enter well, it will not work because you need to start the server, so not a fat GS.

So now the server is started. I refresh, i will see l world so the server sent me that fall five change the content of that file. In a refresh it will be different. So right now what the what’s going on is that on? The query is nothing because we didn’t put anything after the two thousand, so we go inside that function over here and we send the fall client slash index, but another thing we could do is to actually specify something in the query.

For example, slash client and we can actually specify anything in the client folder, so I could specify image bullets so as the server a give me, the content of slash image, slash bullet and the server with will send me the appropriated image.

So I guess that will be pretty much it about this video. I hope you liked it and don’t forget to click the annotation on the screen to go check out the next episode. So in the next episode. Well, we’ll, be covering is suck at i/o, so communication with package.

So it’s a little bit more. It’s a little bit different, but it’s a lot more powerful and that’s. The main communication we’ll, be using for our multiplayer game. So thanks again for watching and see ya.

Go To Products