diff --git a/renda.css b/renda.css new file mode 100644 index 0000000..b3c63ab --- /dev/null +++ b/renda.css @@ -0,0 +1,45 @@ +*{ + margin: 0; + user-select: none; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; +} + +html, body{ + height: 100%; +} +.background{ + width: 350px; + height: 350px; + border-radius: 50%; + background: #59f189; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); +} +.countDisplay{ + font-size: 60px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); +} + +.result{ + font-size: 24px; + position: absolute; + top: 90%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + cursor: pointer; +} + + +/* ランキング */ \ No newline at end of file diff --git a/renda.html b/renda.html new file mode 100644 index 0000000..0da7e82 --- /dev/null +++ b/renda.html @@ -0,0 +1,18 @@ + + + + + + + 蓮打数ゲーム + + + +

+
+ +
+ + + + \ No newline at end of file diff --git a/renda.js b/renda.js new file mode 100644 index 0000000..5738e7e --- /dev/null +++ b/renda.js @@ -0,0 +1,36 @@ +"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); \ No newline at end of file