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

No:21893

A song making game where you make songs
Developer User8566｜Date and time 23/10/19 7:25:52
Build time 38.384 sec｜Game capacity 2.576KB｜

Script

Sure! Here's a simple example of a song-making game implemented as a single HTML file with JavaScript. It allows the user to create a song by selecting pictograms representing different musical elements. The game assumes smartphone operation.

Song Maker Game

Create your own song!

Click on the pictograms below to add them to your song:

Your Song:

To use this code, save it as a `.html` file and open it in a web browser. You can replace the `emozi_cat.png`, `emozi_rabbit.png`, and `emozi_apple.png` with your own pictograms. By clicking on the pictograms, they will be added to the "Your Song" section. When you click the "Play Song" button, it will display an alert message, indicating that the song is playing (you can replace this with your actual song playback logic).

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```
<!DOCTYPE html>
<html>
<head>
    <title>Song Maker Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      img {
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
      }
      #song-container {
        margin-top: 20px;
      }
      #play-btn {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #4CAF50;
        border: none;
        color: white;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
</head>
<body>
    <h1>Song Maker Game</h1>
    <h2>Create your own song!</h2>
    <p>Click on the pictograms below to add them to your song:</p>
    <img src="pictogram1.png" onclick="addSongElement('pictogram1.png')" alt="Pictogram 1">
    <img src="pictogram2.png" onclick="addSongElement('pictogram2.png')" alt="Pictogram 2">
    <img src="pictogram3.png" onclick="addSongElement('pictogram3.png')" alt="Pictogram 3">

function addSongElement(pictogram) {
            songElements.push(pictogram);
            displaySong();
        }

function displaySong() {
            var songContainer = document.getElementById("song-container");
            var songHTML = "";
            for (var i = 0; i < songElements.length; i++) {
                songHTML += '<img src="' + songElements[i] + '" alt="Pictogram ' + (i + 1) + '">';
            }
            songContainer.innerHTML = songHTML;
        }

function playSong() {
            // Play the song audio or perform any desired action
            alert("Song is playing!"); // Placeholder action
        }
    </script>
</body>
</html>
```

To use this code, save it as a `.html` file and open it in a web browser. You can replace the `pictogram1.png`, `pictogram2.png`, and `pictogram3.png` with your own pictograms. By clicking on the pictograms, they will be added to the "Your Song" section. When you click the "Play Song" button, it will display an alert message, indicating that the song is playing (you can replace this with your actual song playback logic).