AI game creator

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

No:12008

←

Prev Next

→

master of the drums
Developer User5019｜Date and time 23/8/13 13:27:48
Build time 18.027 sec｜Game capacity 2.652KB｜

Script

了解です。以下に太鼓の達人風のゲームを実装したHTMLファイルの一例を示します。

🥁

このゲームでは、画面上のドラムをクリックすることで、クリックしたタイミングに応じてメッセージが表示されます（Perfect!、Great!、Good!、Bad!）。3秒後にリセットされ、再びドラムを叩くことができます。実際のプログラムとして遊ぶことができますし、スマートフォン操作にも対応しています。絵文字（🥁）も使用しています。このHTMLファイルをブラウザで開くと、太鼓の達人風のゲームが表示されることを確認できます。

←

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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .drum {
            font-size: 100px;
            cursor: pointer;
        }
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
        .yellow {
            color: yellow;
        }
        .green {
            color: green;
        }
    </style>
</head>
<body>
    <div class="drum">🥁</div>
    <script>
        // JavaScriptコード

// 開始時刻を取得
        var startTime = Date.now();

// ドラム要素を取得
        var drum = document.querySelector('.drum');

// クリックイベントのリスナーを登録
        drum.addEventListener('click', function() {
            // 経過時間を計算
            var elapsedTime = Date.now() - startTime;

// タイミングによってメッセージを表示
            if (elapsedTime < 100) {
                drum.classList.add('red');
                drum.textContent = 'Perfect!';
            } else if (elapsedTime < 200) {
                drum.classList.add('blue');
                drum.textContent = 'Great!';
            } else if (elapsedTime < 300) {
                drum.classList.add('yellow');
                drum.textContent = 'Good!';
            } else if (elapsedTime < 400) {
                drum.classList.add('green');
                drum.textContent = 'Bad!';
            }
            
            // 3秒後にリセット
            setTimeout(function() {
                drum.classList.remove('red', 'blue', 'yellow', 'green');
                drum.textContent = '🥁';
                startTime = Date.now();
            }, 3000);
        });
    </script>
</body>
</html>
```

このゲームでは、画面上のドラムをクリックすることで、クリックしたタイミングに応じてメッセージが表示されます（Perfect!、Great!、Good!、Bad!）。3秒後にリセットされ、再びドラムを叩くことができます。

実際のプログラムとして遊ぶことができますし、スマートフォン操作にも対応しています。絵文字（🥁）も使用しています。

このHTMLファイルをブラウザで開くと、太鼓の達人風のゲームが表示されることを確認できます。