Glass and water. Water falling from other places and glass have to go there's game

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

No:16483

←

Prev Next

→

Glass and water. Water falling from other places a..ALL
Developer User7327｜Date and time 23/9/18 15:43:41
Build time 29.733 sec｜Game capacity 3.895KB｜

Script

Sure! Here's an example of a simple game where you can control a glass to catch falling water. The game is implemented as a single HTML file and uses JavaScript. The game can be played on a smartphone.

The game creates a glass and drops of water fall from the top. By moving the glass horizontally using touch controls, the player attempts to catch the falling water with the glass. If the water drop enters the glass, it is considered caught and disappears. If the water drop falls below the screen without being caught, it is considered missed. Note: This is a basic implementation to give you an idea, and you can enhance it further with additional features, levels, scoring, and more.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Glass and Water Game</title>
    <style>
        #container {
            position: relative;
            width: 100vw;
            height: 100vh;
            background-color: #e6f7ff;
            overflow: hidden;
        }

.glass {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 100px;
            background-color: #f2f2f2;
            border: 2px solid #888888;
        }

.water {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #3399ff;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="glass" class="glass"></div>
    </div>

// Set initial position of the glass
        var glassX = container.offsetWidth / 2;
        var glassY = container.offsetHeight - glass.offsetHeight - 10;

// Update the position of the glass
        function updateGlassPosition() {
            glass.style.left = glassX + 'px';
            glass.style.top = glassY + 'px';
        }

// Handle touch events to move the glass
        container.addEventListener('touchmove', function (event) {
            event.preventDefault(); // Prevent scrolling on touch devices
            var touch = event.touches[0];
            glassX = touch.clientX - container.offsetLeft;
        });

// Create and animate falling water drops
        function createWaterDrop() {
            var waterDrop = document.createElement('div');
            waterDrop.className = 'water';

container.appendChild(waterDrop);

var waterDropX = Math.random() * (container.offsetWidth - 40); // Random x position
            var waterDropY = 0;
            var gravity = 2; // Speed of falling

function animateWaterDrop() {
                waterDropY += gravity;
                waterDrop.style.transform = 'translate(' + waterDropX + 'px, ' + waterDropY + 'px)';

if (waterDropY + waterDrop.offsetHeight >= glassY && 
                    waterDropX >= glassX && 
                    waterDropX + waterDrop.offsetWidth <= glassX + glass.offsetWidth) {
                    // Water drop caught!
                    container.removeChild(waterDrop);
                } else if (waterDropY > container.offsetHeight) {
                    // Water drop missed
                    container.removeChild(waterDrop);
                } else {
                    requestAnimationFrame(animateWaterDrop);
                }
            }

animateWaterDrop();
        }

// Start the game
        function startGame() {
            setInterval(createWaterDrop, 1000); // Create a new water drop every second
            setInterval(updateGlassPosition, 10); // Update the glass position continuously
        }

startGame();
    </script>
</body>
</html>
```

Note: This is a basic implementation to give you an idea, and you can enhance it further with additional features, levels, scoring, and more.