Pinguin Jump Game

by GlitchPilot84

218 lines3.8 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 Game</title>

<style>
body{
    margin:0;
    background:#87CEEB;
    font-family:Arial;
    overflow:hidden;
}

#game{
    position:relative;
    width:100vw;
    height:400px;
}

/* Boden */
#ground{
    position:absolute;
    bottom:0;
    width:100%;
    height:80px;
    background:white;
    border-top:4px solid #ccc;
}

/* 🐧 Pinguin */
#penguin{
    position:absolute;
    bottom:80px;
    left:100px;
    font-size:50px;
}

/* Hindernisse */
.obstacle{
    position:absolute;
    bottom:80px;
    right:-60px;
}

.rock{
    width:40px;
    height:40px;
    background:gray;
    border-radius:50%;
}

.stick{
    width:20px;
    height:60px;
    background:brown;
}

/* Score */
#scoreboard{
    position:absolute;
    top:10px;
    left:10px;
    font-size:22px;
    font-weight:bold;
}

/* Game Over */
#gameover{
    position:absolute;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:50px;
    color:red;
    display:none;
}

/* ⬆️ Jump Button */
#jumpBtn{
    position:absolute;
    bottom:20px;
    right:20px;
    width:100px;
    height:100px;
    border:none;
    border-radius:50%;
    background:#4CAF50;
    color:white;
    font-size:50px;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
}
</style>
</head>

<body>

<div id="game">
    <div id="scoreboard">
        Punkte: <span id="score">0</span>
    </div>

    <div id="gameover">GAME OVER</div>

    <div id="penguin">🐧</div>

    <button id="jumpBtn">⬆</button>

    <div id="ground"></div>
</div>

<script>
const penguin = document.getElementById("penguin");
const scoreEl = document.getElementById("score");
const gameoverEl = document.getElementById("gameover");
const jumpBtn = document.getElementById("jumpBtn");

let jumping = false;
let gameOver = false;
let score = 0;
let speed = 6;

/* 🦘 Springen */
function jump(){
    if(jumping || gameOver) return;

    jumping = true;
    let pos = 80;

    const up = setInterval(()=>{
        if(pos >= 220){
            clearInterval(up);

            const down = setInterval(()=>{
                if(pos <= 80){
                    clearInterval(down);
                    jumping = false;
                } else {
                    pos -= 6;
                    penguin.style.bottom = pos + "px";
                }
            },20);

        } else {
            pos += 6;
            penguin.style.bottom = pos + "px";
        }
    },20);
}

jumpBtn.addEventListener("click", jump);

/* 🪨 Hindernisse */
function createObstacle(){
    if(gameOver) return;

    const obs = document.createElement("div");
    obs.classList.add("obstacle");

    if(Math.random() < 0.5){
        obs.classList.add("rock");
    } else {
        obs.classList.add("stick");
    }

    document.getElementById("game").appendChild(obs);

    let pos = window.innerWidth;

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

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

        const p = penguin.getBoundingClientRect();
        const o = obs.getBoundingClientRect();

        if(
            p.left < o.right &&
            p.right > o.left &&
            p.bottom > o.top &&
            p.top < o.bottom
        ){
            gameOver = true;
            gameoverEl.style.display = "block";
        }

        if(pos < -100){
            clearInterval(move);
            obs.remove();

            score++;
            scoreEl.textContent = score;

            speed += 0.2;
        }

    },20);
}

/* Spiel Loop */
setInterval(()=>{
    if(!gameOver){
        createObstacle();
    }
},1500);
</script>

</body>
</html>

Game Source: Pinguin Jump Game

Creator: GlitchPilot84

Libraries: none

Complexity: complex (218 lines, 3.8 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" to link back to the original. Then publish at arcadelab.ai/publish.