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

No:2140

2020

←

Prev Next

→

Suddenly, the final game
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time 4342 sec｜Game capacity 4.342KB｜

Script

です！では、以下に私が考えた簡単なゲームの実装例を記述します。

Emoji Match

このゲームの概要は、2つの同じ絵文字を選んで消していくマッチングゲームです。スコアは一致した場合に10点、不一致の場合に5点減点されます。"Restart Game"ボタンは、ゲームをリスタートするためのものです。このアプリは、PC/Webブラウザでもスマホでも遊べます。選んだ絵文字が大きく表示されるため、分かりやすく楽しめると思います。

←

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">
    <title>Emoji Match</title>
    <script>
      // Emoji List
      const emojis = ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆',
                      '😉', '😊', '😋', '😎', '😍', '😘', '😜', '😝',
                      '😛', '🤑', '🤗', '🤔', '😏', '😒', '😞', '😔'];
      
      let score = 0;
      let board = document.querySelector('#board');

// Shuffle Function
      function shuffle(array) {
        let currentIndex = array.length, temporaryValue, randomIndex;

while (0 !== currentIndex) {
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
        }
        return array;
      }

// Create Board Function
      function createBoard() {
        board.innerHTML = '';
        let shuffledEmojis = shuffle(emojis.concat(emojis));
        for (let i = 0; i < shuffledEmojis.length; i++) {
          let card = document.createElement('div');
          card.classList.add('card');
          card.setAttribute('data-emoji', shuffledEmojis[i]);
          card.addEventListener('click', () => {
            card.classList.toggle('opened');
            let openedCards = document.querySelectorAll('.opened');
            if (openedCards.length === 2) {
              let card1 = openedCards[0];
              let card2 = openedCards[1];
              let emoji1 = card1.getAttribute('data-emoji');
              let emoji2 = card2.getAttribute('data-emoji');
              if (emoji1 === emoji2) {
                score += 10;
                openedCards.forEach(card => {
                  card.classList.add('matched');
                  card.classList.remove('opened');
                });
              } else {
                score -= 5;
                setTimeout(() => {
                  openedCards.forEach(card => {
                    card.classList.remove('opened');
                  });
                }, 500);
              }
              let scoreBoard = document.querySelector('#score');
              scoreBoard.textContent = `Score: ${score}`;
            }
          });
          let face = document.createElement('div');
          face.classList.add('face');
          face.textContent = shuffledEmojis[i];
          card.appendChild(face);
          board.appendChild(card);
        }
      }

// Start Game Function
      function startGame() {
        score = 0;
        createBoard();
        let scoreBoard = document.querySelector('#score');
        scoreBoard.textContent = `Score: ${score}`;
      }

window.addEventListener('load', () => {
        startGame();
        let restartButton = document.querySelector('#restart');
        restartButton.addEventListener('click', startGame);
      });
    </script>
    <style>
      #board {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 50px;
      }

.card {
        width: 80px;
        height: 80px;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        background-color: #eee;
        cursor: pointer;
        transition-duration: 0.3s;
      }

.face {
        font-size: 50px;
      }

.opened {
        background-color: white;
      }

.matched {
        background-color: green;
        cursor: initial;
      }
    </style>
  </head>
  <body>
    <h1>Emoji Match</h1>
    <h2 id="score"></h2>
    <div id="board"></div>
    <button id="restart">Restart Game</button>
  </body>
</html>

このゲームの概要は、2つの同じ絵文字を選んで消していくマッチングゲームです。スコアは一致した場合に10点、不一致の場合に5点減点されます。"Restart Game"ボタンは、ゲームをリスタートするためのものです。

このアプリは、PC/Webブラウザでもスマホでも遊べます。選んだ絵文字が大きく表示されるため、分かりやすく楽しめると思います。