Pinguin Spiel

by GlitchPilot84
226 lines4.3 KB
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinguin Spiel</title>

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

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

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

#penguin{
    position:absolute;
    bottom:80px;
    left:100px;
    width:60px;
    height:60px;
    background:black;
    border-radius:50%;
}

#penguin::before{
    content:"";
    position:absolute;
    width:30px;
    height:30px;
    background:white;
    border-radius:50%;
    left:15px;
    top:15px;
}

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

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

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

#scoreboard{
    position:absolute;
    top:10px;
    left:10px;
    font-size:24px;
    font-weight:bold;
}

#gameover{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:50px;
    color:red;
    display:none;
}
</style>
</head>
<body>

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

    <div id="gameover">GAME OVER<br>Drücke R zum Neustart</div>

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

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

let jumping = false;
let score = 0;
let highscore = localStorage.getItem("penguinHighscore") || 0;
let gameOver = false;
let speed = 6;

highscoreEl.textContent = highscore;

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 -= 5;
                    penguin.style.bottom = pos + "px";
                }
            }, 20);

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

document.addEventListener("keydown",(e)=>{
    if(e.code==="Space" || e.code==="ArrowUp"){
        jump();
    }

    if(e.key.toLowerCase()==="r" && gameOver){
        location.reload();
    }
});

function createObstacle(){

    if(gameOver) return;

    const obstacle = document.createElement("div");

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

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

    let position = window.innerWidth;

    const move = setInterval(()=>{

        if(gameOver){
            clearInterval(move);
            obstacle.remove();
            return;
        }

        position -= speed;
        obstacle.style.left = position + "px";

        const penguinRect = penguin.getBoundingClientRect();
        const obstacleRect = obstacle.getBoundingClientRect();

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

            if(score > highscore){
                localStorage.setItem("penguinHighscore", score);
            }
        }

        if(position < -100){
            clearInterval(move);
            obstacle.remove();

            score++;
            scoreEl.textContent = score;

            if(score > highscore){
                highscore = score;
                highscoreEl.textContent = highscore;
            }

            speed += 0.2;
        }

    },20);
}

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

</body>
</html>
Game Source: Pinguin Spiel

Creator: GlitchPilot84
Libraries: none
Complexity: complex (226 lines, 4.3 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-spiel-glitchpilot84" to link back to the original. Then publish at arcadelab.ai/publish.