Pinguin Jump Fixed

by GlitchPilot84
346 lines8.9 KB
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pinguin Jump Fixed</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            overflow: hidden;
            background: linear-gradient(#87CEEB, #e6f7ff);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        /* GAME CONTAINER */
        #game {
            position: relative;
            width: 800px;
            height: 400px;
            background: linear-gradient(#87CEEB, #e6f7ff);
            overflow: hidden;
            border: 2px solid #333;
        }
        #startScreen {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            z-index: 10;
        }
        #startScreen button {
            margin: 6px;
            padding: 10px 18px;
            font-size: 18px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background: #4CAF50;
            color: white;
        }
        #ground {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 80px;
            background: #eee;
            border-top: 2px solid #ccc;
        }
        #penguin {
            position: absolute;
            bottom: 80px;
            left: 100px;
            font-size: 55px;
            width: 55px;
            height: 55px;
            line-height: 1;
            z-index: 2;
        }
        .obstacle {
            position: absolute;
            bottom: 80px;
            z-index: 1;
        }
        .rock { width: 40px; height: 40px; background: gray; border-radius: 50%; }
        .stick { width: 18px; height: 60px; background: brown; border-radius: 5px; }
        /* UI */
        #ui {
            position: absolute;
            top: 10px;
            left: 10px;
            font-weight: bold;
            font-size: 18px;
            z-index: 5;
        }
        /* SHOP BUTTON */
        #shopBtn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 10px 15px;
            background: #ffcc00;
            border: none;
            border-radius: 10px;
            font-weight: bold;
            cursor: pointer;
            display: none;
            z-index: 5;
        }
        /* SHOP PANEL */
        #shop {
            position: absolute;
            top: 60px;
            right: 10px;
            background: white;
            padding: 10px;
            border-radius: 10px;
            display: none;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 6;
        }
        #shop button {
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        #gameover {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
            color: red;
            font-weight: bold;
            text-align: center;
            display: none;
            z-index: 5;
        }
        #playAgainBtn {
            margin-top: 15px;
            padding: 12px 24px;
            font-size: 20px;
            border: none;
            border-radius: 15px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
        }
        #jumpBtn {
            position: absolute;
            bottom: 90px;
            right: 20px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: none;
            background: #4CAF50;
            font-size: 30px;
            color: white;
            cursor: pointer;
            z-index: 5;
        }
    </style>
</head>
<body>

<div id="game">
    <div id="startScreen">
        <h2 id="text">Pinguin Jump</h2>
        <button onclick="setLang()">Spiel starten</button>
    </div>

    <div id="ui">
        Score: <span id="score">0</span><br>
        Coins: <span id="coins">0</span><br>
        Level: <span id="level">1</span>
    </div>

    <button id="shopBtn" onclick="toggleShop()">SHOP 🛍️</button>
    <div id="shop">
        <button onclick="buy(50,'🐧')">🐧 50</button>
        <button onclick="buy(100,'🐱')">🐱 100</button>
        <button onclick="buy(200,'🐉')">🐉 200</button>
    </div>

    <div id="gameover">
        GAME OVER<br>
        <button id="playAgainBtn" id="playAgainBtn">PLAY AGAIN</button>
    </div>

    <div id="penguin">🐧</div>
    <button id="jumpBtn">⬆</button>
    <div id="ground"></div>
</div>

<script>
let gameOver = true; // Startet erst nach Klick
let score = 0;
let coins = 0;
let level = 1;
let speed = 5;
let velocity = 0;
let gravity = 0.8;
let bottom = 80;
let jumping = false;
let obstacleTimer = null;
let skin = "🐧";

/* START */
function setLang() {
    document.getElementById("startScreen").style.display = "none";
    startGame();
}

