Make a platformer where you jump to other platforms dodging spikes with mobile controls's game

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

No:52132

444

←

Prev Next

→

Make a platformer where you jump to other platform..ALL
Developer User15630｜Date and time 24/3/18 1:29:42
Build time 6.029 sec｜Game capacity 1.966KB｜

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>
</head>

<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

let playerX = 50;
        let playerY = 300;
        let playerWidth = 50;
        let playerHeight = 50;
        let playerSpeed = 5;

let platformWidth = 100;
        let platformHeight = 20;
        let platformY = 350;

let platforms = [{ x: 0 }, { x: 200 }, { x: 400 }, { x: 600 }];

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

// Draw player
            ctx.fillStyle = 'blue';
            ctx.fillRect(playerX, playerY, playerWidth, playerHeight);

// Draw platforms
            ctx.fillStyle = 'green';
            platforms.forEach(platform => {
                ctx.fillRect(platform.x, platformY, platformWidth, platformHeight);
            });

// Check for collision with platforms
            platforms.forEach(platform => {
                if (playerX < platform.x + platformWidth &&
                    playerX + playerWidth > platform.x &&
                    playerY < platformY + platformHeight &&
                    playerY + playerHeight > platformY) {
                    playerY = platformY - playerHeight;
                }
            });

// Check for collision with spikes
            if (playerY + playerHeight > platformY) {
                console.log('Game Over');
            }

requestAnimationFrame(update);
        }

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

</html>