Javascript 如何根据游戏分数有条件地显示图像？

我已经创建了一个JavaScript点击游戏，它已经运行良好。现在，我想添加一些视觉噱头，使它看起来更好。一个噱头应该是一个焰火，只要达到最高分数就会显示出来。我已经有了焰火的代码，我已经把它展示出来了，但是我想知道，焰火是如何只在达到最高分数时才展示的，而不是永久性的

在这里您可以找到我关于游戏的代码：

let klick = 0;

display = document.querySelector('#time');

$("#start").click(function() { //clickfunktion beim starten.
  $("#start").fadeToggle(); //Der Startbutton geht weg
  $("#welcome").fadeToggle(); // Das Willkommensschild geht weg
  $("#zeitauswahl").fadeToggle(); //Die Auswahl der Sekunden verschwindet

  $("#time").fadeToggle(900); //Timer kommt 
  $("#clicker").animate({
    height: 'toggle' //inverse aktion...keine height --> klappt auf // aufgeklappt  ---> macht height weg
  }); //clicker wird gestartet 
    var d = $("#zeitauswahl option:selected").val(); //referenziert auf zeitauswahl und option

  var dauer = parseInt(d); //verwandelt Dauer in einen Int

  startTimer(dauer); //übergibt die variable dauer, und die Funktion wird gestartet.  
})

