So to start with.
What i'm going to say is you need to know
how to create classes before you go ahead.
Starting your frogger game.
So, specifically this type of classes is called prototypal classes.
So prototypal classes what they can do is they have a set of attributes or
properties and a member functions associated with it.
So let me just share my screen now
so I'm going to open up sublime and I'm going to teach you guys how to
start typing up a very simple prototypal class.
Let's define a class in JavaScript.
So I'm going to use this name.
So in JavaScript,
when you define a class, it should always start with a capital letter.
So your class name should have a capital letter.
So that is what distinguishes a class, a function and
an object in JavaScript, because essentially the three of them have
the same syntax or how you define them is the same.
So what i'm going to do is.
I'm going to go ahead and create a class and call it Person.
And I'm going to pass in a name parameter.
Into my class.
So inside this, what I can do is I can access the name attributor,
assign an attribute to the name property by using this form keyword.
So that this keyword is going to tell me the object that is
actually invocating the person class.
So the object is going to be an instance of the person class.
So this is what I defined here.
What I'm essentially doing is, any object I create,
I assign the object an attribute of name and
then I give it the name that we passed in while instantiating the object.
This will also be called as the constructor of the class,
as you know in other languages.
So yeah so what I'm doing here is I'm actually creating a prototype function.
So a prototype function is what it is,
is it's going to essentially create a member function of your class.
So this function display is going to be associated with the person class.
And it can be accessed by an instance of the person class.
So, the technique for
that is going to be person.prototype.display = function off.
I'm passing a greeting message which might be just a name.
So what i'm going to do is, I'm just going to console.log code into this.
You guys can figure out what has happened to your game later.
And then i'm just going to add appended greeting
to my name that I will assign this.name.
So as you can see I created a prototype function display associated with this.
Also I can actually create another function.
I can call an object, new person.
I can create it and.
I can call the constructor.
This way. And then.
I'm going to pass in my name into it.
So what this is essentially doing is it's creating an instance
of the class person and assigning the name Poomima to it.
And whenever this object, you do this it's going to,
this is going to return person.name will return Poomima.
And then so now if I want to call the display
function all I have to do is new underscore person.
And then I can say good evening.
So the result of the new display function should be good evening,
Poomima.
So that's what it's going to do.
So as you can see these are prototypal classes,
you will be using a lot of this in your JavaScript Frogger game.
>> Is there a better way of saving states?
>> Okay, saving states for your player object.
You can have an enum variable that defines various states of the player.
I know that if you have a state where the player is alive the player
is still playing when you go to like, when you progress to levels.
You need to have you know several enum stages in your player type.
So it's called an enumeration data type.
So what you can do is you can have a list of states for
your player declared within the enumeration data type.
It's going to be just like an array.
It's very similar to an array where you can
assign these sort of like values to it and always.
Enum data types.
Take, are in the form of caps lock that define the state of a player.
So, feel free to use that and.
Use leverage that data type to actually define what state your
player is currently in and what stage you want to transition your player to.
So that's one thing you can look at designing your states with.
>> So maybe we could talk a little bit about how these concepts that
the students are learning could be,
so we're applying object oriented concepts to a game.
>> Mm-hm. >> I think from a game sense it makes
a lot of sense.
>> Right.
>> There is a player and he's an object of enemies, and
you want to kind of create multiple instances of these enemies so.
Having sort of this object oriented design makes sense.
>> Right. >> When would we see this in sort of
an actual website?
So if i'm going to, say, ESPN or Google, any other sort
of the websites that i visit, where on like a page would we see,
where can we utilize these object oriented design concepts?
>> Yeah, so they could really be used in a lot of these instances.
One of the common ones that you'll see out there as
kind of an intro to JavaScript development is the to-do list app.
Everyone's built a to-do list app, you know, over and over, a hundred times.
If you think about it, a to-do list item is pretty simple.
If you think about the properties of it, is it checked or not?
And what is the text of that to-do list item?
So I could easily envision a page that has like a box at the top that
you type stuff in and then just a series of items.
Each of those items would be an object.
And so then I would have.
I'm thinking about the prototype of that.
Of that to do item.
Imagine we have a class of to do list item.
Some of the prototype functions I would have is edit because
that functionality isn't distinct or unique between all of these items.
Everyone edits the same way.
>> Yeah, should be able to edit it all of them.
>> Right.
Checking and unchecking,
like do you want to maybe have a counter that updates?
So, but the checking and un-checking functionality of that
to do item is going to be the same across every single one.
So it really comes down to shared functionality as we mentioned
in object oriented JavaScript course, there's not a right way to do it.
And that's kind of the,
what I enjoy about JavaScript, is that it just depends on the implementation.
We can't tell you always use a function class, or
always use a pseudo classical class.
It really depends on what you're trying to do and
what you're trying to accomplish.
And I know that sounds difficult and frustrating.
Right now, but
it'll come in time and that's one of my favorite things about JavaScript is.
I kind of compare it to Tetris.
It's really easy to play, but hard to master.
That's how JavaScript is.
Is it's easy to get stuff done and
then a week later you're going to learn something new and realize that.
I can make that better.
What i did last week and it's a constant I can make what i just did a lot better.