Simple Javascript Game, Hide / Show Random Square

I'm working on a simple game and I need some help to improve my code So here's the game: Some square show and hide randomely for a few seconds and you have to clic on them. I use

Solution 1:

Your instinct to try to use varName plus some i to identify which varName you want is spot on, and JavaScript (like most languages) has that idea built in through what's called an array.

A simple one looks something like this:

var foo = [1, 5, 198, 309];

With that array, you can access foo[0] which is 1, or foo[3] which is 309.

Note two things: First, we identify which element of the array we want using square brackets. Second, we start counting at 0, not 1.

You can create an empty array like var varName = []; and then add new elements to it using varName.push( newValueToPutIn );

With those tools, you can now get at what you wanted. Now you can do something like:

var recs = [];
for(var i = 0; i < 100; i++) {
    var rec = paper.rect(x, y, 50, 50).attr({fill: 'blue'});
    recs.push(rec);
}

And recs[0] and recs[1] and so forth will refer to your various boxes.

Solution 2:

For the first question, an array is the way to go. For the second part, you could encapsulate the square and its show/hide stuff into a new anonymous object, like this:

var recs = [];
var numberOfRecs = 6;
for (var i = 0; i < numberOfRecs; i++) {
    //determine x and y?
    recs.push({
        box: paper.rect(x, y, 50, 50).attr({ fill: "blue" }),
        showBriefly: function(timeFromNow, duration) {
            window.setTimeout(this.box.show, timeFromNow);
            window.setTimeout(this.box.hide, timeFromNow + duration);
        }
    });
}


//show the 3rd box 1000 ms from now, for a duration of 1000 ms
recs[2].showBriefly(1000, 1000);