Accessing ith array within a javascript object

Question

I'm following a book with the following code, I can't seem to make the lines between the circles show up. It seems to be because if I do

drawLine(context, 1, 1, 100, 100, 3);

it works, however if I do:

drawLine(context, untangleGame.circles[1].x, 1, 100, 100, 3);

It wont work. So my question is how do I access that value. This is an example from a book which used jQuery for this.

It is for this bit of code, which draws a line from the first circle to every other circle, it then iterates over the other circles:

for (var i = 0; i < untangleGame.circles.length; i++) {
    var startPoint = untangleGame.circles[i];
    for (var j = 0; j < i; j++) {
        var endPoint = untangleGame.circles[j];
        drawLine(context, startPoint.x, startPoint.y, endPoint.x, endPoint.y, 1);
        untangleGame.lines.push(new Line(startPoint, endpoint,
        untangleGame.thinLineThickness));
    }
}

I have the example here:

http://jsfiddle.net/5wdjpryo/

The game I'm trying to follow is called untangle.

Answer 1

you need to initialize your untangleGame object, see this update http://jsfiddle.net/5wdjpryo/1/ Basically add var c = new Circle(x, y); untangleGame.circles.push(c); var c = new Circle(x, y); untangleGame.circles.push(c); when you draw circles.

    var canvas = document.getElementById('game');

    // canvas height and width:
    var width = canvas.width;
    var height = canvas.height;

    function Circle(x, y, radius) {
        this.x = x;
        this.y = y;
    }



    var context = canvas.getContext && canvas.getContext('2d');

    function drawCircle(context, x, y, radius) {
        context.fillStyle = 'green';
        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
    }

    drawCircle(context, 100, 100, 10);

    // draw random 5 circles:
    var circleRadius = 10;
    var circlesCount = 5;

        // the game object:
    var untangleGame = {
        circles: [],
        thinLineThickness: 1,
        lines: []
    };

    for (var i = 0; i < circlesCount; i++) {
        var x = Math.random() * width;
        var y = Math.random() * height;
        var c = new Circle(x, y);
        untangleGame.circles.push(c);
        drawCircle(context, x, y, 10);
    }

    // drawing line and line object:
    function Line(startPoint, endpoint, thickness) {
        this.startPoint = startPoint;
        this.endPoint = endPoint;
        this.thickness = thickness;
    }




    function drawLine(context, x1, y1, x2, y2, thickness) {
        context.beginPath();
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.lineWidth = thickness;
        context.strokeStyle = "#cfc";
        context.stroke();
    }

    // checking that drawLine works
    drawLine(context, 1, 1, 100, 100, 3);

    for (var i = 0; i < untangleGame.circles.length; i++) {
        var startPoint = untangleGame.circles[i];
        for (var j = 0; j < i; j++) {
            var endPoint = untangleGame.circles[j];
            drawLine(context, startPoint.x, startPoint.y, endPoint.x, endPoint.y, 1);
            untangleGame.lines.push(new Line(startPoint, endPoint,
            untangleGame.thinLineThickness));
        }
    }