function startTimer(dauer) {
    let timer = parseInt(dauer);
  runTimer();
  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
  function runTimer(){
    display.textContent = parseInt(timer); // zeigt sekunden-variable

    --timer; //setzt den timer immer einen herab

    if (timer < 0.00) {

      timer = 5;
      console.log(timer); //debug info
      $("#start").fadeToggle();
      $("#welcome").fadeToggle();
      $("#zeitauswahl").fadeToggle();
      $("#time").fadeToggle();
      $("#clicker").fadeToggle();
      $("#clicker").css("margin-top", "10%");
      $("#clicker").css("margin-left", "50%");

      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");
      alert('High Score ist ' + highScore(klick)); // zeigt den HighScore

      klick = 0
      console.log(timer);

      clearInterval(zeit);

    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet

}


};

$("#clicker").click(function() {
  let zufall = Math.floor(Math.random() * 400) -200 //setzt eine zufällige höhe für den clicker
  let zufal = Math.floor(Math.random() * 450) //Zufällige Variable für den Linkswert

  klick = klick + 1 //setzt den zähler beim klicken eins hoch
  if (klick % 2 == 0) {
    $("#clicker").animate({
      opacity: '0.3', //macht den klicker leicht durchsichtig
      left: zufall + "px",
      top: zufal + "px"
    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
  } else {
    $("#clicker").animate({
      opacity: '1.0',  //macht den Klicker sichtbar
      left: zufall + "px",
      top: zufal + "px"
    }, "fast")

  }



});



var fireworks = {

  ///////////////////////////// configuration ////////////////////////////

  // random colors
  _color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'],
  // gravity factor
  _gravity: 0.07,
  // air resistance factor
  _resistance: 0.975,
  // zIndex of particles
  _zIndex: 20000,
  // maximal age of particles (in msec)
  _maxAge: 2000,
  // interval of appearing explosions (in msec)
  _interval: [500, 2500],
  // amount of particles per explosion
  _particlesPerExplosion: 40,
  // maximal speed of particle at moment of explosion
  _speed: 5,
  // minimal/maximal size of particle
  _minSize: 8,
  _maxSize: 12,



  ///////////////////////////// private vars /////////////////////////////

  _particles: [],
  _bodyWidth: 0,
  _bodyHeight: 0,
  _count: 0,
  _lastInterval: 0,



  ////////////////////////////// functions ///////////////////////////////

  // init fireworks
  init: function()
  {
    this._addEventListener(window, 'resize', function() { return fireworks.resize.apply(fireworks); });
    this._addEventListener(window, 'load', function() { return fireworks.start.apply(fireworks); });
  },


  // add an event listener
  _addEventListener: function(el, name, handler)
  {
    if (el.addEventListener)
      el.addEventListener(name, handler, false); 
    else if (el.attachEvent)
      el.attachEvent('on' + name, handler);
  },


  // start fireworks
  start: function()
  {
    // init window size
    this.resize();

    // start to move particles
    this._animFn = function() {fireworks._move();};
    this._lastInterval = this._time();
    requestAnimFrame(this._animFn);

    this._addExplosion();
  },


  // get current time
  _time: function()
  {
    return +new Date();
  },


  // return a random integer
  _random: function(value)
  {
    return Math.random() * value;
  },


  // return a random array element
  _randomArray: function(arr)
  {
    return arr[
      Math.floor(
        Math.random() * (arr.length)
      )
    ];
  },


  // add a new explosion
  _addExplosion: function()
  {
    var x = Math.floor(this._random(this._bodyWidth)),
      y = Math.floor((this._random(.5) + .1) * this._bodyHeight),
      dx = this._random(10) - 5,
      dy = this._random(-2) - 1,
      c1 = this._randomArray(this._color),
      c2 = this._randomArray(this._color);

    for (var i = 0; i < this._particlesPerExplosion; i++)
    {
      this._createParticle(
        x,
        y,
        dx,
        dy,
        i / (this._particlesPerExplosion - 1) * 180 * Math.PI,
        this._random(this._speed),
        this._random(1) > .5 ? c1 : c2
      );
    }

    window.setTimeout(
      function() { return fireworks._addExplosion.apply(fireworks);},
      this._random(this._interval[1] - this._interval[0]) + this._interval[0]
    );
  },


  // creates a new particle
  _createParticle: function(x, y, dx, dy, rot, speed, color)
  {
    var el = null,
      foundEl = false,
      p = this._particles;

    // look for old particle
    for (var i = 0, l = p.length; i < l; i++)
      if (p[i].data.age > 1)
      {
        el = p[i];
        foundEl = true;
        break;
      }

    // create span child for particles
    if (!foundEl)
    {
      el = document.createElement('div');
      el.className       = 'particle';
      el.style.position  = 'absolute';
      el.style.fontSize  = this._maxSize + 'px';
      el.style.zIndex    = this._zIndex;
      el.style.width     = this._maxSize + 'px';
      el.style.textAlign = 'center';
      el.style.overflow  = 'hidden';
      el.innerHTML       = '&#x25cf;';
    }

    el.style.left  = x + 'px';
    el.style.top   = y + 'px';
    el.style.color = color;
    el.data = {
      x: x,
      y: y,
      dx: Math.cos(rot) * speed + dx,
      dy: Math.sin(rot) * speed + dy,
      color: color,
      age: Math.random() * .25
    };

    if (!foundEl)
    {
      document.getElementsByTagName('body')[0].appendChild(el);
      this._particles.push(el);
    }
  },


  // move existing particles
  _move: function()
  {
    requestAnimFrame(this._animFn);

    // calculate movement factor
    var dif = this._time() - this._lastInterval;
    this._lastInterval = this._time();

    var delta = dif / 20,
      el,
      d,
      p = this._particles,
      r = Math.pow(this._resistance, delta),
      g = this._gravity * delta,
      a = dif / this._maxAge;

    for (var i = 0, l = p.length; i < l; i++)
    {
      el = p[i];
      d = el.data;

      if (d.age > 1)
        continue;

      d.age += a;
      d.dy += g;
      d.dx *= r;
      d.dy *= r;
      d.x += d.dx * delta;
      d.y += d.dy * delta;

      if (d.x < 0)
      {
        d.dx *= -1;
        d.x = 0;
      }
      else if (d.x > this._bodyWidth)
      {
        d.dx *= -1;
        d.x = this._bodyWidth;
      }
      if (d.y < 0)
      {
        d.dy *= -1;
        d.y = 0;
      }
      else if (d.y > this._bodyHeight)
      {
        d.dy *= -1;
        d.y = this._bodyHeight;
      }

      if (d.age > 1)
        d.x = d.y = 0;

      el.style.left = d.x + 'px';
      el.style.top = d.y + 'px';
      el.style.color = (Math.random() * .5 + d.age >= 1) ? 'transparent' : d.color;
      el.style.fontSize = Math.max(this._minSize, (1 - d.age) * this._maxSize) + 'px';
    }
  },


  // calculate new positions for all particles
  resize: function()
  {
    // get new width and height
    this._bodyWidth = this._getWindowWidth() - this._maxSize;
    this._bodyHeight = this._getWindowHeight() - this._maxSize - 10;
  },


  // get window width
  _getWindowWidth: function()
  {
    return document.getElementsByTagName('body')[0].offsetWidth;
  },


  // get window height
  _getWindowHeight: function()
  {
    var h = Math.max(self.innerHeight || 0, window.innerHeight || 0);

    if (document.documentElement)
      h = Math.max(h, document.documentElement.clientHeight || 0);
    if (document.body)
    {
      h = Math.max(h, document.body.clientHeight || 0);
      h = Math.max(h, document.body.scrollHeight || 0);
      h = Math.max(h, document.body.offsetHeight || 0);
    }

    return h;
  }

};

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame    || 
      window.oRequestAnimationFrame      || 
      window.msRequestAnimationFrame     || 
      function (cb){
      window.setTimeout(cb, 1000 / 60);
      };
})();



function highScore(score) {
  var saved = 0;

  saved = parseFloat(localStorage.getItem('highScore')) || 0; //nimmt zeichenketten Argument (highscore) und gibt Float. highscore oder 0
  score = parseFloat(score) || 0; 
  document.getElementById("highscore").innerHTML = saved;

  if (score > saved) {
    saved = score; //speichert neuen Highscore, wenn der score größer ist als die gespeicherte variable
    localStorage.setItem('highScore', score);//speichert highscore im browser
    fireworks.init();
  }
  return saved;

}

设klick=0；
display=document.querySelector（“#time”）；
$（“#开始”）。单击（函数（）{//clickfunktion beim starten。
$（“#开始”）.fadeToggle（）；//开始按钮
$（“#欢迎”）.fadeToggle（）；//Das Willkommensschild geht weg
$（“#zeitauswahl”）.fadeToggle（）；//Die Auswahl der Sekunden verschwindet
$（“#time”）.fadeToggle（900）//Timer kommt
$（“#点击器”）。设置动画({
高度：'toggle'//反向运动…基恩高度-->klappt auf//aufgeklapt-->macht height weg
})；//点击器与盖斯塔特
var d=$（“#zeitauswahl选项：选中”）.val（）；//referenceiert auf zeitauswahl und option
var dauer=parseInt（d）；//在einen Int中的verwandelt dauer
startTimer（dauer）；//变量dauer和函数与格式塔。
})
功能启动器（dauer）{
设定时器=parseInt（dauer）；
运行计时器（）；
zeit=setInterval（runTimer，1000）；//zahl gibt an，wie oft die Function pro zeit wiederholt wird.Hier eine Sekunde（1000Millisekunden）
函数runTimer（）{
display.textContent=parseInt（计时器）；//zeigt sekunden变量
--timer；//设置计时器immer einen herab
如果（计时器<0.00）{
定时器=5；
console.log（计时器）；//调试信息
$（“#开始”）.fadeToggle（）；
$（“#欢迎”）.fadeToggle（）；
$（“zeitauswahl”）.fadeToggle（）；
$（“#时间”）.fadeToggle（）；
$（“#clicker”）.fadeToggle（）；
$（“#clicker”）.css（“利润率最高”、“10%”）；
$（“#clicker”）.css（“左边距”、“50%”）；
警报（“索伯-杜-哈兹”+klick+“klicks in 5 Sekunden geschafft！”）；
警报（'High Score ist'+highScore（klick））；//zeigt den highScore
克利克=0
控制台日志（计时器）；
清除间隔（zeit）；
}//如果计时器为0，则所有计时器均为wieder angezeigt和die Interval函数
}
};
$（“#clicker”）。单击（函数（）{
让zufall=Math.floor（Math.random（）*400）-200//setzt-eine-zufällige höhe für den clicker
让zufal=Math.floor（Math.random（）*450）//Zufällige变量für den Linkswert
klick=klick+1//setzt den zähler beim klicken eins hoch
如果（K单击%2==0）{
$（“#点击器”）。设置动画({
不透明度：“0.3”//macht den klicker leicht Durchichstig
左：zufall+“px”，
顶部：zufal+“px”
}，“fast”）；//bewegt den Klick Block auf eine zufällige Stelle
}否则{
$（“#点击器”）。设置动画({
不透明度：“1.0”，//macht den Klicker sichtbar
左：zufall+“px”，
顶部：zufal+“px”
}“快速”）
}
});
var烟花={
/////////////////////////////配置////////////////////////////
//随机颜色
_颜色：[“D0D0D0”、“FF0000”、“FFFF00”、“22FF00”、“2040FF”、“00CCFF”、“FF00FF”、“A319D6”]，
//重力因子
_重力：0.07，
//空气阻力系数
_阻力：0.975，
//粒子锌指数
_zIndex:20000，
//粒子的最大年龄（以毫秒为单位）
_最大年龄：2000，
//出现爆炸的间隔（毫秒）
_间隔：[5002500]，
//每次爆炸的粒子数量
_微粒爆炸：40，
//爆炸瞬间粒子的最大速度
_速度:5,，
//颗粒的最小/最大尺寸
_minSize:8，
_最大尺寸：12，
/////////////////////////////私人骑兵/////////////////////////////
_粒子：[]，
_车身宽度：0，
_身高：0，
_计数：0，
_最后间隔：0，
//////////////////////////////功能///////////////////////////////
//烟火
init:function（）
{
这是._addEventListener（窗口'resize'，函数（）{return fireforks.resize.apply（fireforks）；}）；
这是._addEventListener（窗口'load'，函数（）{return fireforks.start.apply（fireforks）；}）；
},
//添加事件侦听器
_addEventListener:函数（el、名称、处理程序）
{
如果（el.addEventListener）
el.addEventListener（名称、处理程序、错误）；
否则，如果（见附件）
el.attachEvent（'on'+姓名，处理人）；
},
//燃放烟火
开始：函数（）
{
//初始窗口大小
这是resize（）；
//开始移动粒子
这是._animFn=function（）{fireshouse._move（）；}；
这个。_lastInterval=这个。_time（）；
requestAnimFrame（此.\u animFn）；
这个._addExplosion（）；
},
//获取当前时间
_时间：函数（）
{
返回+新日期（）；
},
//返回一个随机整数
_随机：函数（值）
{
返回Math.random（）*值；
},
//返回一个随机数组元素
_随机数组：函数（arr）
{
返回arr[
数学地板(
Math.random（）*（arr.length）
)
];
},
//添加一个新的爆炸
_addExplosion:function（）
{
var x=数学地板（此._随机（此._车身宽度）），
y=数学地板（（此._随机（.5）+.1）*此._车身高度），
dx=这个随机数（10）-5，
dy=这个。_随机（-2）-1，
c1=此随机数组（此颜色），
c2=此._随机数组（此._颜色）；
对于（var i=0；i.5？c1:c2
);
}
window.setTimeout(
函数（）{返回焰火。_addExplosion.apply（焰火）；}，
本随机（本随机区间[1]-本随机区间[0]）+本随机区间[0]
);
},
//创建新粒子
_createParticle：函数（x，y，dx，dy，rot，speed，color）
{
var el=null，
foundEl=false，
p=这个；
//寻找旧粒子
for（var i