Question

我最近一直致力于构建一款名为＆＃34;关闭＆＃34;的游戏。但是，我无法修复的一个错误是当游戏结束并且用户尝试重播或转到菜单时，计时器不会再次启动。我尝试了不同的方法。

//start game
fiveMinutes = 60 * .2;
function start() {
  $(document).ready(function() {
    document.getElementById('menu').style.display = 'none';
    document.getElementById('game').style.display = 'block';
  });
  score = 0;
    if(fiveMinutes == 60 * .2){
        startTimer(fiveMinutes);
        genartor();
        Score();
    }

}
//=========================================================================================================================\\
//timer
function startTimer(duration) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    if (--timer < 0) {
        game_over();
        return;
    } else if (timer < 1.25) {
      document.getElementById('Onecount').style.display = 'block';
    } else if (timer < 2.5) {
      document.getElementById('Twocount').style.display = 'block';
    } else if (timer < 5) {
      document.getElementById('Three').style.display = 'block';
    } else if (timer < 10) {
      document.getElementById('Four').style.display = 'block';
    }
  }, 1000);
}

function loadTimer() {
  document.getElementById('Onecount').style.display = 'none';
  document.getElementById('Twocount').style.display = 'none';
  document.getElementById('Three').style.display = 'none';
  document.getElementById('Four').style.display = 'none';
  startTimer(fiveMinutes);
}
//=========================================================================================================================\\
// random switcher genartordisplay = document.querySelector('#time');
function genartor() {
  var random = Math.random();
  if (random < 0.5) {
    document.getElementById("one").style.backgroundColor = "#01FF70";
    document.getElementById("two").style.backgroundColor = "#FF4136";
    one_genartor = true;
    two_genartor = false;
  } else {
    document.getElementById("two").style.backgroundColor = "#01FF70";
    document.getElementById("one").style.backgroundColor = "#FF4136";
    two_genartor = true;
    one_genartor = false;
  }
}
//=========================================================================================================================\\
//scoring sytstem
score = 0;

function Score() {
  var update_score = document.getElementById('scoring');
  update_score.innerHTML = "Score: " + score;

}
//=========================================================================================================================\\
//checking system
function check_one() {
  var one = true;
  if (one == true && one_genartor == true) {
    genartor();
    score = score + 1;
    Score();  
    loadTimer();
  } else if (one == true && one_genartor == false) {
    game_over();
  }
}

function check_two() {
  var two = true;
  if (two == true && two_genartor == true) {
    genartor();
    score = score + 1;
    Score();
    loadTimer();
  } else if (two == true && two_genartor == false) {
    game_over();
  }
}
//=========================================================================================================================\\
//game over function
var gameOver = false;
function game_over() {
gameOver = true;
  $(document).ready(function() {
    document.getElementById('game').style.display = 'none';
    document.getElementById('game_Over').style.display = 'block';
  });
  var end_score = document.getElementById('end_Scoring');
  end_score.innerHTML = "Your score was: " + score;
    fiveMinutes = 60 * .2;
}

function replay() {
  $(document).ready(function() {
    document.getElementById('game_Over').style.display = 'none';
    document.getElementById('game').style.display = 'block';
    start();
      gameOver = false;
  });
}

function menu() {
  $(document).ready(function() {
    document.getElementById('game_Over').style.display = 'none';
    document.getElementById('menu').style.display = 'block';
      gameOver =false;
  });
}

HTML

<html>
<header>
    <title>Light out</title>

    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="shortcut icon" href="url.png" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src="index.js"></script>
    <script src="https://dl.dropboxusercontent.com/u/42103336/web/wow.js"></script>
    <script>
    new WOW().init();

    </script>    

</header>

<body>
  <!-- menu-->
  <div id="menu" class="fadeIn animated">
    <h1>Lights off</h1>
    <button style="display:inline;" id="start" onclick="start();">start</button>

    <p class="makers">Wedde and Stijn</p>

      <!-- social media -->
      <div class="wow bounce animated" data-wow-delay="1s">
          <a href="www.facebook.com">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
      </span>
              </a>
          <a href="www.twitter.com">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
      </span>
              </a>
          <a href="www.instagram.com">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
      </span>
            </a>  
      </div>
  </div>

  <!-- game -->
  <div id="game" style="display: none;">
    <div id="scoring"></div>
    <span id="time"></span>
    <div style="display: none;" class="count-down" id="Onecount"></div>
    <div style="display: none;" class="count-down" id="Twocount"></div>
    <div style="display: none;" class="count-down" id="Three"></div>
    <div style="display: none;" class="count-down" id="Four"></div>



    <div id="one" onclick="check_one();"></div>
    <div id="two" onclick="check_two();"></div>

  </div>


  <!-- stop -->
  <div id="game_Over" style="display: none;">
    <h1>Game over</h1>
      <!--link mysql database -->

    <div id="end_Scoring"></div>
    <button id="play_again" onclick="replay();"><i class="fa fa-repeat"></i> play again</button>
    <button id="go_menu" onclick="menu();">go to the menu <i class="fa fa-home"></i></button>
  </div>
</html>

Answer 1

尝试清除间隔：

var intervalId = 0;
function startTimer(duration) {
  var timer = duration,
    minutes, seconds;
    intervalId = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    if (--timer < 0) {
        game_over();
        clearInterval(intervalId);
        return;
    } else if (timer < 1.25) {
      document.getElementById('Onecount').style.display = 'block';
    } else if (timer < 2.5) {
      document.getElementById('Twocount').style.display = 'block';
    } else if (timer < 5) {
      document.getElementById('Three').style.display = 'block';
    } else if (timer < 10) {
      document.getElementById('Four').style.display = 'block';
    }
  }, 1000);
}

javascript游戏计时器不会重新加载

1 个答案: