音楽作るゲーム's game

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

No:40683

←

Prev Next

→

音楽作るゲーム
Developer User18220｜Date and time 24/2/3 22:41:16
Build time 7.943 sec｜Game capacity 2.577KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>音楽作るゲーム</title>
    <style>
        #game-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #play-button {
            font-size: 36px;
            padding: 20px;
            background-color: orange;
            border: none;
            outline: none;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <button id="play-button">プレイする</button>
    </div>

playButton.addEventListener('click', startGame);

function startGame() {
            gameContainer.innerHTML = 'クリックして音楽を作りましょう！';

// 音楽を再生する関数
            function playSound(sound) {
                const audio = new Audio(sound);
                audio.play();
            }

// クリックイベントを追加
            gameContainer.addEventListener('click', createSound);

function createSound(event) {
                const sounds = ['🎵', '🎶', '🔊', '🎸', '🎹', '🥁', '🎺', '🎷', '🎻'];
                const randomIndex = Math.floor(Math.random() * sounds.length);
                const sound = sounds[randomIndex];

const newSound = document.createElement('div');
                newSound.innerText = sound;
                newSound.style.fontSize = '48px';
                newSound.style.position = 'absolute';
                newSound.style.left = `${event.clientX}px`;
                newSound.style.top = `${event.clientY}px`;
                newSound.style.transition = 'all 1s ease-in-out';
                newSound.style.transform = 'scale(2)';
                newSound.style.opacity = '0';

gameContainer.appendChild(newSound);

setTimeout(() => {
                    newSound.style.transform = 'scale(1)';
                    newSound.style.opacity = '1';
                    playSound('sound.mp3');
                }, 10);

setTimeout(() => {
                    newSound.style.opacity = '0';
                    setTimeout(() => {
                        gameContainer.removeChild(newSound);
                    }, 1000);
                }, 1000);
            }
        }
    </script>
</body>
</html>