AI game creator

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

No:42331

←

Prev Next

→

めしパズル
Developer User18736｜Date and time 24/2/11 11:19:29
Build time 13.173 sec｜Game capacity 3.763KB｜

Script

了解です。めしパズルを実装してみます。以下にHTMLファイルの実装例を示します。

このプログラムは、ランダムな9つの絵文字のタイルを作成し、クリックしたタイルを選択し、2つのタイルが一致するかどうかを判定するシンプルなめしパズルゲームです。各タイルを選択すると選択状態になり、2つの異なるタイルが選択された場合は一致しているかどうかを判定し、一致している場合はマッチング状態になります。全てのタイルがマッチング状態になると、ゲームクリアのアラートが表示されます。スマートフォンで操作することを前提として、タイルはタップで選択できます。以上がめしパズルのHTMLファイルの実装例です。完成したゲームとして遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。めしパズルを実装してみます。以下にHTMLファイルの実装例を示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>めしパズル</title>
    <style>
      #board {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      .tile {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        background-color: #eee;
        border-radius: 10px;
        width: 100px;
        height: 100px;
        cursor: pointer;
      }
      .tile.selected {
        background-color: #ffcc80;
      }
      .tile.matched {
        background-color: #81c784;
        cursor: default;
      }
    </style>
  </head>
  <body>
    <div id="board">
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
      <div class="tile"></div>
    </div>
    
    <script>
      const emojis = ['🍔', '🍣', '🥞', '🌮', '🍕', '🍩', '🍦', '🥪', '🍟'];
      const tiles = document.querySelectorAll('.tile');
      let selectedTile = null;
      let matchedCount = 0;
      
      function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
      }
      
      function handleClick() {
        const tile = this;
        if (tile.classList.contains('selected') || tile.classList.contains('matched')) {
          return;
        }
        
        tile.classList.add('selected');
        
        if (selectedTile) {
          const emoji1 = selectedTile.textContent;
          const emoji2 = tile.textContent;
          
          if (emoji1 === emoji2) {
            selectedTile.classList.add('matched');
            tile.classList.add('matched');
            matchedCount += 2;
            
            if (matchedCount === tiles.length) {
              setTimeout(() => {
                alert('おめでとう！ゲームクリア！');
              }, 500);
            }
          } else {
            setTimeout(() => {
              selectedTile.classList.remove('selected');
              tile.classList.remove('selected');
            }, 500);
          }
          
          selectedTile = null;
        } else {
          selectedTile = tile;
        }
      }
      
      function initializeGame() {
        shuffle(emojis);
        matchedCount = 0;
        
        tiles.forEach((tile, index) => {
          tile.textContent = emojis[index];
          tile.classList.remove('selected', 'matched');
          tile.addEventListener('click', handleClick);
        });
      }
      
      initializeGame();
    </script>
  </body>
</html>
```

以上がめしパズルのHTMLファイルの実装例です。完成したゲームとして遊ぶことができます。