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

No:10111

←

Prev Next

→

rhythm
Developer User4479｜Date and time 23/7/29 3:00:27
Build time 28.918 sec｜Game capacity 4.155KB｜

Script

了解しました。以下に示すのは、シンプルな HTML リズムゲームの実装例です。

リズムゲーム

Score: 0

このプログラムは、画面上に表示される4つのボタンの中から正解のボタンをクリックするシンプルなリズムゲームです。ボタンのテキストには絵文字を使用しており、クリックすると正解か不正解かが表示されます。ゲームは「スタート」ボタンをクリックすることで開始され、正解のボタンはランダムなタイミングで表示されます。正解のボタンをクリックするとスコアが加算され、不正解のボタンをクリックするとスコアが減算されます。ボタンの表示や正解のボタンのタイミングは記述したプログラム内で自動的に行われており、ゲームをプレイすることができます。スマホでの操作にも対応しています。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に示すのは、シンプルな HTML リズムゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>リズムゲーム</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

#startButton {
      font-size: 24px;
      padding: 10px 20px;
      margin-top: 50px;
    }

#gameContainer {
      display: none;
      margin-top: 50px;
    }

#score {
      font-size: 36px;
      margin-bottom: 20px;
    }

.button {
      font-size: 48px;
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
    }

.correct {
      background-color: green;
    }

.incorrect {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>リズムゲーム</h1>
  <button id="startButton">スタート</button>

<div id="gameContainer">
    <p id="score">Score: 0</p>
    <div id="buttonsContainer"></div>
  </div>

// ゲームのステータスと盤面の情報
    let score = 0;
    let buttons = [];

// 開始ボタンがクリックされたときの処理
    document.getElementById('startButton').addEventListener('click', function() {
      // ボタンを表示する盤面を作成
      const buttonsContainer = document.getElementById('buttonsContainer');
      buttonsContainer.innerHTML = '';

for (let i = 0; i < 4; i++) {
        // ボタンを作成し、クリックイベントを設定
        const button = document.createElement('div');
        button.classList.add('button');
        button.textContent = '🔵'; // 絵文字を使って表示
        button.addEventListener('click', function() {
          if (button.classList.contains('correct')) {
            // 正解のボタンがクリックされた場合
            score++;
            audio.src = 'correct.wav'; // 正解の音を再生
            button.classList.remove('correct');
            button.classList.add('incorrect');
          } else {
            // 不正解のボタンがクリックされた場合
            score--;
            audio.src = 'incorrect.wav'; // 不正解の音を再生
            button.classList.add('incorrect');
          }

// スコアを更新する
          document.getElementById('score').textContent = 'Score: ' + score;
        });

buttons.push(button);
        buttonsContainer.appendChild(button);
      }

// ゲーム盤面を表示する
      document.getElementById('gameContainer').style.display = 'block';

// スコアを初期化
      score = 0;
      document.getElementById('score').textContent = 'Score: ' + score;

// ランダムなタイミングで正解のボタンを決定する
      setInterval(function() {
        const randomIndex = Math.floor(Math.random() * buttons.length);

buttons.forEach(function(button, index) {
          if (index === randomIndex) {
            button.classList.add('correct');
          } else {
            button.classList.remove('correct', 'incorrect');
          }
        });

// 正解の音を再生
        audio.src = 'correct.wav';
      }, 1000); // 1秒ごとに更新
    });
  </script>
</body>
</html>
```

このプログラムは、画面上に表示される4つのボタンの中から正解のボタンをクリックするシンプルなリズムゲームです。ボタンのテキストには絵文字を使用しており、クリックすると正解か不正解かが表示されます。

ゲームは「スタート」ボタンをクリックすることで開始され、正解のボタンはランダムなタイミングで表示されます。正解のボタンをクリックするとスコアが加算され、不正解のボタンをクリックするとスコアが減算されます。

ボタンの表示や正解のボタンのタイミングは記述したプログラム内で自動的に行われており、ゲームをプレイすることができます。スマホでの操作にも対応しています。