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

No:21894

A song making game where you make songs
Developer User8566｜Date and time 23/10/19 7:26:50
Build time 45.409 sec｜Game capacity 3.21KB｜

Script

Sure! Here's an example of a simple song making game implemented as a single HTML file using JavaScript:

Song Maker Game

Click on the pictograms to create your song:

In this game, you'll see a set of pictogram icons representing different musical notes. By clicking on any icon, it will be added to the song displayed below. Once you've created your song by adding multiple notes, you can click the "Play Song" button to simulate playing each note (you'll see the notes displayed in the console). Please note that this is just a basic example, and you would need to enhance the game further by adding functionality to play actual sounds or animations for each note, implementing a more visually appealing design, and expanding the options for pictograms.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple song making game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Song Maker Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        
        .icon {
            width: 50px;
            height: 50px;
            cursor: pointer;
            margin: 10px;
        }
        
        #note-icons {
            display: flex;
            flex-wrap: wrap;
        }
        
        #song {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .note {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }
        
        #play-button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: green;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Song Maker Game</h1>
    <h2>Click on the pictograms to create your song:</h2>
    
    <div id="note-icons">
        <img src="pictograms/note1.png" class="icon" alt="Note 1">
        <img src="pictograms/note2.png" class="icon" alt="Note 2">
        <img src="pictograms/note3.png" class="icon" alt="Note 3">
        
    </div>
    
    <div id="song">
        
    </div>
    
    <button id="play-button">Play Song</button>

// Event listener for adding notes to the song
        noteIcons.forEach(function(icon) {
            icon.addEventListener('click', function() {
                const newNote = document.createElement('div');
                newNote.classList.add('note');
                newNote.innerHTML = icon.outerHTML;
                songContainer.appendChild(newNote);
                
                songNotes.push(icon.alt);
            });
        });

// Event listener for playing the song
        playButton.addEventListener('click', function() {
            for (let note of songNotes) {
                console.log(`Playing ${note}...`);
                // Logic here to play the corresponding sound or animation
            }
        });
    </script>
</body>
</html>
```

Please note that this is just a basic example, and you would need to enhance the game further by adding functionality to play actual sounds or animations for each note, implementing a more visually appealing design, and expanding the options for pictograms.