Javascript高分更新，无论新分是否更高

问题描述

新手在这里！抱歉，如果我没有正确格式化。 我有一个打地鼠游戏，想在本地存储中保存分数。底部的“高分”功能不起作用-它会更新“高分”，而不管其实际上是否高于上一个分数！ 我确定我会错过一些非常明显的东西，就像我说的那样，这很新！仅在此阶段使用Vanilla Javascript，这样的提示或解决方案才是理想的选择。 任何帮助或朝着正确方向的指针深表感谢！ 谢谢！

  window.onload = function() {
    setUp();
    count = 0;
    myDiv = document.getElementById("mole");
    myDiv.addEventListener("click",function() {});
  };

  function setUp() {
    let img = document.createElement("img");
    img.src = "mole.png";
    img.onclick = function(event) {
      whackedMole();
    };
    img.className = "mole";
    img.id = "mole";
    document.getElementById("moleMap")
      .rows[randomNumber()].cells[randomNumber()].appendChild(img);
  }


  function randomNumber() {
    return Math.floor(Math.random() * 5);
  }


  function whackedMole() {
    let mole = document.getElementById("mole");
    let audio = new Audio('whack-audio.wav');
    audio.play();
    document.getElementById("counter").innerHTML = (++count);
    mole.parentNode.removeChild(mole);
    setUp();
  }



  let myTimer = 0;

  function clock() {
    myTimer = setInterval(myClock,1000);
    var c = 10;

    function myClock() {
      document.getElementById("countdown").innerHTML = --c;
      if (c <= 0) {
        clearInterval(myTimer);
        alert("Your score is " + count + "!");
        highscore();
        document.getElementById("counter").innerHTML = 0;
        count = 0;
      }
    }
  }


//This is the function in question;

  function highscore() {
    document.getElementById("highscore").innerHTML = count;
    let highscore = count;
    if (count <= highscore) {
      return;
    } else if (count > highscore) {
      localStorage.setItem('highscore',count);
    }
  }

解决方法

如果我理解正确，那么问题出在以下代码中：

serialize

，特别是这两行：

// This is the same ModelInterface as above,but with M defaulting
// to SerializedModel for convenience
interface ModelInterface<M extends SerializedModel = SerializedModel> { /* ... */ }

// A helper type to get the SerializedModel type from a ModelInterface
type GetModel<I extends ModelInterface> = I extends ModelInterface<infer M> ? M : never

// A type that can serialize from the model interfaces Is
interface CollectionInterface<I extends ModelInterface> {
  count: number;
  items: I[];
  serialize(): SerializedCollection<GetModel<I>>;
}

// A class that implements CollectionInterface for a model interface I
class Collection<I extends ModelInterface> implements CollectionInterface<I> {
  constructor(public items: I[],public count: number) {}

  public serialize(): SerializedCollection<GetModel<I>> {
    return {
      count: this.count,// Needs a type assertion here otherwise TS thinks item.serialize() is
      // just a SerializedModel
      items: this.items.map((item) => item.serialize() as GetModel<I>),};
  }
}

// type Collection<Contact>
const contactCollection = new Collection(
  [new Contact("Bill"),new Contact("Bob")],2
);
// type Contact[]
const contacts = contactCollection.items;

和

// type SerializedCollection<SerializedContact>
const serializedContactCollection = contactCollection.serialize();

每次您调用highscore（）;您正在更新DOM，而不管计数是否大于高分。然后，在我已暗示高分的第二行代码中，将获得count的值，因此if子句中的第一条语句将始终为true。我要做的是修改代码，如下所示：

function highscore() {
    document.getElementById("highscore").innerHTML = count;
    let highscore = count;
    if (count <= highscore) {
        return;
    } else if (count > highscore) {
        localStorage.setItem('highscore',count);
    }
}