CODEWITHSUNDEEP
javascriptcsshtml5-canvaskineticjs
Nevin
Nevin

Reputation: 3298

Please Explain what this code's logic is and the kinetic js part

Can someone explain the functions this.iterateItems and this.get in the following code?

I came across this code via a friend and i need some help with the explanation part of this.

    var LimitedArray = function (upperLimit) {
    var storage = [];

    // default limit on length if none/invalid supplied;
    upperLimit = +upperLimit > 0 ? upperLimit : 100;

    this.push = function (item) {
        storage.push(item);
        if (storage.length > upperLimit) {
            storage.shift();
        }
        return storage.length;
    };

    this.get = function (i) {
        return storage[i];
    };

    this.iterateItems = function (iterator) {
        var i, l = storage.length;
        if (typeof iterator !== 'function') { return; }
        for (i = 0; i < l; i++) {
            iterator(storage[i]);
        }
    };
};

$(document).ready(function() {
    var tail = new LimitedArray(50);

    var i = 0, j = 0;
    var stage = new Kinetic.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
        listening: true
    });
    var layer = new Kinetic.Layer({
        listening: true
    });
    var layer = new Kinetic.Layer();
    var player = new Kinetic.Circle({
        x: 20,
        y: 20,
        radius: 6,
        fill: 'cyan',
        stroke: 'black',
        draggable: true
    });

    layer.add(player);


    // move the circle with the mouse
    stage.getContent().addEventListener('mousemove', function() {
        layer.removeChildren();
        layer.add(player);
        player.setPosition(stage.getPointerPosition());
        var obj = {
            x: stage.getPointerPosition().x,
            y: stage.getPointerPosition().y
        };

        tail.push(obj);
        var arr = [];
        tail.iterateItems(function (p) {
            arr.push(p.x, p.y);
        });
        var line = new Kinetic.Line({
        points: arr,
        stroke: 'white',
        strokeWidth: 2,
        lineCap: 'round',
        lineJoin: 'round'
      });
        layer.add(line);
        layer.draw();
    });
    stage.add(layer);
});

Here's the html:

 <!DOCTYPE html>
<html>
    <head>
        <title>Collision Detection</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../css/style.css"/>
    </head>
    <body>
        <div id="container" style=" background:#000; margin:auto; float:left;"></div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kinetic-v5.0.0.min.js"></script>
        <script src="../js/main_kinetic.js"></script>
    </body>
</html>

If you need anything more,do comment. Thanx for your help.

Upvotes: 0

Views: 89

Answers (2)

Ashish Kumar
Ashish Kumar

Reputation: 3039

LimitedArray is a class which contains an Array.

And in the instance of this class, User is allowed:

  • to push intems in that array
  • to get item on some index
  • and to do looping in that array

get is to access some item in that particular array.

iterateItems is to do a loop in that array. in iterateItems function, you need to pass, that particular array is passed by default.

Upvotes: 0

Philipp
Philipp

Reputation: 69673

The class LimitedArray is a container-class. It has an array as a private variable (var storage) which is not directly accessible by the outside world. It does, however, expose some public functions to modify and access this array.

The function this.get(n) is an accessor function which simply provides access-by-index to the elements of the array. It returns the n'th element of that array.

The function this.iterateItems(iterator) expects you to pass a function as an argument. It then calls that function once for each element in the storage array passing that element to the function. It is a reinvention of the array.foreach() function from the standard which the author obviously didn't know about. This is also not what you usually call the iterator pattern.

When you would, for example, want to output each of the elements in the tail LimitedArray in the console using the console.log(object) function, you would call tail.iterateItems(console.log). In this program, however, the programmer of the code passes an anonymous function to it. This anonymous function passes each argument to another array. So it is just an elaborate way to copy all the elements of the internal storage array into the arr array.

Upvotes: 1

Related Questions