Блог

Начинающий веб-разработчик и участник stackoverflow здесь,

В настоящее время я участвую в буткемпе по веб-разработке Udemy и изучаю JavaScript и jQuery. Оценка состоит в том, чтобы создать игру Саймона. Я уже закончил его, но хотел внести некоторые изменения.

В игре Simon есть несколько кнопок (в моем случае четыре кнопки синего, красного, желтого и зеленого цветов), и они выбираются случайным образом, создавая последовательность цветов. Затем игрок должен нажать кнопки в следующей последовательности. Если все в порядке, будет выбран новый цвет и добавлен в существующую последовательность.

В оценке каждый раз, когда уровень завершен, отображается только новая кнопка. Вот в чем разница между этим и тем, что я хочу сделать: я хочу снова показать полную последовательность, закончив новым цветом.

Что я попробовал: я использовал цикл for, чтобы войти в последовательность. Внутри цикла каждый цвет в последовательности будет отображаться один за другим, и я использовал setTimeout для создания временного интервала между каждым цветом. Вот код:

 // This function generates a new position in the gamePattern by randomly select
// a number between 0-4 and finding the correspond colour in buttonColours

function nextSequence() {

  ...some code
  for (var j=0; j<level; j  ) {
    doSetTimeout(j, gamePattern);
  }
}

// This is the function that doesn't work ----------------------------
// I think the trouble is the delay function I'm using: setTimeout
// Maybe the for loop above is running this function as many times as there are
// colours in gamePattern but it doesn't wait to finish the last timeOut, and
// all setTimeOuts are running at the same time. I hope I was clear, I'm not a
// native english speaker. Sorry if I wasn't

function doSetTimeout(j, gamePattern) {

  setTimeout(function() {
    // This is the animation of the buttons in the game pattern
    $("#"   gamePattern[j]).fadeOut(100).fadeIn(100);
    playSound(gamePattern[j]);

  }, 1000);

}
 

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

Извините, если там так много текста. Я только хотел быть откровенным.

Я загрузил код в репозиторий GitHub, если кому-то интересно прочитать код. https://github.com/jsierrabravo/simonGame

Спасибо вам всем!

Попробуйте что-нибудь вроде этого:

 setTimeout(function() {
    // This is the animation of the buttons in the game pattern
    $("#"   gamePattern[j]).fadeOut(100).fadeIn(100);
    playSound(gamePattern[j]);

  }, 1000 * j);
 

Изменение: 1000 * j как переменная времени ожидания в миллисекундах. Это приведет к тому, что ваши кнопки не будут отображаться все сразу.