在新游戏开始前将计时器和得分值重置为 0

Question

我是新手，但在新的记忆游戏开始之前，我一直在尝试让我的计时器和得分值回到 0 时遇到一些麻烦。这些值确实会重置，但在该值受到影响之前不会显示它。例如，比赛数量的值永远不会回到 0，它保持在 10（最大对数），直到你找到下一场比赛的第一场比赛，然后它会变成 1。有没有人知道如何当调用新板时让值再次显示 0 而不是在该值受到影响时重置？

我已经设置了

var turns = 0
var matches = 0

并在函数 newBoard() 中将它们作为 0 调用。

我的计时器代码是：

var c = 0;
  var t;
  var timer_is_on = 0;

  function timedCount() {
      document.getElementById('txt').value = c;
      c = c+1;
      t = setTimeout(timedCount, 1000);
  }

  function startTimer() {
      if (!timer_is_on) {
          timer_is_on = 1;
          timedCount();
      }
  }

  function stopCount() {
      clearTimeout(t);
      timer_is_on = 0;
  }

  function resetTime(){
   clearTimeout(t);
   timer_is_on = 0;
   c = 0

我在 newBoard() 函数中调用了 resetTime() 函数。

我的完整代码是：

body{
 background:#FFF;
 font-family: Cooper Black;
}
h1{
 font-family: Cooper Black;
 text-align: center;
 font-size: 64px;
 color: #FF0066;
}
footer{
 height: 150px;
 background: -webkit-linear-gradient(#99CCFF, #FFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#99CCFF, #FFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#99CCFF, #FFF); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#99CCFF, #FFF); /* Standard syntax (must be last) */
}
div#memory_board{
 background: -webkit-radial-gradient(#FFF, #CC99FF); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#FFF, #CC99FF); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(#FFF, #CC99FF); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#FFF, #CC99FF); /* Standard syntax (must be last) */
 border:#FF0066 10px ridge;
 width:510px;
 height:405px;
 padding:24px;

}
div#memory_board > div{
 background:url(tile_background.png) no-repeat;
 border:#000 1px solid;
 width:45px;
 height:45px;
 float:left;
 margin:7px;
 padding:20px;
 cursor:pointer;
 }
alert{
 background: #FF0066;
}

button{
 font-family: Cooper Black;
 font-size: 20px;
 color: #FF0066;
 background: #5CE62E;
 border: #C2E0FF 2px outset;
 border-radius: 25px;
 padding: 10px;
 cursor: pointer;
}
input#txt{
 background: yellow;
 color: #FF0066;
 font-family: Times New Roman;
 font-size: 84px;
 height: 150px;
 width: 150px;
 border-radius: 100%;
 text-align: center;
 border: none;
}
input#pause{
 font-family: Cooper Black;
 font-size: 18px;
 color: #FF0066;
 background: #C2E0FF;
 border: #C2E0FF 2px outset;
 border-radius: 25px;
 padding: 10px;
 cursor: pointer;
 margin-top: 10px;
}
div.goes{
 text-align: center;
 border: #C2E0FF 5px double;
 height: 160px;
 width: 120px;
 margin-top: 48px;
 margin-left: 5px;
}
div.matches{
 text-align: center;
 border: #C2E0FF 5px double;
 height: 160px;
 width: 120px;
 margin-top: 30px;
 margin-left: 10px;
}
p{
 font-size: 28px;
}
span{
 font-family: Times New Roman;
 font-size: 84px;
}
.sprite {
 width:96px;
 height:96px;
 position: relative;
 margin:15px;
}
.toon{
 background: url(explode.png);
}
}
#dialogoverlay{
 display: none;
 opacity: 0.8;
 position: fixed;
 top: 0px;
 left: 0px;
 background: #FFF;
 width: 100%;
 z-index: 10;
}
#dialogbox{
 display: none;
 position: fixed;
 background: #FF0066;
 border-radius:7px; 
 width:400px;
 z-index: 10;
}
#dialogbox > div{ background: #FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: linear-gradient(#99CCFF, #FFF); height: 40px; color: #CCC; }
#dialogbox > div > #dialogboxbody{ background: #FFF; color: #FF0066; font-size: 36px; text-align:center;}
#dialogbox > div > #dialogboxfoot{ background: linear-gradient(#FFF, #99CCFF); padding-bottom: 20px; text-align:center; }

