「＼(^q^)／😇」を消すゲーム

タップして一定時間以内に「😇」をタップしてください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>EMOJI GAME</title>
   <style>
       body {
           text-align: center;
           background-color: #F8EEAC;
           font-family: sans-serif;
           font-size: 1.2rem;
       }
       button {
           font-family: sans-serif;
           font-size: 1.2rem;
           padding: 10px 20px;
           border-radius: 10px;
           border: none;
           background-color: #FFA000;
           color: #FFF;
           cursor: pointer;
       }
       #top {
           margin-top: 50px;
       }
       #emoji {
           font-size: 5rem;
           margin-top: 50px;
       }
   </style>
</head>
<body>
   <h1>「＼(^q^)／😇」を消すゲーム</h1>
   <p>タップして一定時間以内に「😇」をタップしてください。</p>
   <div id="top">
       <button id="start">スタート</button>
   </div>
   <div id="emoji"></div>
   <script>
       const emoji = document.getElementById("emoji");
       const startBtn = document.getElementById("start");

let timer;
       let delay;
       let count = 0;

function startGame() {
           startBtn.style.display = "none";
           delay = Math.random() * 3000 + 1000; // 1秒～4秒のランダムな時間で表示
           timer = setTimeout(() => {
               emoji.textContent = "😇";
               emoji.addEventListener("click", onClickEmoji);
           }, delay);
       }

function onClickEmoji() {
           clearTimeout(timer);
           count++;
           emoji.textContent = "";
           emoji.removeEventListener("click", onClickEmoji);
           delay = Math.random() * 3000 + 1000; // 1秒～4秒のランダムな時間で表示
           timer = setTimeout(() => {
               emoji.textContent = "😇";
               emoji.addEventListener("click", onClickEmoji);
           }, delay);
       }

function endGame() {
           clearTimeout(timer);
           emoji.textContent = `ゲーム終了！あなたのスコアは${count}です！`;
           startBtn.textContent = "もう一度遊ぶ";
           startBtn.style.display = "inline-block";
           startBtn.addEventListener("click", restartGame);
           count = 0;
       }

function restartGame() {
           startBtn.removeEventListener("click", restartGame);
           startGame();
       }

startBtn.addEventListener("click", startGame);
       emoji.addEventListener("click", endGame);
   </script>
</body>
</html>