Make a cat platformer's game

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

No:40509

←

Prev Next

→

Make a cat platformer
Developer User18157｜Date and time 24/2/3 5:32:04
Build time 11.052 sec｜Game capacity 3.627KB｜

Script

Sure! Here's a simple cat platformer game implemented as a single HTML file using JavaScript:

In this game, you control a cat character using the arrow keys on your smartphone's keyboard (assuming it has one). The objective is to navigate the cat to land on the platforms by jumping. The cat falls down due to gravity and you can make it jump by pressing the up arrow key. The cat will collide with the platforms and land on them. Note: Make sure to replace `'emozi_all/cat.png'` in the CSS section with the correct path to your cat image file.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's a simple cat platformer game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cat Platformer</title>
    <style>
        #game-container {
            width: 400px;
            height: 300px;
            position: relative;
            border: 1px solid black;
            margin: 0 auto;
            overflow: hidden;
        }
        #player {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 175px;
            bottom: 0;
            background-image: url('cat.png');
            background-size: 50px 50px;
        }
        .platform {
            width: 100px;
            height: 20px;
            position: absolute;
            background-color: gray;
        }
    </style>
</head>
<body>
<div id="game-container">
    <div id="player"></div>
    <div class="platform" style="left: 100px; bottom: 100px;"></div>
    <div class="platform" style="left: 250px; bottom: 150px;"></div>
</div>

const gravity = 0.5;
    const jumpForce = 10;
    const moveSpeed = 5;

let playerYVelocity = 0;
    let isJumping = false;

function gameLoop() {
        movePlayer();
        applyGravity();
        checkCollision();
        requestAnimationFrame(gameLoop);
    }

function applyGravity() {
        // Apply gravity to the player
        if (!isJumping) {
            playerYVelocity -= gravity; // The playerYVelocity value determines how fast the player moves up or down
            player.style.bottom = parseInt(player.style.bottom) - playerYVelocity + 'px';
        }
    }

function checkCollision() {
        // Check collision between player and platforms
        const playerRect = player.getBoundingClientRect();

platforms.forEach(platform => {
            const platformRect = platform.getBoundingClientRect();

if (
                playerRect.bottom >= platformRect.top &&
                playerRect.bottom <= platformRect.bottom &&
                playerRect.right >= platformRect.left &&
                playerRect.left <= platformRect.right
            ) {
                isJumping = false;
                player.style.bottom = platformRect.top + 'px';
                playerYVelocity = 0;
            }
        });
    }

function jump() {
        if (!isJumping) {
            isJumping = true;
            playerYVelocity += jumpForce;
        }
    }

document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowUp') {
            jump();
        }
    });

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

Note: Make sure to replace `'cat.png'` in the CSS section with the correct path to your cat image file.