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 RaphaelJS to draw the square and a few of JQuery ($.each() function)

I work in a div, that's how I draw my squares (6 squares), x y are random numbers.

 var rec1 = paper.rect(x, y, 50, 50).attr({
            fill: "blue",});

Can I use for() to build my squares with a different var name for each one ? I try with var = varName+i but it didn't work.

To hide and show the square I use two functions call with two setTimeout:

 function box1()  {rec1.show();}
 function hidebox1()  {rec1.hide();}
 var time1 = setTimeout(box1, 1000);
 var time1 = setTimeout(hidebox1, 2000);

I know it looks crappy...

I'm sure there is a way to use a toggle, or something more fancy to do that if you could help me finding it :) Because right now I have to do that for every square...

Thanks a lot for your help.

回答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.

回答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);

来源：https://stackoverflow.com/questions/5841979/simple-javascript-game-hide-show-random-square

标签

javascript

jquery

raphael