Mario super bros brasko

Showcase
, , , ,
1
Super Mario Bros - Level 1 body { margin: 0; overflow: hidden; } canvas { display: block; background-color: #87CEEB; } 
    /* Mobile controls */
    .button-container {
        position: absolute;
        bottom: 20px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 30px;
    }
    .button {
        width: 60px;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
    }
    #jumpBtn {
        background-color: #ff4500;
    }
</style>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;

    const gravity = 0.5;
    const friction = 0.98;

    // Hráčské vlastnosti
    let player = {
        x: 50,
        y: canvas.height - 150,
        width: 50,
        height: 50,
        speed: 5,
        dx: 0,
        dy: 0,
        jumping: false
    };

    // Platformy
    let platforms = [
        { x: 0, y: canvas.height - 100, width: canvas.width, height: 50 }, // Spodní platforma
        { x: 150, y: canvas.height - 200, width: 200, height: 20 },
        { x: 400, y: canvas.height - 300, width: 200, height: 20 },
        { x: 650, y: canvas.height - 400, width: 200, height: 20 }
    ];

    // Ovládání pohybu
    let keys = {
        right: false,
        left: false,
        up: false
    };

    // Funkce pro pohyb hráče
    function movePlayer() {
        if (keys.right) {
            player.dx = player.speed;
        } else if (keys.left) {
            player.dx = -player.speed;
        } else {
            player.dx = 0;
        }

        if (keys.up && !player.jumping) {
            player.dy = -10;
            player.jumping = true;
        }

        player.x += player.dx;
        player.y += player.dy;

        // Implementace gravitace
        if (player.y + player.height < canvas.height) {
            player.dy += gravity;
        } else {
            player.dy = 0;
            player.y = canvas.height - player.height;
            player.jumping = false;
        }
    }

    // Funkce pro detekci kolize s platformami
    function checkCollisions() {
        for (let i = 0; i < platforms.length; i++) {
            let platform = platforms[i];
            if (player.y + player.height <= platform.y && player.y + player.height + player.dy >= platform.y &&
                player.x + player.width > platform.x && player.x < platform.x + platform.width) {
                player.dy = 0;
                player.y = platform.y - player.height;
                player.jumping = false;
            }
        }
    }

    // Funkce pro vykreslení všech objektů
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Vymazání předchozího snímku

        // Vykreslení hráče
        ctx.fillStyle = "#ff0000";
        ctx.fillRect(player.x, player.y, player.width, player.height);

        // Vykreslení platforem
        ctx.fillStyle = "#8B4513";
        platforms.forEach(platform => {
            ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
        });
    }

    // Funkce pro aktualizaci hry
    function update() {
        movePlayer();
        checkCollisions();
        draw();
        requestAnimationFrame(update);
    }

    // Funkce pro zpracování stisknutých kláves
    document.addEventListener('keydown', (e) => {
        if (e.key === "ArrowRight" || e.key === "d") {
            keys.right = true;
        } else if (e.key === "ArrowLeft" || e.key === "a") {
            keys.left = true;
        } else if (e.key === "ArrowUp" || e.key === " " || e.key === "w") {
            keys.up = true;
        }
    });

    document.addEventListener('keyup', (e) => {
        if (e.key === "ArrowRight" || e.key === "d") {
            keys.right = false;
        } else if (e.key === "ArrowLeft" || e.key === "a") {
            keys.left = false;
        } else if (e.key === "ArrowUp" || e.key === " " || e.key === "w") {
            keys.up = false;
        }
    });

    // Mobilní ovládání (Tlačítka)
    const buttonContainer = document.createElement('div');
    buttonContainer.className = 'button-container';
    document.body.appendChild(buttonContainer);

    const leftButton = document.createElement('button');
    leftButton.className = 'button';
    leftButton.innerHTML = '←';
    leftButton.onclick = () => keys.left = true;
    leftButton.ondblclick = () => keys.left = false;

    const rightButton = document.createElement('button');
    rightButton.className = 'button';
    rightButton.innerHTML = '→';
    rightButton.onclick = () => keys.right = true;
    rightButton.ondblclick = () => keys.right = false;

    const jumpButton = document.createElement('button');
    jumpButton.className = 'button';
    jumpButton.id = 'jumpBtn';
    jumpButton.innerHTML = '↑';
    jumpButton.onclick = () => keys.up = true;
    jumpButton.ondblclick = () => keys.up = false;

    buttonContainer.appendChild(leftButton);
    buttonContainer.appendChild(rightButton);
    buttonContainer.appendChild(jumpButton);

    // Spuštění hry
    update();
</script>