Catch the falling cats game!'s game

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

No:52152

256

←

Prev Next

→

Catch the falling cats game!
Developer Winnerweiner2113｜Date and time 24/3/18 7:33:42
Build time 4.682 sec｜Game capacity 1.892KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Catch the Falling Cats Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

#game {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="game"></div>
    <script>
        let score = 0;

function createCat() {
            const cat = document.createElement('span');
            cat.innerHTML = '🐱';
            cat.style.position = 'absolute';
            cat.style.left = Math.random() * window.innerWidth + 'px';
            cat.style.top = '-100px';
            document.getElementById('game').appendChild(cat);

const speed = Math.random() * 3 + 1;

function fall() {
                const currentTop = parseInt(cat.style.top);
                cat.style.top = currentTop + speed + 'px';

if (currentTop > window.innerHeight) {
                    cat.remove();
                } else {
                    requestAnimationFrame(fall);
                }
            }

cat.addEventListener('click', () => {
                cat.remove();
                score++;
                updateScore();
            });

requestAnimationFrame(fall);
        }

function updateScore() {
            document.getElementById('game').innerText = `Score: ${score}`;

if (score < 10) {
                createCat();
            } else {
                document.getElementById('game').innerText = 'Game Over! Your score: ' + score;
            }
        }

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