Alright, so let's take a look at another piece of code. Now this is another bit of the game we'll be building, but there are a few errors here, that we've added in. Your job is to go through this code, find the errors that were introduced, and then fix them based on the syntax you learned previously. Good luck.
Okay, so I hope that wasn't to bad, there are only a few errors that you needed to spot. Lets go through them one at a time. The first one is right here, you can see that this is opened with and opened square bracket, but it's closed with an angle bracket, and this should be a square bracket right here. Now, the next error is right down here. And this is, and this is missing a semicolon after the first section of the 4 loop. Now, the next error we'd like to point out is this if statement right here. We need parentheses around this not entity clause. Let's go ahead and add those in.
Alright, now that we've got some better tools, let's take a look at a bigger piece of code. Now this is the entire base game engine class for the game that we're going to be building. Now, what I'd like you to do, is debug this much larger piece of code. And to do this, you're going to need some help, otherwise, it's going to take far too long. Now, there are only a few syntax errors here. So, it's going to be a little bit hard to find them unless you use some tools, whether the Chrome developer tools or some other browser's tools.
Alright, now let's try creating our own XML HGP request. What we'd like to do is request weapon dot JSON which is the previous JSON code that we parsed. Then, once the response kicks in, we'd like the onLoad function specified to parse it like we did before, If you're a little confused, more detailed instructions are provided in the comment,
Alright, so not too much code. First we call a new XMLHttpRequest, then we specify the open method with the primaries GET, weapon.json, and true since we want the call to be asynchronous. And then we set the onload function to be our parsing code from before. And finally we kick of the request with xhr.sent. Now if we open this In chrome's developer tools, we can see that we actually do make this request for weapon dot JSON. Method get, and it's successful status, and it takes about thirteen milliseconds. And if we look at the console, we can see that we do actually print out the value of the X parameter that we were looking for before.
Now, this is great for j sound but what if we want to grab something else, say, a sound file. To do that, we need to set the response type of the XMLHttp request object to arraybuffer and what that will do is specify that it is binary information rather than text that we can then decode as necessary. What we like you to do is create another XMLHttp request but this time we're going to request. Bg<u>menu.ogg, a sound file and set the response type to arraybuffer.</u> Now, we've already created the on load function for you to use. Don't worry if you don't understand any of this. We'll be going over this in more detail later in the sound unit. For right now, your job is just to fire off the XMLHttp request.
Just a few lines of code. Create a new XMLHttpRequest object like before. We call request.open again, pretty much the same except that we've changed weapon.jsan to bgmenu.ogg, and we set request.responseType to be arraybuffer. And if we fire this up in our browser, we see that we do make that request, and it starts playing our sound file.
Alright. So, we've written this XMLHttp request code a few times now. Let's go ahead and extract to that. What I'd like you to do is fill out the function xhrGet that does, well, exactly what we've done the past couple of times with xhrs. Takes in the reqUri, like weapon.json, or bg<u>menu.ogg.</u> It takes in a callback function to set the on load function to and it takes in a type, which could be either nothing, if we're expecting text error or arraybuffer, if we are expecting arraybuffer data. Now, one quick note about the callbacks, we're going to create the callbacks such that we assume that it takes the request object as a parameter. So, for example, you can see our parseJSON function here takes the xhr, and then parses xhr.responseText. Now, we have both the parseJSON and playSound functions here, that if passed in as callbacks, will appropriately play sound or parseJSON as we've done before. Now, down at the bottom of this file, we make 2 calls to xhrGet with weapon.json and bg<u>menu.ogg.</u> Just for you to test against to make sure that your xhrGet function is behaving properly.
Alright, now that we've seen this in action, let's go ahead and use it ourselves. What I'd like you to do is create a new canvas DOM object inside a new div DOM object, that is then put inside the body element. To do this, we're going to have to grab the body element by its id of body. We're going to have to create a new element, using document.createElement, both for the div and for the canvas. Then, we'd like to set their ids. For the div, we'll set it to gameContent. And for the canvas, we'll set it to gameCanvas. Finally, we'll have to append both of those. The canvas to the div, and then the div to the body. You'll have to use document.getElementById, document.createElement, the appendChild method of DOM objects, and the id property to do all of this.
So, the first thing we do, is grab the body dom object using document.getElementById with an id of body, and we create a div object, as well as a canvas object, and set their id's appropriately to div.id = "gameContent" and canvas.id = gameCanvas"" and finally, we append the div object to the body and the canvas object to the div. If we open this up into our browser, we can see that we have indeed created a div element and inside that is our new canvas element and both.
All right. Now that Colt's explained why we want to use a more traditional object-oriented class base set up, let's go ahead and do that. Now, we'll be using a piece of code by John Resig that fakes class-based object oriented programming. Feel free to take a look at the code or the linked blog below to see how it works. Now, we're not terribly interested in the internals for our purposes. What we care about is how to use it for instantiating the proper class-based inheritance trees for our game objects. So, let's say we want to create the following inheritance tree. We want weapon and entity to both inherit from Class. And we want MachineGun and ChainGun to inherit from Weapon. And Teleporter and EnergyCanister to inherit from entity. Now we've started this off for you, but we're going to have you complete this yourself. First, we set weapon to be Class.extend. What this means is that weapon extends all of classes functionality, whatever that happens to be, and then adds it's own on top of it. Similarly, MachineGun is set to weapon.extend, which extends all of weapon's functionality, and then builds on top of that. Now, we've created these for you for a template. And, what I'd like you to do is fill in the rest of the inheritance tree we discussed above.
Alright. So really, all you have to do is set ChainGun equal to Weapon.extend and in this case, we're not extending it with any further functionality. We'll be getting to that later. And similarly, we're defining Entity to extend Class, Teleporter to extend Entity, and EnergyCanister to extend Entity. This bit of code doesn't really do anything by itself but we'll be adding more functionality to these, as we go. And this way, we have a nice clean framework for doing that.
Great job. Now that we've got the fundamentals down, we're going to build on that in the later units to create fun interactive games.