pepe man

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

    #suelo {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        background: #555;
    }

    #heroe {
        position: absolute;
        left: 150px;
        bottom: 100px;
        width: 100px;
        height: 170px;
    }

    /* CAPA ROJA */
    .capa {
        position: absolute;
        width: 65px;
        height: 100px;
        background: red;
        left: 12px;
        top: 48px;
        clip-path: polygon(40% 0, 100% 100%, 0 85%);
        z-index: -1;
    }

    /* CABEZA */
    .cabeza {
        position: absolute;
        width: 38px;
        height: 38px;
        border: 5px solid black;
        border-radius: 50%;
        left: 31px;
    }

    /* CUERPO */
    .cuerpo {
        position: absolute;
        width: 6px;
        height: 70px;
        background: black;
        left: 50px;
        top: 45px;
    }

    /* BRAZOS */
    .brazo {
        position: absolute;
        width: 55px;
        height: 6px;
        background: black;
        top: 65px;
        transform-origin: left center;
    }

    .brazo1 {
        left: 51px;
        transform: rotate(-20deg);
    }

    .brazo2 {
        left: 2px;
        transform: rotate(20deg);
    }

    /* PIERNAS */
    .pierna {
        position: absolute;
        width: 60px;
        height: 6px;
        background: black;
        top: 110px;
        transform-origin: left center;
    }

    .pierna1 {
        left: 52px;
        transform: rotate(60deg);
    }

    .pierna2 {
        left: 50px;
        transform: rotate(120deg);
    }

    #enemigo {
        position: absolute;
        right: 150px;
        bottom: 100px;
        font-size: 80px;
    }

    #instrucciones {
        position: absolute;
        top: 20px;
        left: 20px;
        background: white;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 3px 10px #555;
    }

    .golpe {
        animation: atacar 0.25s;
    }

    @keyframes atacar {
        50% {
            transform: translateX(50px);
        }
    }
</style>
</head>

<body>

<div id="instrucciones">
    🦸 <b>SUPERHÉROE</b><br>
    ← → Moverse<br>
    ESPACIO = ¡GOLPE!
</div>

<div id="heroe">

    <div class="capa"></div>

    <div class="cabeza"></div>

    <div class="cuerpo"></div>

    <div class="brazo brazo1"></div>
    <div class="brazo brazo2"></div>

    <div class="pierna pierna1"></div>
    <div class="pierna pierna2"></div>

</div>

<div id="enemigo">👾</div>

<div id="suelo"></div>

<script>

const heroe = document.getElementById("heroe");

let posicion = 150;

// CONTROLES
document.addEventListener("keydown", function(event) {

    // MOVER A LA DERECHA
    if(event.key === "ArrowRight") {
        posicion += 15;
        heroe.style.left = posicion + "px";
    }

    // MOVER A LA IZQUIERDA
    if(event.key === "ArrowLeft") {
        posicion -= 15;
        heroe.style.left = posicion + "px";
    }

    // PELEAR
    if(event.code === "Space") {

        heroe.classList.add("golpe");

        setTimeout(function(){
            heroe.classList.remove("golpe");
        }, 250);

    }

});

</script>

</body>
</html>