<!DOCTYPE html>
<html>
<head>
 <title>Memory Card Game</title>
 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
 <link rel="stylesheet" type="text/css" href="reset.css" />
 <link rel="stylesheet" type="text/css" href="text.css" />
 <link rel="stylesheet" type="text/css" href="960.css" />
 <link rel="stylesheet" type="text/css" href="mystyles.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type='text/javascript' src='jquery.animateSprite.js'></script>

 <script>
  var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J'];
  var memory_values = [];
  var memory_tile_ids = [];
  var tiles_flipped = 0;
  var turns = 0
  var matches = 0
  Array.prototype.memory_tile_shuffle = function(){
      var i = this.length, j, temp;
      while(--i > 0){
          j = Math.floor(Math.random() * (i+1));
          temp = this[j];
          this[j] = this[i];
          this[i] = temp;
      }
  }
  function newBoard(){
   tiles_flipped = 0;
   var output = '';
      memory_array.memory_tile_shuffle();
   for(var i = 0; i < memory_array.length; i++){
    output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
   }
   document.getElementById('memory_board').innerHTML = output;
   //fade in
   $(document).ready(function () { 
    $('#memory_board > div').hide().fadeIn(1500).delay(6000)
   });
   resetTime();
   turns = 0;
   matches = 0;
  }
  
  function memoryFlipTile(tile,val){
  startTimer();
  playClick();
  if(tile.innerHTML == "" && memory_values.length < 2){
  tile.style.background = '#FFF';
  tile.innerHTML = '<img src="' + val + '.png"/>';
  if(memory_values.length == 0){
   memory_values.push(val);
   memory_tile_ids.push(tile.id);
  } else if(memory_values.length == 1){
   memory_values.push(val);
   memory_tile_ids.push(tile.id);
   if(memory_values[0] == memory_values[1]){
    tiles_flipped += 2;
    //sound
    playMatch();
    //animation

    //number of clicks
    turns = turns + 1;
    document.getElementById("Count").innerHTML = turns;
    //number of matches
    matches = matches + 1;
    document.getElementById("matchNumber").innerHTML = matches;
    // Clear both arrays
    memory_values = [];
             memory_tile_ids = [];
    // Check to see if the whole board is cleared
    if(tiles_flipped == memory_array.length){
     playEnd();
     Alert.render("Congratulations! Board Cleared");
     //resetTime()
     //stopCount();
     document.getElementById('memory_board').innerHTML = "";
     newBoard();
     
    }
   } else {
    function flipBack(){
        // Flip the 2 tiles back over
        var tile_1 = document.getElementById(memory_tile_ids[0]);
        var tile_2 = document.getElementById(memory_tile_ids[1]);
        tile_1.style.background = 'url(tile_background.png) no-repeat';
                 tile_1.innerHTML = "";
        tile_2.style.background = 'url(tile_background.png) no-repeat';
                 tile_2.innerHTML = "";
                 //number of clicks
                 turns = turns + 1;
     document.getElementById("Count").innerHTML = turns;
                 //clickNumber()
        // Clear both arrays
        memory_values = [];
                 memory_tile_ids = [];
    }
    setTimeout(flipBack, 700);
     }
    }
   }
  }
  //timer
  var c = 0;
  var t;
  var timer_is_on = 0;

  function timedCount() {
      document.getElementById('txt').value = c;
      c = c+1;
      t = setTimeout(timedCount, 1000);
  }

  function startTimer() {
      if (!timer_is_on) {
          timer_is_on = 1;
          timedCount();
      }
  }

  function stopCount() {
      clearTimeout(t);
      timer_is_on = 0;
  }

  function resetTime(){
   clearTimeout(t);
   timer_is_on = 0;
   c = 0
  }
  //sound effects /*sounds from http://www.freesfx.co.uk*/
  function playClick(){
   var sound=document.getElementById("click");
   sound.play();
  }
  function playMatch(){
   var sound=document.getElementById("match_sound");
   sound.play();
  }
  function playEnd(){
   var sound=document.getElementById("finished");
   sound.play();
  }

  //custom alert
  function CustomAlert(){
      this.render = function(dialog){
          var winW = window.innerWidth;
          var winH = window.innerHeight;
          var dialogoverlay = document.getElementById('dialogoverlay');
          var dialogbox = document.getElementById('dialogbox');
          dialogoverlay.style.display = "block";
          dialogoverlay.style.height = winH+"px";
          dialogbox.style.left = (winW/2) - (400 * .5)+"px";
          dialogbox.style.top = "200px";
          dialogbox.style.display = "block";
          document.getElementById('dialogboxhead').innerHTML = "";
          document.getElementById('dialogboxbody').innerHTML = dialog;
          document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">New Game</button>';
      }
   this.ok = function(){
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
   }
  }
  var Alert = new CustomAlert();

 </script>
 <script>//sparkle effect: http://www.rigzsoft.co.uk/how-to-implement-animated-sprite-sheets-on-a-web-page/
  $(document).ready(function(){
   $("#memory_board").click(function animation(){
    $(".toon").animateSprite({
        columns: 10,
        totalFrames: 50,
        duration: 1000,
    });
   });
  });
 </script>

