Как вызвать метод запуска игры только после счетчика обратного отсчета времени затухания?

Question

Функциональность:

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

1. Обратный отсчет счетчик не начнет
2. Game «Нажмите Me» изображение кнопки не сможет быть нажата, когда пользователь пытается нажать на кнопку

Следовательно, после периода уведомления счетчик начнет последовательность обратного отсчета, пока пользователь нажмет кнопку «Tap Me», чтобы переместить изображение с верхней части страницы в нижнюю часть страницы.

То, что я сделал:

Я создал таймер оповещения, а также счетчик обратного отсчета и игры.Коснитесь. Следовательно, в этот момент таймер обратного отсчета начнет отсчет только после завершения таймера уведомления.

Выпуск:

Пользователи по-прежнему в состоянии использовать изображение кнопки «Нажмите Me», чтобы переместить изображение вниз страницы, даже в период уведомления. Следовательно, мне нужно убедиться, что пользователи не могут использовать кнопку изображения «Tap Me» во время обратного отсчета уведомлений, но только после обратного отсчета уведомления.

Поэтому, как я могу установить метод «Tap Me», который можно использовать только после обратного отсчета уведомления?

var count = 5, 
 
    interval, CounterInterval, x; 
 
//Method to enable star to decrease when 'tap' button is tapped 
 
var step = 20, 
 
    counter = 0, 
 
    timer = 20; 
 
//To set bottom limit variable 
 
var bottomStarLimit = 2308; 
 

 
function GameStartTimer() { 
 
    if (count > 0) { 
 
     $("#CountdownFadeInTimer").fadeOut('slow', function() { 
 
     $("#CountdownFadeInTimer").text(count); 
 
     $("#CountdownFadeInTimer").fadeIn(); 
 
     count--; 
 
     }); 
 
    } else if (count == 0) { 
 
     $("#CountdownFadeInTimer").fadeOut('slow', function() { 
 
     $("#CountdownFadeInTimer").text("Start!!"); 
 
     $("#CountdownFadeInTimer").fadeIn(); 
 
     count--; 
 
     //method call to Game function & Timer  
 
     initiateGameTimer(); 
 
     GameStart(); 
 
     }); 
 
    } else { 
 
     //fade out countdown text 
 
     $("#CountdownFadeInTimer").fadeOut(); 
 
     clearInterval(interval); 
 
    } 
 
    } 
 
    //Trigger to set GameStartTimer function: fade in notification counter 
 
interval = setInterval(function() { 
 
    GameStartTimer() 
 
}, 2000); 
 

 
//Tap the star down function 
 
function GameStart() { 
 
    console.log("GameStart"); 
 
    x = document.getElementById('GameStar').offsetTop; 
 
    console.log("x:" + x); 
 
    //check condition if star reach bottom page limit, else continue to move down 
 
    if (x < bottomStarLimit) 
 
    x = x + step; 
 
    document.getElementById('GameStar').style.top = x + "px"; 
 
} 
 

 
function initiateGameTimer() { 
 
    CounterInterval = setInterval(function() { 
 
    counter = counter + 1; 
 
    timer = timer - 1; 
 
    $('#GameTime').html(timer); 
 
    console.log(timer); 
 
    // Gamce condition check when timer =0: position of the star <or> 2308(bottom page limit) 
 
    if (timer == 0) { 
 
     clearInterval(CounterInterval); 
 
     if (x >= 2308) { 
 
     $("#GamePage").hide(); 
 
     $("#Congratulations").show(); 
 
     } else if (x < 2308) { 
 
     console.log("fail"); 
 
     $("#GamePage").hide(); 
 
     $("#GameOver").show(); 
 
     } 
 
    } 
 
    }, 1000) 
 
}

<div id="GamePage" style="width:100%; height:100%;z-index=1;"> 
 

 
    <div id="CountdownFadeInTimer"></div> 
 

 
    <p id="GameTime">20</p> 
 
    <img id="GameStar" type="image" src="lib/Elements/The%20Star.png"> 
 
    <button id="Tap" type="image" src="lib/Elements/Tap%20here%20button.png" onclick="GameStart()" /> 
 

 
</div>

Answer 1

Установите атрибут кнопки disabled к disabled. Затем удалите этот атрибут, когда закончится обратный отсчет уведомления, используя следующий JavaScript:

document.getElementById("Tap").removeAttribute("disabled");