Newer
Older
2022-odaren / renda.js
"use strict";
const body = document.querySelector("body");
const background = document.querySelector(".background");
const countDisplay = document.querySelector(".countDisplay");
const result = document.querySelector(".result");

let count = 0;

// パソコンかスマートフォンか判定
const eventType = window.ontouchstart !== null ? "click" : "touchstart";
const addCount = function (e) {
  // クリックをカウント・表示
  count++;
  countDisplay.textContent = count;

};
// 背景を縮めるアニメーション
const shrinkAnim = function () {
  body.removeEventListener(eventType, shrinkAnim);
  body.addEventListener(eventType, addCount);
  background
    .animate(
      {offset: [0, 0.9],},
      { duration: 3000, fill: "forwards" }
    )
    .finished // ゲーム終了後の処理
    .then(() => {
      body.removeEventListener(eventType, addCount);
      result.textContent = "はじめに戻る";
      result.classList.add("blink");
      result.addEventListener("click", () => {
        location.reload();
      });
    });
};
body.addEventListener(eventType, shrinkAnim);