</head>
<body>
 <audio id = "click" src = "click.mp3" preload = "auto"></audio>
 <audio id = "match_sound" src = "match.mp3" preload = "auto"></audio>
 <audio id = "finished" src = "finished.wav" preload = "auto"></audio>

 <div id = "dialogoverlay"></div>
 <div id = "dialogbox">
  <div>
   <div id = "dialogboxhead"></div>
   <div id = "dialogboxbody"></div>
   <div id = "dialogboxfoot"></div>
  </div>
 </div>

 <div class = "container_16">
  <div id = "banner" class = "grid_16">
   <p><br></p>
   <h1>Memory</h1>
  </div>
  <div class = "grid_3">
   <input type="text" id="txt" value="0"/>
   <p><br></p>
   <p><br></p>
   <div class = "goes">
    <p>Turns <br><span id = "Count">0</span></p>
   </div>
  </div>
  <div class = "grid_10">
   <div id="memory_board"></div>
   <script>newBoard();</script>
   <div style="position: relative; height: 110px;">
    <div class="sprite toon"></div>
   </div>
  </div>
  <div class = "grid_3">
   <button id = "new_game" onclick="newBoard()">New Game</button>
   <input type="button" id="pause" value="Pause Game" onclick="stopCount()">
   <p><br></p>
   <p><br></p>
   <p><br></p>
   <div class = "matches">
    <p>Matches <br><span id = "matchNumber">0</span></p>
   </div>
  </div>
 </div>
 <footer> </footer>
</body>
</html>

Answer 1

我不是 100% 确定，但您可以尝试用这个函数替换您的函数：

    function timedCount() {
        if(c>10){
           //flipBack();
           resetTime();
           return;
        }
        document.getElementById('txt').value = c;
        c = c+1;
        t = setTimeout(timedCount, 1000);
    }

Answer 2

您设置的两个变量都显示在 HTML 个跨度对象中。

似乎正在发生的事情是，当您重置 Javascript 变量时，该值正在更改，但是向用户显示它的 span 对象将保留其先前的值，直到它需要待再次更新。

据我所知，您的对象具有 ID：matchNumber 和 Count 分别用于匹配和转向变量。如果是这种情况，请尝试更改代码以在变量重置为零时将 HTML 中的值重置为零。

例如：

// Reset the Javascript Count
var turns = 0
// Reset the HTML object
document.getElementById('Count').innerHTML = 0;
// Reset the Javascript Match Count
var matches = 0
// Reset the HTML object
document.getElementById('matchNumber').innerHTML = 0;

如果我没解释清楚，请评论，我会尽力澄清。

在新游戏开始前将计时器和得分值重置为 0

Resetting timer and score values to 0 before a new game starts

javascript

timer

reset