Простая игра JavaScript, скрыть / показать случайный квадрат - PullRequest
Новая
       0

Простая игра JavaScript, скрыть / показать случайный квадрат

0 голосов
/ 30 апреля 2011

Я работаю над простой игрой, и мне нужна помощь, чтобы улучшить мой код

Итак, вот игра:

Некоторые квадратные показы и случайное скрытие в течение нескольких секунд, и у вас естьнажать на них.Я использую RaphaelJS для рисования квадрата и нескольких JQuery (функция $ .each ())

Я работаю в div, вот как я рисую свои квадраты (6 квадратов), xy - случайные числа. 

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

Могу ли я использовать for () для построения своих квадратов с разными именами переменных для каждого из них? Я пытаюсь использовать var = varName + i, но это не сработало.

Чтобы скрыть и показать квадрат, я использую вызов двух функций с двумя setTimeout: 

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

Я знаю, это выглядит дерьмово ...

Я уверен, что естьспособ использовать тумблер, или что-то более причудливое, чтобы сделать это, если бы вы могли помочь мне найти его :) Потому что сейчас я должен сделать это для каждого квадрата ...

Большое спасибо заваша помощь.

Ответы [ 2 ]

1 голос
/ 30 апреля 2011

Ваш инстинкт пытается использовать varName плюс некоторые i, чтобы определить, на каком месте вы хотите varName, и в JavaScript (как и в большинстве языков) эта идея встроена в то, что называется * 1005. * массив .

Простой выглядит примерно так: 

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

С этим массивом вы можете получить доступ к foo[0], который равен 1, или foo[3], который равен 309.

Обратите внимание на две вещи: во-первых, мы определяем, какой элемент массива мы хотим, используя квадратные скобки. Во-вторых, мы начинаем считать с 0 , а не 1.

Вы можете создать пустой массив, например var varName = [];, а затем добавить в него новые элементы, используя varName.push( newValueToPutIn );

С этими инструментами вы теперь можете получить то, что хотели. Теперь вы можете сделать что-то вроде: 

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

И recs[0] и recs[1] и т. Д. Будут относиться к вашим различным клеткам.

0 голосов
/ 30 апреля 2011

Для первого вопроса, массив - это путь.Во второй части вы можете инкапсулировать квадрат и его элементы отображения / скрытия в новый анонимный объект, например: 

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);
...