0

機能性:

ゲーム開始前に、xSecs でゲームが開始されることをユーザーに通知する通知期間があります。この通知期間中、ユーザーは次の機能を使用できません。

  1. カウントダウンカウンターが始まらない
  2. ユーザーがボタンをクリックしようとしたときに、ゲームの「Tap Me」画像ボタンをクリックできない

したがって、通知期間の後、カウンターはカウントダウンシーケンスを開始し、ユーザーは「Tap Me」画像ボタンをタップして画像をページの上部からページの下部に移動します。

私がやった事：

通知タイマー、カウントダウン カウンター、ゲーム タップを作成しました。したがって、現時点では、カウントダウン タイマーは、通知タイマーが完了したときにのみカウントを開始します。

問題：

通知期間中であっても、ユーザーは「Tap 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>

4

1 に答える 1

2

disabledボタンの属性を に設定しますdisabled。次に、通知のカウントダウンが終了したら、次の JavaScript を使用してその属性を削除します。

document.getElementById("Tap").removeAttribute("disabled");
于 2015-12-03T16:10:27.583 に答える