Make a platforming game's game

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

No:49393

←

Prev Next

→

Make a platforming game
Developer User21041｜Date and time 24/3/5 1:13:58
Build time 12.397 sec｜Game capacity 2.354KB｜

Script

Sure thing! Here's a simple platforming game in a single HTML file using JavaScript enclosed in script tags:

This platforming game features a simple blue square player that can jump onto a green platform by pressing a key on a smartphone. The player falls due to gravity and can only jump when touching the ground. The game loop checks for collision between the player and platform to allow the player to stand on it. Enjoy playing the game!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure thing! Here's a simple platforming game in a single HTML file using JavaScript enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Platformer Game</title>
    <style>
        #player {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        #platform {
            position: absolute;
            bottom: 150px;
            left: 200px;
            width: 100px;
            height: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="player"></div>
<div id="platform"></div>

function jump() {
        if (!isJumping) {
            isJumping = true;
            velocity = -15;
        }
    }

function gameLoop() {
        velocity += gravity;
        player.style.bottom = parseInt(player.style.bottom) + velocity + 'px';

if (parseInt(player.style.bottom) <= 0) {
            velocity = 0;
            player.style.bottom = '0px';
            isJumping = false;
        }

if (checkCollision()) {
            isJumping = false;
            velocity = 0;
            player.style.bottom = parseInt(platform.style.bottom) + parseInt(platform.style.height) + 'px';
        }

requestAnimationFrame(gameLoop);
    }

function checkCollision() {
        let playerRect = player.getBoundingClientRect();
        let platformRect = platform.getBoundingClientRect();

return !(
            playerRect.bottom < platformRect.top ||
            playerRect.top > platformRect.bottom ||
            playerRect.right < platformRect.left ||
            playerRect.left > platformRect.right
        );
    }

document.addEventListener('keydown', jump);
    gameLoop();
</script>
</body>
</html>
```