设置本地存储高分并显示它

Question

我正在尝试完成一个俄罗斯方块游戏，但在游戏结束后保存高分给我带来了一些问题。当游戏结束时，如果分数高于之前保存的高分，则应该将新的分数保存为本地的高分并显示该新的高分。我不知道为什么这没有发生。以下是我的代码中与高分相关的三个不同区域。任何帮助，将不胜感激。

在游戏一侧创建菜单

 <div id="tetris">
<div id="menu">
  <p id="start"><a href="javascript:play();">Press Space to Play.</a></p>
  <p><canvas id="upcoming"></canvas></p>
  <p>score <span id="score">00000</span></p>
  <p>rows <span id="rows">0</span></p>
  <p>high score <span id="highscore">0</span></p>
</div>
<canvas id="canvas">
  Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
</canvas>

游戏结束时设置高分

var highscore = localStorage.getItem("highscore");

  if (playing == false){
  if(highscore !==null){
      if(vscore > highscore) {
          localStorage.setItem("highscore", vscore);
      }
  }
  else{
      localStorage.setItem("highscore", vscore);
  }
  }
  else{
      null;
  }

更新分数以显示它们

function play() { hide('start'); reset();          playing = true;  }
function lose() { show('start'); setVisualScore(); playing = false; }

function setVisualScore(n)      { vscore = n || score; invalidateScore(); }
function setScore(n)            { score = n; setVisualScore(n);  }
function addScore(n)            { score = score + n;   }
function clearScore()           { setScore(0); }
function clearRows()            { setRows(0); }
function setRows(n)             { rows = n; step = Math.max(speed.min, speed.start - (speed.decrement*rows)); invalidateRows(); }
function addRows(n)             { setRows(rows + n); }
function setHighScore(n)        { highscore = n; }
function addHighScore(n)        { setHighScore(highscore); }
function getBlock(x,y)          { return (blocks && blocks[x] ? blocks[x][y] : null); }
function setBlock(x,y,type)     { blocks[x] = blocks[x] || []; blocks[x][y] = type; invalidate(); }
function clearBlocks()          { blocks = []; invalidate(); }
function clearActions()         { actions = []; }
function setCurrentPiece(piece) { current = piece || randomPiece(); invalidate();     }
function setNextPiece(piece)    { next    = piece || randomPiece(); invalidateNext(); }

function reset() {
  dt = 0;
  clearActions();
  clearBlocks();
  clearRows();
  clearScore();
  setCurrentPiece(next);
  setNextPiece();
}

function update(idt) {
  if (playing) {
    if (vscore < score)
      setVisualScore(vscore + 1);
    handle(actions.shift());
    dt = dt + idt;
    if (dt > step) {
      dt = dt - step;
      drop();
    }
  }
}

如果需要，我可以添加完整的游戏代码，但这是与高分问题直接相关的三个方面。

Answer 1

尝试以下方法：

function update(idt) {
  if (playing) {
    if (vscore < score)
      setVisualScore(vscore + 1);
    handle(actions.shift());
    dt = dt + idt;
    if (dt > step) {
      dt = dt - step;
      drop();
    }
    // Add the following to update the highscore while playing.
    if (score > highscore) {
        setHighScore(score);
    }
  }
}

setHighScore = (score) => {

  // update highscore
  highscore = score;

  // update it visually?
  document.getElementById('highscore').text = highscore;
}

然后在游戏结束后您想要检查的地方——我会立即假设您将 play boolean 设置为 false。

if (playing === false){
    if(vscore > highscore) {
      // For future games.
      localStorage.setItem("highscore", vscore);
    }
}

编辑： 我正在手机上输入此内容，如果格式不正确，敬请见谅。 见例子：https://codepen.io/anon/pen/pVEJJW