lets make a game using javascript. Here are the course requirements:
If you're on windows you need notepad++ (free software) and Firefox web browser with firebug extention.
If you're on mac you need textwrangler (free software) and Firefox web browser with firebug extention.
A basic understanding of pen and paper role playing games like Dungeons and Dragons (actually not that important).
You don't need anything fancy. You don't even need to know javascript. You just need a basic knowledge of
HTML/CSS and a willingness to follow along.
Ok, Let's Go!
We are going to make a dungon crawling game.
It will:
Have a dungon.
Work out battles for you.
Be navigatable (meaning you can move around in the dungon).
You can:
Be one of 4 character classes.
Attack monsters.
Find treasure.
Navigate the dungon.
Ok! Lets start with you! Type this as your basic HTML:
<!DOCTYPE html>
<head>
<title>Dungon Game</title>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Easy enough! Thats the framework of our game! Wow that was easy :D
Now lets create a basic hero/character!
Change this:
<script type="text/javascript">
</script>
to this:
<script type="text/javascript">
var Hero = function(){};
</script>
GREAT! we now have a hero! Not much of one though because he doesn't do
anything at all and can't interact with the html at all. BOOOO! Bad hero! But lets talk about what
he is.
Our new javascript code "var Hero = function(){};" is an object! Well you can't actually touch him
but in the javascript programming world he is an object. He's actually a lot more, but what he is
and isn't really isn't that important right now. For now just know that he is going to be the
blueprint for any and all characters that the player controls, or the game controls as an NPC!
Lets spruce him up a bit shall we?
lets change var Hero = function(){};
to this:
var Hero = function(name,type){
this.my_name = name;
this.my_type = type;
}
Great! now our Hero can have a name and a type. In this context type is akin to class or profession
(eg. Warrior, or Wizard). But he still doesn't actually exist and we can't do anything with him.
What do I mean? well.. lets run a test. make your page look like this:
<!DOCTYPE html>
<head>
<title>Dungon Game</title>
<script type="text/javascript">
var Hero = function(name,type){
this.my_name = name;
this.my_type = type;
}
console.log(Hero);
console.log(Hero.my_name);
</script>
</head>
<body>
</body>
</html>
Notice the console.log stuff? That is so we can experiment with whats going on in the webpage and
see whats happening behind the scenes. So open up firebug by clicking the firebug button and then select the console tab... You are using firefox right? We can use other browsers and we'll make sure the game works in most if not all of them, but for development and learning firefox is the right browser to use.
Now open your document!
Notice how it says?
Function()
and on the next line:
undefined
That says that we have a function, but he doesn't have a name. Lets give him a name and see what happens.
Change this:
var my_name = name;
to:
var my_name = 'Bill';
and refresh your page.
Notice there is no change. That is because 'Hero' our object is also a function. And for a function to
work you have to 'call' it. Think of it like a car. For a car to work you have to turn its ignition.
For a function/object to work you have to call it.
so lets do that!
add this AFTER 'Hero' but before the console.log statements
var hero = new Hero();
and change your console.log statements to this:
console.log(hero);
console.log(hero.my_name);
now in firebug console we get this:
Object { my_name="bill"}
bill
Ok! Now we're cooking with gas. We have a hero "instance" of the Hero Object type. Now, when I say an
instance of an Object type I mean something like this:
There is a type of car called a Jetta. I have one. My Jetta is an 'instance' or the Object type 'Jetta'.
Does that make sense? I don't drive every Jetta out there, just the one I own.
No comments:
Post a Comment