Get the ball into the glass with 10 levels's game

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

No:52776

219

←

Prev Next

→

Get the ball into the glass with 10 levels
Developer User15231｜Date and time 24/3/24 19:39:57
Build time 9.663 sec｜Game capacity 1.934KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ball in the Glass Game</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    #game-container {
        display: flex;
        padding: 20px;
        border: 2px solid black;
        border-radius: 10px;
    }
    #ball {
        width: 30px;
        height: 30px;
        background: green;
        border-radius: 50%;
        margin-right: 10px;
    }
    #glass {
        width: 60px;
        height: 100px;
        background: blue;
        border-radius: 10px;
    }
</style>
</head>
<body>
<div id="game-container">
    <div id="ball"></div>
    <div id="glass"></div>
</div>

let level = 1;

function moveBall(event) {
        let posX = event.touches[0].pageX - window.innerWidth / 2;
        let posY = event.touches[0].pageY - window.innerHeight / 2;

ball.style.transform = `translate(${posX}px, ${posY}px)`;

checkWin();
    }

function checkWin() {
        let ballRect = ball.getBoundingClientRect();
        let glassRect = glass.getBoundingClientRect();

if (ballRect.left > glassRect.left && ballRect.right < glassRect.right && ballRect.top > glassRect.top && ballRect.bottom < glassRect.bottom) {
            alert('Level ' + level + ' completed!');
            level++;
            if (level <= 10) {
                resetLevel();
            } else {
                alert('Congratulations, you won the game!');
            }
        }
    }

function resetLevel() {
        ball.style.transform = `translate(0, 0)`;
    }

document.addEventListener('touchmove', moveBall);

</script>
</body>
</html>
```