The Latest News on the HTML5 + JavaScript Game Engine enchant.js

22 Oct

Greetings! Alan here.

Let’s dive right back into programming!

This time, let’s talk about functions!

You may have heard about functions in school. Did you know, however, that the original Japanese word for “function” means “box?”

Not quite what you were expecting, huh?

We’re not talking about numbers so much as we are shapes.

In today’s world of computer programming, “functions” can refer to much more than just numbers.

Computer functions are skilled at creating movements or operations.

By the way, how did last time’s homework turn out?

We took a loop that made a fern pattern and looped it again.

What kind of shape did you end up with?

function onLoad(){

logo.init();

penDown();

for(j=0;j<4;j++){

for(i=0;i<360;i++){

move(10);

turn(i);

}

turn(90);

}

penUp();

}

You can give this a try using the interpreter created by our own shi3z as well: http://junk.wise9.jp/js/ .

Now then, when we nest two loops the program gets rather complicated.

Doesn’t it seem a bit troublesome to write one loop at a time each you want to “draw a spiral” or “draw a circle?”

This is what functions are for. This is essentially different from the “functions” used in mathematics.

Let’s make a function for that spiral pattern, simplifying that loop.

function uzumaki(){ // This defines the function.

for(i=0;i<360;i++){

move(10);

turn(i);

}

}

function onLoad(){

logo.init();

penDown();

for(j=0;j<8;j++){

uzumaki(); //←This is where you call up the function.

turn(45);

}

penUp();

}

It’s not at all difficult to program a function.

A function repackages a program in a new framework.

Go ahead and execute the code above.

The results should be slightly different from what you created last go round.

The “function” defined above creates a new function called “uzumaki.”

It is “called up” inside the loop.

The function is “called up” by the function name and the parentheses behind it. Compare the upper and lower halves of the code.

Do you notice anything?

As it turns out, all the programs you’ve written up until now have used the function “onLoad.”

You’ve been writing functions without even realizing it!

Moreover, the now-familiar “turn” and “move” functions are functions defined in separate files. When you make a function, you make a command, and programming consists of summoning commands that you have written. Herein lies the fun of programming.

By defining various functions, you can create your own language, your own commands, and your own little world. One could indeed say that programming creates your own small universe.

Has this made functions a little more appealing?

Well, we’re still doing pretty boring stuff, so let’s attempt a bit of a function “prank.”

function uzumaki(){

for(i=0;i<360;i++){

move(Math.random()*10);

turn(i);

}

}

Many functions are already predetermined. Math.random is one of these.

This refers to a function called “random” within a genre called “Math.”

JavaScript contains countless functions. One couldn’t hope to remember them all. I certainly can’t.

With that in mind, we’ll just introduce a few of the really essential ones. You’ll never need to remember all of them. I’d wager that no one has really memorized them all. If you search for “JavaScript Functions” online, you’ll find what you need when you need it.

Anyway, back to Math.random. This is an extremely interesting function that generates random numbers from 0 to 1. If you multiply it by 10, it will generate levels from 0 to 10. The line it generates might will have been drawn by a drunk.

By using random numbers, the results of the program always turn up differently. In other words, there’s nothing wrong if your results are different from the picture above.

The random numbers you see in games use functions just like this one.

This particular function feels quite apt for the “Math” category, but doesn’t the math you learn in classrooms seem kind of pointless? I mean, what useful purpose could f(x)=ax+b possibly serve?

Functions in programming are much more slick. These are functions that actually “function.”

If you rewrite uzumaki with Math.random, I think you’ll see how useful and interesting functions can be. Give it a try!

I said that Math.random returns results from 0 to 1, but you can do this with your own functions as well.

You can also define parameters for math functions and functions like move and turn.

Try rewriting your program to what you see below.

function random(x){

return Math.random()*x;

}

function uzumaki(){

for(i=0;i<360;i++){

move(random(i));

turn(i);

}

}

function onLoad(){

logo.init();

penDown();

for(j=0;j<8;j++){

uzumaki();

turn(45);

}

penUp();

}

Math.random may be convenient, but it has a regrettably long name and writing out 10 or so is quite inconvenient. With this in mind, I made an original function for returning random numbers called random(x).

When defining functions, if you set your variables in the parameters section, you can use them in functions as well.

And when you want to return a value, you set the desired value after the “return” command.

In this case, that means you’re returning a level multiplied by x in Math.random.

The uzumaki function also features some clever craftsmanship when it calls up “random.”

We reset the area that was set as “10” to the variable “i.”

What happens?

“i” expands from 0 to 360, so here the random numbers generated also expand from 0 to 360. In other words, our drunk’s strides get wider and wider the further he goes.

Give it a try!

Also, here’s some additional ideas to try out.

Practice Problems

- Assign some random numbers to “move”

2. Try making your own circle or square function.