Как сделать ожидание нажатия кнопки и потом разрешить нажатия следующих кнопок?

Question

Awhysl @Awhysl

JavaScript

Как сделать ожидание нажатия кнопки и потом разрешить нажатия следующих кнопок?

Всем доброго времени суток, хотел бы спросить, как сделать ожидание нажатия кнопки и потом разрешить нажатие следующих кнопок?
Разъясню подробнее: Я делаю игру на HTML5 + CSS3 + JS/JQuery, ритмичная игра, в общем, написал не большой код, генерации стрелок (случайно/рандомно) и добавления их в div - "arrows", есть 4 стрелки (влево, вверх, вправо, вниз) так как их только 4 стрелки, то конечно же некоторые из 4 стрелок генерируется 2+ раз в одной строке стрелок. Нужно сделать так, чтобы после генерации стрелок, поочередно проверять, если все правильно нажаты (проверка идет справа налево - такова игра), то есть - пока не нажал первую стрелку, не сможешь нажать вторую, третью и так далее.. При промахе (не вовремя нажата стрелка - она просто удаляется), значит нужно сделать так, чтобы следующие стрелки прожимались по той же траектории (системе) о которой написал чуть выше.

Вот код генерации стрелок:

function create(step_arrow) { // Функция содержит аргумент step_arrow, который принимает номер стрелки, то есть, это будущий ID стрелки при её появлении.
// Функция вызывается такой строкой: setTimeout(create("1"), 80040);
// Единица в setTimeout(create("1"), 80040); это ID стрелки, то есть каждая такая строка, это вызов стрелки в  нужно время.
	var array = ["left","right","up","down"]; // Массив стрелок (влево, вправо, вверх, вниз)
	var i; // Переменная для цикла
	var generated; // Переменная, которая будет содержать, сгенерировую стрелку.
	
	for (i = 0; i < array.length; ++i) { // Цикл вывода стрелок из массива
    	generated = array[Math.floor(Math.random() * array.length)]; // Генерация стрелки из массива в generated
	}

	$(".arrows").append("<div id='"+step_arrow+"' class='arrow-"+generated+"'></div>");  // Добавляем стрелку в div - "arrows" с особым ID (step_arrow).

        // Стили для стрелок
	$(".arrow-left").css({
				background: 'url(\'img/arrow-left-normal.png\')',
				width: '41px'
	});
	$(".arrow-right").css({
				background: 'url(\'img/arrow-right-normal.png\')',
				width: '41px'
	});
	$(".arrow-up").css({
				background: 'url(\'img/arrow-up-normal.png\')',
				width: '39px'
	});
	$(".arrow-down").css({
				background: 'url(\'img/arrow-down-normal.png\')',
				width: '39px'
	});
        // Конец стилей

	var correct = ".arrow-" + generated; // Присваиваем название сгенерированной стрелки к .arrow-, чтобы наложить на стрелку анимацию передвижения.

// Анимация
	$(correct).animate({ 
           left: "950px",
      	   }, 2113, "linear", function() {
    	   if ($(correct).length > 0)
    	   {
    	       $('.mark').css({
       	          width: '106px',
       	          height: '40px',
       	          background: 'url(\'img/miss.png\')'
       	       });
             $(correct).remove(); // Удаляем стрелку, если она не была нажата вовремя (по позиции).
          }
 });

А вот функция которая проверяет нажатие стрелки и по позиции передвижения стрелки выдавать оценку (когда была нажата стрелка):

$(window).keydown(function(evt) { // При нажатии на любую клавишу клавиатуры, начинается проверка.
	var keycode = evt.which; // Переменная keycode содержит код нажатой клавиши.
	var keyname; // Переменная keyname будет содержать имя нажатой стрелки, смотрите ниже:
	if (keycode == 37) {keyname = "left";}
	if (keycode == 38) {keyname = "up";}
	if (keycode == 39) {keyname = "right";}
	if (keycode == 40) {keyname = "down";}


if ($('.arrow-'+keyname).length > 0) // Идет проверка, если существует стрелка, точнее идет присваивания название нажатой стрелки к div стрелки и идет проверка, существует ли такая стрелка
	{
               // При особых позициях стрелки будет вызвана функция mark, которая принимает название оценки и название нажатой стрелки.
		var pos = $('.arrow-'+keyname).position();
		if (pos.left < 718) {
		   	mark('miss', keyname);
		   }
		if (pos.left > 718 && pos.left < 734) {
		   	mark('bad', keyname);
		   }
		if (pos.left > 734 && pos.left < 744) {
		   	mark('good', keyname);
		   }
		if (pos.left > 744 && pos.left < 765) {
		   	mark('cool', keyname);
		   }
		if (pos.left > 765 && pos.left < 769) {
		   	mark('perfect', keyname);
		   }
		if (pos.left > 769 && pos.left < 781) {
		   	mark('cool', keyname);
		   }
		if (pos.left > 781 && pos.left < 790) {
		   	mark('good', keyname);
		   }
		if (pos.left > 790 && pos.left < 800) {
		   	mark('bad', keyname);
		   }
		if (pos.left > 800) {
		   	mark('miss', keyname);
		   }
	}
});

И вот собственно функция mark которая выводит оценки:

function mark(grade, arrow) // Функция вывода оценок, принимает название оценки и нажатую стрелку
{
        // Стили вывода оценок и анимация
	$('.mark').css({
	background: 'url("img/'+grade+'.png") no-repeat top center'
	});
	setTimeout(function(){$('.mark').css({ background: 'none' });}, 500);
	$(".arrow-"+arrow).remove();
	$(".effect-bg-mode").css({ background: 'url("img/'+arrow+'-effect.png")'});
	setTimeout(function(){$(".effect-bg-mode").css({ background: 'none'});}, 500);
       // Конец стилей и анимации
}

Подскажите пожалуйста, как сделать ожидание между нажатиями стрелок? Чтобы нельзя было нажать например 2 или 5 стрелку, а строго с начала, точнее с 1 стрелки и так далее.

Дополнение к написанному выше:

К сожалению, на хостинг не смог залить, там какие то проблемы, скину исходники:
Ссылка на исходники - Dropbox