Game where you must slide a character on the bottom end of the screen to catch items falling from above.'s game

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

No:52834

224

←

Prev Next

→

Game where you must slide a character on the botto..ALL
Developer User18873｜Date and time 24/3/25 13:11:25
Build time 12.763 sec｜Game capacity 2.627KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>

<head>
    <title>Falling Items Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f2f2f2;
        }

#player {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: blue;
        }

.item {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="player"></div>
    <script>
        let player = document.getElementById('player');
        let score = 0;

function randomXPosition() {
            return Math.floor(Math.random() * window.innerWidth);
        }

function createItem() {
            let item = document.createElement('div');
            item.className = 'item';
            item.style.left = randomXPosition() + 'px';
            document.body.appendChild(item);

let fallInterval = setInterval(() => {
                let playerLeft = player.getBoundingClientRect().left;
                let playerRight = player.getBoundingClientRect().right;
                let playerBottom = player.getBoundingClientRect().bottom;
                
                let itemTop = item.getBoundingClientRect().top;
                let itemLeft = item.getBoundingClientRect().left;

if (itemTop >= window.innerHeight) {
                    clearInterval(fallInterval);
                    item.remove();
                }

if (itemTop + 20 >= playerBottom && itemLeft >= playerLeft && itemLeft <= playerRight) {
                    score++;
                    item.remove();
                    clearInterval(fallInterval);
                    updateScore();
                }
                
                item.style.top = (item.offsetTop + 2) + 'px';
            }, 10);
        }

function updateScore() {
            player.innerHTML = 'Score: ' + score;
        }

setInterval(createItem, 1000);

</html>