Jump and run Spiel. Gib keine Erklärungen, nur den Code.'s game

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

No:30720

156

←

Prev Next

→

Jump and run Spiel. Gib keine Erklärungen, nur den..ALL
Developer User14077｜Date and time 23/12/24 1:33:39
Build time 17.643 sec｜Game capacity 3.525KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Jump and Run Spiel</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #gameCanvas {
            background-color: #000;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

const player = {
            x: 50,
            y: 350,
            width: 50,
            height: 50,
            speed: 4,
            dy: 0,
            jumpForce: 15,
            grounded: false
        };

const controls = {
            ArrowUp: false
        };

const platforms = [
            { x: 50, y: 400, width: 200, height: 30 },
            { x: 300, y: 300, width: 150, height: 30 },
            { x: 100, y: 200, width: 100, height: 30 }
        ];

function drawPlayer() {
            ctx.beginPath();
            ctx.rect(player.x, player.y, player.width, player.height);
            ctx.fillStyle = "#FF0000";
            ctx.fill();
            ctx.closePath();
        }

function drawPlatforms() {
            platforms.forEach(platform => {
                ctx.beginPath();
                ctx.rect(platform.x, platform.y, platform.width, platform.height);
                ctx.fillStyle = "#00FF00";
                ctx.fill();
                ctx.closePath();
            });
        }

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

drawPlayer();
            drawPlatforms();
            collisionDetection();

if (controls.ArrowUp && player.grounded) {
                player.dy -= player.jumpForce;
                player.grounded = false;
            }

player.dy += 0.5;
            player.y += player.dy;
            
            if (player.y + player.height > canvas.height) {
                player.y = canvas.height - player.height;
                player.grounded = true;
                player.dy = 0;
            }

if (player.y < 0) {
                player.y = 0;
                player.dy = 0;
            }

player.x += player.speed;
            if (player.x > canvas.width - player.width) {
                player.x = 0;
            }

requestAnimationFrame(gameLoop);
        }

document.addEventListener("keydown", event => {
            if (event.code in controls) {
                controls[event.code] = true;
            }
        });

document.addEventListener("keyup", event => {
            if (event.code in controls) {
                controls[event.code] = false;
            }
        });

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