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

No:29871

101

←

Prev Next

→

My singing jelly monsters: drag the objects to mon..ALL
Developer User13970｜Date and time 23/12/19 20:57:34
Build time 25.541 sec｜Game capacity 3.213KB｜

Script

Sure! Here's a simple game called "My Singing Jelly Monsters" implemented as a single HTML file using JavaScript:

My Singing Jelly Monsters

Drag the objects to the monsters to make some music!

🎤

🎹

🥁

To play the game, simply open the HTML file in a web browser on your smartphone. You will see three monsters (represented by pictograms) and several object containers. Drag the object containers and drop them onto the monsters to make them play music. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a simple game called "My Singing Jelly Monsters" implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Singing Jelly Monsters</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80vh;
        }
        
        .monster-container {
            width: 200px;
            height: 200px;
            margin: 10px;
            border: 2px solid black;
            border-radius: 50%;
            background-color: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        
        .object {
            width: 50px;
            height: 50px;
            margin: 10px;
            border: 2px solid black;
            background-color: lightgreen;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>My Singing Jelly Monsters</h1>
    <p>Drag the objects to the monsters to make some music!</p>
    
    <div id="game-container">
        <div id="monster-1" class="monster-container" draggable="true">
            🎤
        </div>
        <div id="monster-2" class="monster-container" draggable="true">
            🎹
        </div>
        <div id="monster-3" class="monster-container" draggable="true">
            🥁
        </div>
    </div>
    
    <script>
        // Get all the monster containers
        const monsterContainers = document.querySelectorAll('.monster-container');
        
        // Get all the objects
        const objects = document.getElementsByClassName('object');
        
        // Add event listeners to each monster container
        monsterContainers.forEach((monsterContainer) => {
            monsterContainer.addEventListener('dragover', (e) => {
                e.preventDefault();
            });
            
            monsterContainer.addEventListener('drop', (e) => {
                e.preventDefault();
                const object = document.getElementById(e.dataTransfer.getData("text"));
                monsterContainer.appendChild(object);
            });
        });
        
        // Add object containers and make them draggable
        for (let i = 0; i < objects.length; i++) {
            const objectContainer = document.createElement('div');
            objectContainer.className = 'object';
            objectContainer.id = 'object-' + i;
            objectContainer.draggable = true;
            objectContainer.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData("text/plain", e.target.id);
            });
            
            document.body.appendChild(objectContainer);
        }
    </script>
</body>
</html>
```