我如何追踪玩家的获胜情况？

Question

这是我的井字游戏的全部代码。

我创建了函数 count1 和 count2 来为玩家获胜打分，它可以工作，但是当我刷新页面时，分数显示为 0。我想解决这个问题，如果我通过单击“清理分数”来清理分数，则只显示 0按钮（这就是我创建 scoreCleaner 函数的原因）。

而不是刷新页面来清理董事会，我想点击“重新开始游戏”按钮。

我该怎么做？

井字游戏截图

let board = ["", "", "", "", "", "","", "", ""];
let playerTime = 0;
let gameOver = false;

let symbols = ["o", "x"];

let winStates = [
  [0,1,2],
  [3,4,5],
  [6,7,8],
  [0,3,6],
  [1,4,7],
  [2,5,8],
  [0,4,8],
  [2,4,6]
]

function handleMove(position) {

  if (gameOver) {
    return;
  }

  if (board[position] == "") {
    board[position] = symbols[playerTime];

    gameOver = isWin();

    if (!gameOver) {
      playerTime = (playerTime == 0) ? 1 : 0;
    }
  }

  return gameOver;
}

function isWin() {

  for (let i = 0; i < winStates.length; i++) {
    let seq = winStates[i];

    let pos1 = seq[0];
    let pos2 = seq[1];
    let pos3 = seq[2];

    if (board[pos1] == board[pos2] &&
        board[pos1] == board[pos3] &&
        board[pos1] != "") {

      return true;
    }
  }

  return false;
}

document.addEventListener("DOMContentLoaded", ()=>{

  let squares = document.querySelectorAll(".square");

  squares.forEach((square) => {
    square.addEventListener("click", handleClick);
  })

})

function handleClick(event) {
    let square = event.target;
    let postion = square.id;

    if (handleMove(postion)) {

      let c1 = 0;
      let c2 = 2;

      setTimeout(()=> {
        alert("Game is Over. " + playerTime + " wins.");
      }, 10);

      if (playerTime == 0) {
        c1 = c1 + 1;
        count1();
      } else {
         c2 = c2 + 1;
         count2();
      }
    }
    updateSquare(postion);
}

function updateSquare(postion) {
  let square = document.getElementById(postion.toString());
  let symbol = board[postion];
  square.innerHTML = `<div class='${symbol}'></div>`
}

function count1() {
  if (localStorage.count) {
    localStorage.count = Number(localStorage.count)+1;
  } else {
    localStorage.count = 1;
  }
  document.getElementById("player1Score").innerHTML = localStorage.count;
}

function count2() {
  if (localStorage.count) {
    localStorage.count = Number(localStorage.count)+1;
  } else {
    localStorage.count = 1;
  }
  document.getElementById("player2Score").innerHTML = localStorage.count;
}

function scoreCleaner() {
  localStorage.clear();
  document.getElementById("player1Score").innerHTML = 0;
  document.getElementById("player2Score").innerHTML = 0;
}

Answer 1

尽管您的总体思路是正确的，但您在计数函数中使用了错误的 localStorage。

如果您正确编写它们，它们会是这样的：

function count1() {
  if (localStorage.getItem("player1wins")) {
    localStorage.setItem("player1wins",Number(localStorage.getItem("player1wins"))+1);
  } else {
    localStorage.setItem("player1wins",1);
  }
  document.getElementById("player1Score").innerHTML = localStorage.getItem("player1wins");
}

function count2() {
  if (localStorage.getItem("player2wins")) {
    localStorage.setItem("player2wins",Number(localStorage.getItem("player2wins"))+1);
  } else {
    localStorage.setItem("player2wins",1);
  }
  document.getElementById("player2Score").innerHTML = localStorage.getItem("player2wins");
}

此外，您需要在页面加载时从本地存储中读取以重新更新计数。

document.addEventListener("DOMContentLoaded", ()=>{

  let squares = document.querySelectorAll(".square");

  squares.forEach((square) => {
    square.addEventListener("click", handleClick);
  })

  // new stuff
  document.getElementById("player1Score").innerHTML = localStorage.getItem("player1wins");
  document.getElementById("player2Score").innerHTML = localStorage.getItem("player2wins");
})