Khan academy >> Random Walker

<< 칸아카데미의 Advenced JS를 학습한 내용입니다. 칸선생님 감사합니다. by 해인>>

The Random Walker Object

Let's review a bit of object-oriented programming (OOP) first by building a Walker object. This will be only a cursory review. If you have never worked with OOP before, you should go through the section on Object-Oriented JavaScript.

An object in JavaScript is a data type that has both properties and functionality attached to it, via its prototype. We are looking to design a Walker object that both keeps track of its data (where it exists on the screen) and has the capability to perform certain actions (such as draw itself or take a step).

In order to create instances of Walkers, we need to define a Walker object. We'll use that object as the cookie cutter, and each new Walker instance are the cookies.

Let's begin by defining the Walker object type. The Walker only needs two pieces of data—a number for its x-location and one for its y-location. We'll set those in its constructor function, setting them to the center of the canvas.

var Walker = function() {
    this.x = width/2;
    this.y = height/2;
};

In addition to keeping track of its x and y, our Walker object will also have methods that we can call on it. The first will be a method that allows the object to display itself as a black dot. Remember that we add methods to an object in JavaScript by attaching them to the object's prototype.

Walker.prototype.display = function() {
    stroke(0, 0, 0);
    point(this.x, this.y);
};

The second method directs the Walker object to take a step. Now, this is where things get a bit more interesting. Remember that floor on which we were taking random steps? Well, now we can use our canvas in that same capacity. There are four possible steps. A step to the right can be simulated by incrementing x (x++); to the left by decrementing x (x--); forward by going down a pixel (y++); and backward by going up a pixel (y--). How do we pick from these four choices? Earlier we stated that we could flip two coins. In ProcessingJS, however, when we want to randomly choose from a list of options, we can pick a random number using random().

Walker.prototype.walk = function() {
    var choice = floor(random(4));
};

The above line of code picks a random floating point number between 0 and 4 and converts it to a whole number by using floor(), with a result of 0, 1, 2, or 3. Technically speaking, the highest number will never be 4.0, but rather 3.999999999 (with as many 9s as there are decimal places); since floor() returns the closest whole number that is lesser or equal, the highest result we can get is 3. Next, we take the appropriate step (left, right, up, or down) depending on which random number was picked.

Walker.prototype.walk = function() {
    var choice = floor(random(4));
    if (choice === 0) {
        this.x++;
    } else if (choice === 1) {
        this.x--;
    } else if (choice === 2) {
        this.y++;
    } else {
        this.y--;
    } 
};

Now that we've written the class, it's time to make an actual Walker object in our program. Assuming we are looking to model a single random walk, we declare and initialize one global variable of type Walker, by calling the constructor function with the new operator.

var w = new Walker();

Now, to make the walker actually do something, we define the draw() function, and tell the walker to take a step and draw itself each time that's called:

var draw = function() {
    w.walk();
    w.display();
};

Since we don't call background() in the draw function, we can see the trail of the random walk on our canvas:

<코드>

var Walker = function() {

    this.x = width / 2;

    this.y = height / 2;

};

Walker.prototype.display = function() {

    stroke(0, 34, 255);

    point(this.x, this.y);

};

Walker.prototype.walk = function() {

    var num = floor(random(4));

    if (num === 0) {

        this.x++;

    } else if (num === 1) {

        this.x--;

    } else if (num === 2) {

        this.y++;

    } else {

        this.y--;

    }

};

var guy = new Walker();

draw = function() {

    guy.display();

    guy.walk();

};