javaScript實現(xiàn)游戲倒計時功能

發(fā)布時間：2020-10-18 20:11:11 來源：腳本之家閱讀：251 作者：Z_唐欄目：web開發(fā)

本文實例為大家分享了js實現(xiàn)游戲倒計時的具體代碼，供大家參考，具體內(nèi)容如下

<html>

 <head>
  <meta charset="utf-8" />
  <title></title>

  <style>
   button:hover {
    cursor: pointer;
   }
  </style>

  <script>
   //1.獲取游戲的總時間 
   //2.游戲開始的時間 
   //3.游戲進(jìn)行時 
   //4. 游戲進(jìn)行時 - 游戲開始時間 = 玩家游戲時長
   //5. 游戲總時間 - 玩家游戲時長 = 游戲倒計時

   var zt;
   var startBtn;  
   var djs_span;
   var game_time; //游戲總時長
   var game_start; //游戲開始時間
   var game_djs; //游戲倒計時
   var id; //計時器id
   var isZT = false; //判斷是否為暫停，false表示未點擊暫停
   var zt_time; //暫停時的倒計時值
   var jx_id; //繼續(xù)游戲的倒計時id

   window.onload = function() {

    //開始游戲
    startBtn = document.getElementById("start");
    //暫停游戲
     zt = document.getElementById("zt");
    //游戲倒計時
    djs_span = document.getElementById("djs");

    //開始游戲
    startBtn.onclick = function() {

     clearTimeout(jx_id);
     if(isZT) {
      var reset = confirm("您的游戲正在進(jìn)行中，確定要重新開始嗎？");
      if(reset) {
       zt.textContent = "暫停游戲";
       isZT = false;
      } else {
       return;
      }
     }

     //獲取游戲總時長
     game_time = document.getElementById("time").value * 60; //把所獲取的游戲總時長變成秒
     //記錄游戲開始時間
     game_start = new Date();
     //禁用開始按鈕
     startBtn.disabled = true;
     djs();

    }

    //停止游戲
    document.getElementById("stop").onclick = function() {
     game_stop();
     //還原開始按鈕
     startBtn.disabled = false;
    }

    //暫停游戲
    zt.onclick = function() {
     game_zt();
     if(isZT) {
      //點擊繼續(xù)按鈕
      zt.textContent = "暫停游戲";
      isZT = false;
      //禁用開始按鈕
      startBtn.disabled = true;
      //記錄繼續(xù)游戲開始時間
      game_start = new Date();
      game_jx();

     } else {
      //點擊暫停按鈕
      zt.textContent = "繼續(xù)游戲";
      isZT = true;
      //還原開始按鈕
      startBtn.disabled = false;
      zt_time = game_djs;
      game_zt();
     }

    }

   }

   //倒計時方法
   function djs() {
    //獲取游戲進(jìn)行時
    var playing = new Date();

    game_djs = game_time - parseInt((playing - game_start) / 1000); //
    djs_span.innerHTML = game_djs;
    id = setTimeout("djs()", 1000); //步長

    //游戲結(jié)束
    if(game_djs < 1) {
     clearTimeout(id);
     alert("游戲結(jié)束");
    }
   }

   //暫停游戲
   function game_zt() {
    clearTimeout(id);
    clearTimeout(jx_id);
   }

   //繼續(xù)游戲
   function game_jx() {
    //獲取游戲進(jìn)行時
    var playing = new Date();

    game_djs = zt_time - parseInt((playing - game_start) / 1000); //
    djs_span.innerHTML = game_djs;
    jx_id = setTimeout("game_jx()", 1000); //步長

    //游戲結(jié)束
    if(game_djs < 1) {
     clearTimeout(jx_id);
     alert("游戲結(jié)束");
    }
   }

   //停止游戲
   function game_stop() {
    clearTimeout(id);
    clearTimeout(jx_id);
    game_djs = 0;
    djs_span.innerHTML = game_djs;
   }
  </script>

 </head>

 <body>

  游戲總時長：<input id="time" type="text" size="5px" value="1" />分鐘 </br>
  倒計時：<span id="djs"></span>&nbsp;&nbsp;秒 </br>
  <button id="start">開始游戲</button>
  <button id="zt">暫停游戲</button>
  <button id="stop">停止游戲</button>
 </body>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

javaScript實現(xiàn)游戲倒計時功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