Question

我尝试对游戏进行重置按钮

我尝试使用名为startGame的make函数来重新加载卡并重新加载按钮，它应该将所有卡恢复为默认情况并清除所有添加的类，但这不会发生

html代码

<body>
    <div class="features">
        <header>
            <h1>Memory Game</h1>
        </header>
        <ul class="stars">
            <li id ="starOne"><i class="fas fa-star"></i></li>
            <li id="starTwo"><i class="fas fa-star"></i></li>
            <li id="starThree"><i class="fas fa-star"></i></li>
        </ul>
        <div class="moves">
            <p><b><span id ="steps">00</span> Moves</b></p>
        </div>
        <div class="timer">
            <p><b>Time <span id="minutes">00</span> M : <span id="seconds">00</span> S</b></p>
        </div>
        <button type="button" class="restart"><i class="fas fa-redo-alt"></i>   Reset</button>
        <button class="info"><i class="fas fa-info"></i>  Info</button>
    </div>
    <div id="memory_Game">
        <div id="game_structure"></div>
    </div>

    <!-- <div class="restart" onclick="startGame()">
        <p><b>Reset</b></p> <i class="fa fa-refresh fa-spin fa-3x"></i>
    </div> -->
    <!-- congratulation message -->
    <div id="winner" class="win-modal">
        <div class="win-content">
            <h1>Congratulations! You win!</h1>
            <div class="win-msg">
                <h2>You've earned <span id="starScore"></span>!</h2>
          You won the game in time <span id="playTime"></span>  using <span id="trails"></span> moves.</div>
          <button id="playAgain" class="button">Play again</button>
        </div>
    </div>

    <script type="text/javascript" src="Card.js"></script>
</body>
</html>

var images = ["fas fa-american-sign-language-interpreting", "fas fa-american-sign-language-interpreting", "fas fa-cut", "fas fa-cut", "fas fa-bicycle", "fas fa-bicycle", "fas fa-asterisk", "fas fa-asterisk", "fas fa-atom", "fas fa-atom", "fas fa-car-crash", "fas fa-car-crash", "fas fa-chess", "fas fa-chess", "fas fa-drum", "fas fa-drum"];

var oppened_card = [];
var matched_card = [];
var matchedCardContainer = [];
var moves = 0;
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");

window.onload = startGame();
const restartButton = document.querySelector('.restart');
console.log(restartButton);
restartButton.addEventListener('click', startGame);

function Shuffle(array) {
  var i = array.length,
    tempValue, randomindex;
  while (--i > 0) {
    randomindex = Math.floor(Math.random() * (i + 1));
    tempValue = array[randomindex];
    array[randomindex] = array[i];
    array[i] = tempValue;
  }
  return array;
}

function startGame() {
  images = Shuffle(images);

  const game_structure = document.getElementById('game_structure');

  const fragment = document.createDocumentFragment();

  for (let i = 0; i < images.length; i++) {
    var card = document.createElement("section");
    var front = document.createElement("div");
    var back = document.createElement("div");
    front.classList.add("front");
    back.classList.add("back");
    card.classList.remove('stopPointer', 'cardAnimate', 'hidden');
    front.classList.remove('front_ro');
    back.classList.remove('back_ro', "open");
    card.appendChild(front);
    card.appendChild(back);
    back.innerHTML = `<i class="${images[i]}"></i>`;
    fragment.appendChild(card);
    // debugger; 
  }
  game_structure.appendChild(fragment);
  reset();
  game_structure.addEventListener('click', element_Listener);
}

function element_Listener(event) {
  if (event.target.nodeName === 'SECTION') {
    startTimer();
    if (oppened_card.length < 2) {
      flip_Card(event);
    }
  }
}

function flip_Card(event) {
  event.target.childNodes[0].classList.add('front_ro');
  event.target.childNodes[1].classList.add('back_ro', "open");
  event.target.classList.add('stopPointer');
  if (oppened_card.length == 0) {
    oppened_card.push(event.target.childNodes[1].innerHTML);
    matched_card.push(event.target);

  } else if (oppened_card.length == 1) {
    oppened_card.push(event.target.childNodes[1].innerHTML);
    matched_card.push(event.target);
    moveCounter();
    matched_card[0].classList.add('cardAnimate');
    matched_card[1].classList.add('cardAnimate');

    if (oppened_card[0] == oppened_card[1]) {
      matchedCardContainer.push(matched_card[0], matched_card[1]);
      console.log(matchedCardContainer);
      match();
      game_over();
      // if (checked_classes.includes(false) == false){
      //     var lastMoves =`${document.getElementById("steps").innerHTML} Moves`;
      //     var lastTime = `Time= ${document.getElementById("minutes").innerHTML}M:${document.getElementById("seconds").innerHTML}S`;
      //     stopTimer();      
      // }
    } else {
      unmatch();
    }
  }
}

function moveCounter() {
  moves++;
  document.getElementById("steps").innerHTML = moves;
}

function match() {

  setTimeout(function() {
    matched_card[0].classList.add('hidden');
    matched_card[1].classList.add('hidden');
    oppened_card = [];
    matched_card = [];
  }, 1000);
}

function unmatch() {

  setTimeout(function() {
    matched_card[0].childNodes[0].classList.remove('front_ro');
    matched_card[0].childNodes[1].classList.remove('back_ro');
    matched_card[0].classList.remove('cardAnimate', 'stopPointer');
    matched_card[1].childNodes[0].classList.remove('front_ro');
    matched_card[1].childNodes[1].classList.remove('back_ro');
    matched_card[1].classList.remove('cardAnimate', 'stopPointer');
    oppened_card = [];
    matched_card = [];
  }, 1000);
}

let timerRunning = false;
var gameTime;

function startTimer() {
  if (!timerRunning) {
    timerRunning = true;

    var totalSeconds = 0;
    gameTime = setInterval(setTime, 1000);
  }

  function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds % 60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
  }

  function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
      return "0" + valString;
    } else {
      return valString;
    }
  }
}

function stopTimer() {
  if (timerRunning) {
    timerRunning = false;
    clearInterval(gameTime);
  }
}
// var checked_classes =[];
function game_over() {
  // var hidden_cards = document.getElementsByTagName('section');
  // // console.log(hidden_cards);
  // for (let hidden_card of hidden_cards){
  // //    console.log(hidden_card);
  //    let checked_class = hidden_card.classList.contains("hidden");
  //    checked_classes.push(checked_class);
  // //    console.log(checked_classes);

  // }
  if (matchedCardContainer.length == images.length) {
    var lastMoves = `${document.getElementById("steps").innerHTML} Moves`;
    var lastTime = `Time= ${document.getElementById("minutes").innerHTML}M:${document.getElementById("seconds").innerHTML}S`;
    stopTimer();

  }
}

function reset() {
  moves = 0;
  document.getElementById("steps").innerHTML = moves;
  document.getElementsByClassName('stars')[0].style.visibility = "visible";
  totalSeconds = 0;
  secondsLabel.innerHTML = 0;
  minutesLabel.innerHTML = 0;
  clearInterval(gameTime);
}

期望的结果重置游戏并重新开始实际结果没有发生，甚至没有激活任何错误

如何在存储游戏卡中实现完美的重新加载或重置功能？

0 个答案: