1.新記録の更新

まず、新記録を更新するたびにお知らせします.その機能を実現し、爆竹を実現しましょう.アルゴリズムはどうやって作られますか?
最初はどう思っていたのか、htmlの検索で1級のinnerHtmlが変わったときに教えてくれたAPIがあるかどうか.MutationObserverというAPIです.しかし、実際にはpaint関数は、ゲームが最初に実行されるたびに、またはゲームが終了するたびに1位に書き直されるため、毎回トリガーされます.だから意味がない.△まだ役に立つかもしれませんが、これからの新しい文法でまとめたいと思います.
では、アルゴリズムを制定します.どうやって作るの?
1.ゲームが完了した瞬間に要する時間(newrecordという)を計算します.
{: .notice--success}
2.以前に1位を獲得した記録(old recordと呼ばれる)を取得する.
{: .notice--success}
newrecord-oldrecordが0未満の場合、新しいレコードと呼ばれます.
{: .notice--success}
4.初めて記録を書く場合はinnerHtml='と仮定します.
{: .notice--success}

2.実装機能

recordToggle.js

  updateRecord() {
    this.timeRecord = this.aggregateRecord();
    this._compareRecord(this.timeRecord);
    this._firstRankingDetector(this.timeRecord);
    this._paintRecord(this.recordList);
    this._saveRecord();
  }

  _firstRankingDetector(record) {
    let firstRankingNumberOnly = this.firstRankingSpan.innerHTML.substring(
      5,
      7
    );
    let difference = record - firstRankingNumberOnly;
    if (this.firstRankingSpan.innerHTML === '') {
      console.log('first record!');
      startFireworks();
      sound.playfireworksSound();
    } else if (difference > 0) {
      console.log('not that special');
    } else if (difference === 0) {
      console.log('same record');
    } else if (difference < 0) {
      console.log('new record');
      startFireworks();
      sound.playfireworksSound();
    }
  }

firstrecord/newrecordは爆竹を爆発させた.では、爆竹を実現しましょう.

3.花火ショー

爆竹は実現しなかったので、検索で実現したものを取り戻すことにした.この時いいものを見つけた.コードも長くなく、簡単です.
fireworks.js

const max_fireworks = 10,
  max_sparks = 10;
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

var fireworkId;
let num = 0;

context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight - 5;

let fireworks = [];

function makeFireworks() {
  num = 0;

  for (let i = 0; i < max_fireworks; i++) {
    let firework = {
      sparks: [],
    };
    for (let n = 0; n < max_sparks; n++) {
      let spark = {
        vx: Math.random() * 5 + 0.5,
        vy: Math.random() * 5 + 0.5,
        weight: Math.random() * 0.3 + 0.03,
        red: Math.floor(Math.random() * 199),
        green: Math.floor(Math.random() * 199),
        blue: Math.floor(Math.random() * 199),
      };
      if (Math.random() > 0.5) spark.vx = -spark.vx;
      if (Math.random() > 0.5) spark.vy = -spark.vy;
      firework.sparks.push(spark);
    }
    fireworks.push(firework);
    resetFirework(firework);
  }
}

function resetFirework(firework) {
  firework.x = Math.floor(Math.random() * canvas.width);
  firework.y = canvas.height;
  firework.age = 0;
  firework.phase = "fly";
}

function explode() {
  num++;
  context.clearRect(0, 0, canvas.width, canvas.height);
  fireworks.forEach((firework, index) => {
    if (firework.phase == "explode") {
      firework.sparks.forEach((spark) => {
        for (let i = 0; i < 10; i++) {
          let trailAge = firework.age + i;
          let x = firework.x + spark.vx * trailAge;
          let y =
            firework.y +
            spark.vy * trailAge +
            spark.weight * trailAge * spark.weight * trailAge;
          let r = Math.floor(spark.red * 2);
          let g = Math.floor(spark.green * 2);
          let b = Math.floor(spark.blue * 2);

          context.beginPath();
          context.fillStyle = "rgba(" + r + "," + g + "," + b + ",1)";
          context.rect(x, y, 4, 4);
          context.fill();
        }
      });
      firework.age++;
      if (firework.age > 100 && Math.random() < 0.05) {
        resetFirework(firework);
      }
    } else {
      firework.y = firework.y - 10;
      for (let spark = 0; spark < 15; spark++) {
        context.beginPath();
        context.fillStyle = "rgba(" + index * 50 + "," + spark * 17 + ",0,1)";
        context.rect(
          firework.x + Math.random() * spark - spark / 2,
          firework.y + spark * 4,
          4,
          4
        );
        context.fill();
      }
      if (Math.random() < 0.001 || firework.y < 200) firework.phase = "explode";
    }
  });

  fireworkId = window.requestAnimationFrame(explode);
}
makeFireworks();
fireworkId = window.requestAnimationFrame(explode);

キャンバスで体現しています.複雑に見えますが、原理は簡単です.まずはmake花火でランダムに爆竹スパークを作りますその後explodeで毎秒60回表示し、アニメーションを実現します.爆竹の個数と火花の個数は制御でき、色も制御できます.またキャンバスの大きさはcssでは調節できません.そこで、画面をよりフルにするためにwindow apiを使ってwidth/hightを指定しました.はんのうがた
では、htmlにmycanvasを追加し、cssを使用してz-indexを調整します.

<canvas id="myCanvas"></canvas>

#myCanvas {
  position: absolute;
  z-index: -3;
}

そして、花火の修理も必要です.爆竹が止まるまで論理を作った.
1.爆竹が始まるとz-indexが大きくなって表示されます.
2.時間が経つにつれて、アニメーションはゆっくりと消えるべきで、すべてが消えるならば、アニメーションは停止するべきです.
3.停止するとz-indexが下がり、ゲームをクリックすることができます.
修正爆竹は次の文章で:)