/* GAME START */
function startGame() {
    clearInterval(obstacleTimer);
    document.querySelectorAll(".obstacle").forEach(e => e.remove());
    
    gameOver = false;
    score = 0;
    level = 1;
    speed = 5;
    bottom = 80;
    velocity = 0;
    jumping = false;

    document.getElementById("score").textContent = score;
    document.getElementById("coins").textContent = coins;
    document.getElementById("level").textContent = level;
    document.getElementById("gameover").style.display = "none";
    document.getElementById("shopBtn").style.display = "none";
    document.getElementById("shop").style.display = "none";
    document.getElementById("penguin").textContent = skin;

    obstacleTimer = setInterval(() => {
        if (!gameOver) createObstacle();
    }, 1500);
}

/* SHOP TOGGLE */
function toggleShop() {
    const s = document.getElementById("shop");
    s.style.display = s.style.display === "block" ? "none" : "block";
}

/* BUY */
function buy(cost, newSkin) {
    if (coins >= cost) {
        coins -= cost;
        skin = newSkin;
        document.getElementById("coins").textContent = coins;
        document.getElementById("penguin").textContent = skin;
    } else {
        alert("Nicht genug Coins!");
    }
}

/* LEVEL */
function updateLevel() {
    level = Math.floor(score / 5) + 1;
    document.getElementById("level").textContent = level;
    speed = 5 + level * 0.7;
}

/* OBSTACLE */
function createObstacle() {
    const gameContainer = document.getElementById("game");
    const o = document.createElement("div");
    o.className = "obstacle " + (Math.random() < 0.5 ? "rock" : "stick");
    gameContainer.appendChild(o);

    let pos = 800; // Breite des Spielfelds
    o.style.left = pos + "px";

    const move = setInterval(() => {
        if (gameOver) {
            clearInterval(move);
            o.remove();
            return;
        }

        pos -= speed;
        o.style.left = pos + "px";

        // Kollisionsabfrage
        const pRect = document.getElementById("penguin").getBoundingClientRect();
        const oRect = o.getBoundingClientRect();

        // Toleranzwert abziehen für fairere Kollision (Hitbox-Anpassung)
        if (pRect.left < oRect.right - 10 && 
            pRect.right > oRect.left + 10 && 
            pRect.bottom > oRect.top + 10) {
            clearInterval(move);
            endGame();
        }

        if (pos < -50) {
            clearInterval(move);
            o.remove();
            score++;
            coins += Math.floor(Math.random() * 5) + 1;
            document.getElementById("score").textContent = score;
            document.getElementById("coins").textContent = coins;
            updateLevel();
        }
    }, 16);
}

/* JUMP */
function jump() {
    if (!gameOver && !jumping) {
        velocity = 14;
        jumping = true;
    }
}

// Steuerung per Leertaste
window.addEventListener("keydown", e => {
    if (e.code === "Space") {
        e.preventDefault(); // Verhindert das Scrollen der Seite
        jump();
    }
});

// Steuerung per Klick / Touch auf den Button
document.getElementById("jumpBtn").addEventListener("click", jump);

/* PHYSICS LOOP */
function loop() {
    if (!gameOver) {
        velocity -= gravity;
        bottom += velocity;

        if (bottom <= 80) {
            bottom = 80;
            jumping = false;
            velocity = 0;
        }
        document.getElementById("penguin").style.bottom = bottom + "px";
    }
    requestAnimationFrame(loop);
}
loop();

/* END GAME */
function endGame() {
    gameOver = true;
    document.getElementById("gameover").style.display = "block";
    document.getElementById("shopBtn").style.display = "block";
}

// Play Again Button Event
document.getElementById("playAgainBtn").addEventListener("click", () => {
    startGame();
});
</script>
</body>
</html>
Game Source: Pinguin Jump Fixed

Creator: GlitchPilot84
Libraries: none
Complexity: complex (346 lines, 8.9 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: pinguin-jump-game-glitchpilot84-mqi3f27c" to link back to the original. Then publish at arcadelab.ai/publish.