Continued from Javascript RPG Game tutorial part 1
So, there is a Object type called 'Hero' and we made an instance called 'hero'. I sometimes call my Jetta 'Stupid Face'. My Jetta's name is 'Stupid Face'. Our hero's name is 'bill'. But what if you'd like to call your hero something like 'donut pants'? Easy enough!
Your overall code looks like (or should anyway):
<!DOCTYPE html>
<head>
<title>Dungon Game</title>
<script type="text/javascript">
var Hero = function(name,type){
this.my_name = 'bill';
this.my_type = type;
}
var hero = new Hero();
console.log(hero);
console.log(hero.my_name);
</script>
</head>
<body>
</body>
</html>
Lets change that to:
<!DOCTYPE html>
<head>
<title>Dungon Game</title>
<script type="text/javascript">
var Hero = function(name,type){
this.my_name = name;
this.my_type = type;
}
var hero = new Hero('donut pants');
console.log(hero);
console.log(hero.my_name);
</script>
</head>
<body>
</body>
</html>
Reload your web page and look at the firebug console!
You should see something like:
Object { my_name="donut pants"}
donut pants
Ok.. thats great! Now we can make as many 'instances' of heros that we want! so lets delete the part
that says:
var hero = new Hero('donut pants');
and replace it with:
var Thundar = new Hero('Thundar', 'the barbarian');
var Ariel = new Hero('Ariel', 'the sorceress');
var Ukla = new Hero('Ukla', 'the faithful companion');
Reload your page and tada! You have new entries in your firebug console!
You should see this:
Object { my_name="Thundarr", my_type="the barbarian"}
Object { my_name="Ariel", my_type="the sorceress"}
Object { my_name="Ookla", my_type="the mok"}
If you see this you're doing great. If not double check your code.
Ok, so what are we looking at here? We are looking at 3 instances of the Hero 'Object' or 'Class'.
They are all cut from the same plan, but they have different names and types.
Lets take a step back for a second though. There are plenty of things I haven't explained yet so
lets explain a couple.
Notice the 'var' before several lines of code? That is short for 'variable'. Basically what programming
essentially does is manipulate data and then display that data. In javascript our data are typically
'variables'. Variables can be different things. They can be numbers:
var hot_girls_in_class = 2;
They can be a 'String' of text:
var name_for_my_pos_car = 'Stupid Face';
They can be a list of things, also called an Array:
var todo_list = new Array('clean room', 'actually clean room', 'feed cat', 'watch tv');
... and as we've already seen it can be an 'Object'.
I started with objects because they are easy to understand if you don't over think them, and they
are harder to understand than all the other types. What might be confusing going forward is that
variables can also be functions.
But what is a function? Lets go back to the car metaphor.
All Jettas have some characteristics and operations.
For example Jettas have:
doors,
windows,
wheels,
sunroof,
bike rack,
windsheild,
gastank,
engine,
transmission,
etc...
those are characteristics that can vary from model to model.
Jettas can:
Accellerate,
Slow down,
Turn,
Turn On,
Turn Off,
Change gears,
Attract hot girls (ok maybe not)
What an object 'has' are properties. What an object "can do" is a 'function'. Later on you'll call them methods, but for now lets stick
with functions.
No comments:
Post a Comment