Cats are liquid's game | AI game creator

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

No:52863

245

Cats are liquid
Developer User22241｜Date and time 24/3/26 6:28:39
Build time 8.936 sec｜Game capacity 2.207KB｜

🐱

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Cat Jump Game</title>
    <style>
        #player {
            width: 60px;
            height: 60px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .platform {
            width: 100px;
            height: 20px;
            background: green;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="player">🐱</div>

<div class="platform" style="bottom: 50px; left: 60%;"></div>
    <div class="platform" style="bottom: 120px; left: 30%;"></div>
    <div class="platform" style="bottom: 190px; left: 80%;"></div>

<script>
        const player = document.getElementById("player");
        let isJumping = false;
        let gravity = 0.9;
        let velocity = 0;
        let position = 0;

function jump() {
            let count = 0;
            isJumping = true;
            let jumpInterval = setInterval(function() {
                let playerBottom = parseFloat(getComputedStyle(player).bottom);
                if (playerBottom < 250 && count < 15) {
                    velocity += gravity;
                    position += velocity;
                    count++;
                } else {
                    isJumping = false;
                    clearInterval(jumpInterval);
                    velocity = 0;
                }
                player.style.bottom = `${position}px`;
            }, 20);
        }

document.addEventListener("keydown", function(event) {
            if (event.code === "Space" && !isJumping) {
                jump();
            }
        });

function gameLoop() {
            let platforms = document.getElementsByClassName("platform");
            Array.from(platforms).forEach(function(platform) {
                let platformLeft = parseFloat(getComputedStyle(platform).left);
                if (platformLeft > 0) {
                    platform.style.left = `${platformLeft - 2}px`;
                } else {
                    platform.style.left = `100%`;
                }
            });
        }

setInterval(gameLoop, 20);
    </script>
</body>
</html>