установить высокий балл localalstorage и показать его

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;
}

Затем, когда игра закончится, вы сразу захотите проверить, где вы установите для логического значения false значение.

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

edit: я набираю это на своем телефоне, поэтому извиняюсь, если формат неудачен.Смотрите пример: https://codepen.io/anon/pen/pVEJJW