AI game creator

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

No:46840

←

Prev Next

→

Platformer game
Developer User20158｜Date and time 24/2/26 10:38:48
Build time 6.711 sec｜Game capacity 1.818KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Platformer Game</title>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    canvas {
        background-color: #f0f0f0;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// Player object
    const player = {
        x: 50,
        y: canvas.height - 100,
        width: 50,
        height: 50,
        speed: 5,
        isJumping: false,
        jumpHeight: 100,
        gravity: 2
    }

// Platform object
    const platform = {
        x: 0,
        y: canvas.height - 50,
        width: canvas.width,
        height: 50
    }

function drawPlayer() {
        ctx.fillStyle = 'blue';
        ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function drawPlatform() {
        ctx.fillStyle = 'green';
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
    }

function jump() {
        if (!player.isJumping) {
            player.isJumping = true;
            player.y -= player.jumpHeight;
        }
    }

function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
        drawPlatform();

if (player.isJumping) {
            player.y += player.gravity;
            if (player.y >= canvas.height - player.height) {
                player.isJumping = false;
                player.y = canvas.height - player.height;
            }
        }

requestAnimationFrame(update);
    }

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

update();
</script>
</body>
</html>