Sleepy kittens: drag the three kittens straight in bed's game

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

No:28221

←

Prev Next

→

Sleepy kittens: drag the three kittens straight in..ALL
Developer User13970｜Date and time 23/12/11 8:49:13
Build time 18.979 sec｜Game capacity 3.147KB｜

Script

Sure! Here's a simple game using JavaScript and pictograms where you can drag three sleepy kittens straight into bed on a smartphone:

Drag the sleepy kittens straight into bed!

Please make sure to place the actual pictogram images (bed.png, kitten1.png, kitten2.png, kitten3.png) in the same directory as the HTML file for the game to work properly.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game using JavaScript and pictograms where you can drag three sleepy kittens straight into bed on a smartphone:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Sleepy Kittens Game</title>
    <style>
        #gameContainer {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
        }
        .kitten {
            position: absolute;
            width: 100px;
            height: 100px;
            cursor: grab;
        }
        #bed {
            position: absolute;
            width: 300px;
            height: 200px;
            background-color: blue;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <img id="bed" src="bed.png"> Drag the sleepy kittens straight into bed!
        <img id="kitten1" class="kitten" src="kitten1.png">
        <img id="kitten2" class="kitten" src="kitten2.png">
        <img id="kitten3" class="kitten" src="kitten3.png">
    </div>

// Function to prevent default behavior of dragging
        function preventDrag(event) {
            event.preventDefault();
        }

// Function to handle dropping the kittens into bed
        function drop(event) {
            event.preventDefault();
            var kittenId = event.dataTransfer.getData("text/plain");
            var bed = document.getElementById("bed");
            var kitten = document.getElementById(kittenId);

if (bed.contains(kitten)) {
                // If kitten is already in bed, do nothing
                return;
            } else {
                // Move the kitten into bed and show success message
                kitten.style.position = "relative";
                kitten.style.left = "0";
                kitten.style.top = "0";
                bed.appendChild(kitten);
                bed.innerHTML = "Hooray! The sleepy kittens are in bed!";
                bed.style.backgroundColor = "green";
                bed.style.fontSize = "24px";
            }
        }

// Add event listeners to the kittens and bed
        var kittens = document.getElementsByClassName("kitten");
        var bed = document.getElementById("bed");
        bed.addEventListener("dragover", preventDrag);
        bed.addEventListener("drop", drop);

for (var i = 0; i < kittens.length; i++) {
            var kitten = kittens[i];
            kitten.addEventListener("dragstart", drag);
        }
    </script>
</body>
</html>
```

Please make sure to place the actual pictogram images (bed.png, kitten1.png, kitten2.png, kitten3.png) in the same directory as the HTML file for the game to work properly.