Can you make Clear Asahi?'s game

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

No:6249

1858

←

Prev Next

→

Can you make Clear Asahi?
Developer User3871｜Date and time 23/7/1 23:40:18
Build time 32.516 sec｜Game capacity 3.065KB｜

Script

はい、理解しました。私はクリアアサヒというゲームを作ります。以下がその実装例です。

この実装では、4x4の数字のグリッドが表示されます。目指すべき数字がランダムに選ばれ、その数字を選択することでゲームを進行します。目指すべき数字を見つけると成功となり、試行回数が表示されます。また、間違った数字を選択すると失敗となり、再度トライすることができます。このゲームはスマートフォンでも遊ぶことができますし、JavaScriptを使用していますので、処理が実行されています。

←

Prev　Next

→ 　

Back　

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

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

はい、理解しました。私はクリアアサヒというゲームを作ります。以下がその実装例です。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>クリアアサヒゲーム</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
      }
      #game-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
      }
      .tile {
        background-color: white;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="game-container"></div>
    
    <script>
      // ゲームの設定
      const size = 4;
      const targetNumber = getRandomNumber(1, size*size);
      let attempts = 0;
      
      // HTMLエレメント取得
      const gameContainer = document.getElementById('game-container');
      
      // ゲームの開始
      createGrid(size);
      
      // 選択された数字の確認
      function checkNumber(number) {
        attempts++;
        
        if (number === targetNumber) {
          alert(`成功！目指すべき数字 ${targetNumber} を見つけました！\n総試行回数: ${attempts}`);
          resetGame();
        } else {
          alert(`残念！選択した数字 ${number} は違います。もう一度トライしてください。`);
        }
      }
      
      // ゲームをリセット
      function resetGame() {
        targetNumber = getRandomNumber(1, size*size);
        attempts = 0;
        
        const tiles = document.getElementsByClassName('tile');
        Array.from(tiles).forEach(tile => {
          tile.textContent = '';
        });
      }
      
      // 数字のグリッドを作成
      function createGrid(size) {
        for (let i = 1; i <= size*size; i++) {
          const tile = document.createElement('div');
          tile.className = 'tile';
          tile.textContent = i;
          tile.addEventListener('click', function() {
            checkNumber(i);
          });
          
          gameContainer.appendChild(tile);
        }
      }
      
      // ランダムな数字を生成
      function getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
    </script>
  </body>
</html>
```

この実装では、4x4の数字のグリッドが表示されます。目指すべき数字がランダムに選ばれ、その数字を選択することでゲームを進行します。目指すべき数字を見つけると成功となり、試行回数が表示されます。また、間違った数字を選択すると失敗となり、再度トライすることができます。

このゲームはスマートフォンでも遊ぶことができますし、JavaScriptを使用していますので、処理が実行されています。