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

No:10889

132

←

Prev Next

→

baby metal
Developer User4481｜Date and time 23/8/5 15:33:13
Build time 37.934 sec｜Game capacity 3.976KB｜

Script

わかりました。以下にプログラムの例を示します。

ベイビーメタルゲーム

タップしてベイビーメタルのメンバーを集めよう！

スコア: 0

このプログラムは、スマホで遊べるベイビーメタルゲームです。画面上に表示される「ベイビーメタルのメンバー」の絵文字をタップすると、スコアが加算されます。ゲームが終了したら、ゲームをリセットすることもできます。スマホのブラウザで上記のHTMLファイルを開くと、ゲームが実行されます。必要に応じて、絵文字やゲームのルールなどをカスタマイズしてください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

わかりました。以下にプログラムの例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Baby Metal Game</title>
</head>
<body>
  <div id="gameScreen">
    <h1>ベイビーメタルゲーム</h1>
    <p>タップしてベイビーメタルのメンバーを集めよう！</p>
    <button id="startButton">ゲームを開始</button>
    <div id="score">スコア: 0</div>
  </div>

// ゲームのスコア
    let score = 0;

// スコア表示用の要素を取得
    const scoreElement = document.getElementById("score");

// グリッド要素のサイズ（ベイビーメタルメンバーの画像の一辺の長さ）
    const gridSize = 100;

// グリッドの行数と列数
    const numRows = Math.floor(window.innerHeight / gridSize);
    const numCols = Math.floor(window.innerWidth / gridSize);

// メンバーの要素を格納する2次元配列
    const memberElements = [];

// ゲームの状態を表すフラグ
    let isPlaying = false;

// ベイビーメタルメンバーをクリックしたときの処理
    function clickMember(event) {
      if (isPlaying) {
        event.target.style.visibility = "hidden";
        score++;
        scoreElement.textContent = `スコア: ${score}`;
      }
    }

// ゲームを開始する処理
    function startGame() {
      isPlaying = true;
      document.getElementById("startButton").style.display = "none";
      createMembers();
      scoreElement.style.display = "block";
    }

// ベイビーメタルメンバーの要素を作成し、画面に表示する処理
    function createMembers() {
      for (let i = 0; i < numRows; i++) {
        memberElements[i] = [];
        for (let j = 0; j < numCols; j++) {
          const member = document.createElement("div");
          member.textContent = memberImages[Math.floor(Math.random() * memberImages.length)];
          member.style.position = "absolute";
          member.style.top = `${i * gridSize}px`;
          member.style.left = `${j * gridSize}px`;
          member.style.fontSize = `${gridSize}px`;
          member.addEventListener("click", clickMember);
          memberElements[i][j] = member;
          document.getElementById("gameScreen").appendChild(member);
        }
      }
    }

// ゲームをリセットする処理
    function resetGame() {
      isPlaying = false;
      score = 0;
      scoreElement.textContent = `スコア: ${score}`;
      document.getElementById("startButton").style.display = "block";

for (let i = 0; i < numRows; i++) {
        for (let j = 0; j < numCols; j++) {
          memberElements[i][j].style.visibility = "visible";
        }
      }
    }

// ゲーム開始ボタンのクリックイベントを設定
    document.getElementById("startButton").addEventListener("click", startGame);

// リセットボタンの作成とクリックイベントを設定
    const resetButton = document.createElement("button");
    resetButton.textContent = "ゲームをリセット";
    resetButton.addEventListener("click", resetGame);
    document.getElementById("gameScreen").appendChild(resetButton);
    resetButton.style.display = "none";
  </script>
</body>
</html>
```

このプログラムは、スマホで遊べるベイビーメタルゲームです。画面上に表示される「ベイビーメタルのメンバー」の絵文字をタップすると、スコアが加算されます。ゲームが終了したら、ゲームをリセットすることもできます。

スマホのブラウザで上記のHTMLファイルを開くと、ゲームが実行されます。必要に応じて、絵文字やゲームのルールなどをカスタマイズしてください。