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

No:911

144

←

Prev Next

→

The fun ones.
Developer User3191｜Date and time 23/6/17 22:26:35
Build time 35.393 sec｜Game capacity 4.129KB｜

Script

Emoji Game

Let's match emojis!

Score: 0

このコードは「Emoji Game」という簡単な記憶力ゲームです。各マスに違う絵文字が配置されているので、同じ絵文字が隣り合わせるようにマスをめくります。2つのマスをめくって同じ絵文字が表示された場合、スコアが1増加します。ゲームの目的は、スコアをできるだけ高くすることです。このゲームの実装にはJavaScriptが使用されています。スマートフォンで遊ぶために、レスポンシブなUIと、操作しやすいボタンスタイルが採用されています。また、ゲーム中に使用される絵文字の量を増やすために、いくつかの絵文字が使用されています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Emoji Game</title>
      <style>
         body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #FFDAB9;
         }
         h1 {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 2rem;
         }
         button {
            padding: 1rem 2rem;
            font-size: 1.5rem;
            background-color: #FF69B4;
            border: none;
            border-radius: 1rem;
            cursor: pointer;
         }
         button:hover {
            background-color: #FF1493;
            color: white;
         }
      </style>
   </head>
   <body>
      <div>
         <h1>Emoji Game</h1>
         <p>Let's match emojis!</p>
         <div id="gameboard"></div>
         <p>Score: <span id="score">0</span></p>
         <button onclick="startGame()">Start Game</button>
      </div>
      <script>
         const emojis = ["😀", "😂", "😎", "😍", "🤔", "👀", "🐶", "🐱", "🐻", "🐼"];

function shuffle(arr) {
            let currentIndex = arr.length;
            let randomIndex;

while (currentIndex !== 0) {
               randomIndex = Math.floor(Math.random() * currentIndex);
               currentIndex--;

[arr[currentIndex], arr[randomIndex]] = [
                  arr[randomIndex], arr[currentIndex]
               ];
            }
            return arr;
         }

function flipEmoji(index) {
            const emoji = gameboard.childNodes[index];
            emoji.innerHTML = shuffle(emojis)[0];
            emoji.classList.toggle("flipped");
         }

function resetGameboard() {
            let newGameboard = "";
            for (let i = 0; i < 16; i++) {
               newGameboard +=
                  "<div class='tile' onclick='flipEmoji(" + i + ")'>" +
                  emojis[Math.floor(i / 2)] +
                  "</div>";
            }
            gameboard.innerHTML = newGameboard;
         }

function startGame() {
            resetGameboard();
            let score = 0;

const flipped = [];

gameboard.addEventListener("click", function (event) {
               const clicked = event.target;
               if (
                  !clicked.classList.contains("flipped") &&
                  clicked.classList.contains("tile")
               ) {
                  clicked.classList.toggle("flipped");
                  flipped.push(clicked);

if (flipped.length === 2) {
                     if (flipped[0].innerHTML === flipped[1].innerHTML) {
                        score++;
                        document.getElementById("score").innerHTML = score;
                        flipped.length = 0;
                     } else {
                        setTimeout(function () {
                           flipped.forEach(function (tile) {
                              tile.classList.toggle("flipped");
                           });
                           flipped.length = 0;
                        }, 1000);
                     }
                  }
               }
            });
         }
      </script>
   </body>
</html>