Front End Mastery: 2011

Wednesday, November 2, 2011

Javascript RPG Game tutorial part 2

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.

Tuesday, November 1, 2011

Javascript RPG Game tutorial.

Make a game, Learn Javascript!

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.

Tuesday, March 29, 2011

Build Javascript with PHP

http://www.jsclasses.org/blog/post/10-Developing-JavaScript-Applications-using-PHP-functions--Lately-in-JavaScript-podcast--Episode-5.html

Friday, March 25, 2011

ensure. loading js, html, and css only when you need it.

http://ensure.codeplex.com/

Thursday, March 24, 2011

lazy loading library genius

Loads javascript, html and css on the fly. Brilliant.

http://ensure.codeplex.com/

Tuesday, March 22, 2011

Create web apps in JavaScript right from your browser

Associative Array Flexibility.

Thursday, March 17, 2011

data and each in jquery

//We can call it via:
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

Data is good for preventing race conditions.

//Given this HTML Structure

Apple
Orange
Mango
Blueberry
Watermelon

//We can retrieve the value with:
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});

//Alternatively, loop through JSON
var data = "{ name: "John", lang: "JS" }";

$.each( data, function(k, v){
alert( "Key: " + k + ", Value: " + v );
});