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

No:5975

1237

Monema flavescens (species of slug moth)
Developer User3840｜Date and time 23/7/1 12:59:24
Build time 44.094 sec｜Game capacity 4.749KB｜

了解です。以下にシャクトリムシというゲームの実装例を示します。

シャクトリムシ

このゲームでは、`gridSize`変数でグリッドのサイズ、`maxTurns`変数でプレイヤーが選択できる最大回数、`emojis`配列で表示する絵文字のリストを指定します。ゲームが開始されると、指定したグリッドサイズに基づいたセルが表示されます。プレイヤーはセルを選択して絵文字を当てることが目標です。選択した2つのセルが同じ絵文字であれば、セルが表示されたままになります。異なる絵文字であれば、セルは非表示に戻ります。プレイヤーのターンは`maxTurns`回まで行えます。ターンが終了すると、選択した2つのセルが非表示に戻り、残りのターン数が更新されます。また、全てのセルが表示された状態でターンが終了した場合は、ゲームが終了します。なお、この実装は簡易的なものであり、ゲームデザインやユーザーインターフェースの改善が必要です。ご了承ください。

→ 　

1　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

了解です。以下にシャクトリムシというゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>シャクトリムシ</title>
  <style>
    .game-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 400px;
      width: 400px;
      margin: 0 auto;
    }
    .cell {
      width: 100px;
      height: 100px;
      font-size: 40px;
      text-align: center;
      line-height: 100px;
      border: 1px solid black;
      cursor: pointer;
    }
    .hidden {
      color: white;
      background-color: gray;
    }
    .active {
      color: black;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>シャクトリムシ</h1>
  <div class="game-area"></div>

<script>
    // ゲームの設定
    const gridSize = 4;
    const maxTurns = 10;
    const emojis = [
      '🐞', '🦋', '🐛', '🐜', '🐌', '🐝', '🐞', '🦋', '🐛', '🐜', '🐌', '🐝'
    ];

// ゲームの状態
    let gameGrid = [];
    let selectedCells = [];
    let remainingTurns = maxTurns;

// ゲームの初期化
    function initializeGame() {
      // グリッドの作成
      gameGrid = Array(gridSize * gridSize).fill('').map((_, index) => ({
        emoji: emojis[index],
        isVisible: false
      }));

// ゲームエリアの作成
      const gameArea = document.querySelector('.game-area');
      gameArea.innerHTML = '';

for (let i = 0; i < gameGrid.length; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell hidden';
        cell.textContent = gameGrid[i].emoji;
        cell.addEventListener('click', () => chooseCell(i));
        gameArea.appendChild(cell);
      }

// ターン数の初期化
      remainingTurns = maxTurns;
      updateStatus();
    }

// ゲームの開始
    initializeGame();

// セルを選択する
    function chooseCell(index) {
      if (gameGrid[index].isVisible || selectedCells.length >= 2) {
        return;
      }

gameGrid[index].isVisible = true;
      selectedCells.push(index);
      updateCells();

if (selectedCells.length >= 2) {
        setTimeout(handleTurnEnd, 1000);
      }
    }

// ターンの終了処理
    function handleTurnEnd() {
      const [index1, index2] = selectedCells;

if (gameGrid[index1].emoji === gameGrid[index2].emoji) {
        gameGrid[index1].isVisible = true;
        gameGrid[index2].isVisible = true;
      } else {
        gameGrid[index1].isVisible = false;
        gameGrid[index2].isVisible = false;
      }

selectedCells = [];
      remainingTurns--;
      updateCells();

if (remainingTurns === 0) {
        endGame();
      }
    }

// ゲームの終了処理
    function endGame() {
      alert('ゲーム終了');
      initializeGame();
    }

// セルのスタイルを更新する
    function updateCells() {
      const cells = document.querySelectorAll('.cell');

for (let i = 0; i < cells.length; i++) {
        const cell = cells[i];

if (gameGrid[i].isVisible) {
          cell.className = 'cell';
        } else {
          cell.className = 'cell hidden';
        }
      }

for (const index of selectedCells) {
        cells[index].classList.add('active');
      }
    }

// ステータスを更新する
    function updateStatus() {
      const remainingTurnsElement = document.createElement('p');
      remainingTurnsElement.textContent = `残りのターン数: ${remainingTurns}`;
      document.body.prepend(remainingTurnsElement);
    }
  </script>
</body>
</html>
```

このゲームでは、`gridSize`変数でグリッドのサイズ、`maxTurns`変数でプレイヤーが選択できる最大回数、`emojis`配列で表示する絵文字のリストを指定します。

ゲームが開始されると、指定したグリッドサイズに基づいたセルが表示されます。プレイヤーはセルを選択して絵文字を当てることが目標です。選択した2つのセルが同じ絵文字であれば、セルが表示されたままになります。異なる絵文字であれば、セルは非表示に戻ります。プレイヤーのターンは`maxTurns`回まで行えます。ターンが終了すると、選択した2つのセルが非表示に戻り、残りのターン数が更新されます。また、全てのセルが表示された状態でターンが終了した場合は、ゲームが終了します。

なお、この実装は簡易的なものであり、ゲームデザインやユーザーインターフェースの改善が必要です。ご了承ください。