理不尽ソウル地獄

by SparkGecko92
330 lines6.1 KB
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>理不尽ソウル地獄</title>

<style>
body{
    margin:0;
    background:black;
    overflow:hidden;
    font-family:monospace;
    color:white;
}

#battleBox{
    width:100vw;
    height:100vh;
    position:relative;
    overflow:hidden;
    border:5px solid white;
}

#soul{
    width:22px;
    height:22px;
    position:absolute;
    transform:rotate(45deg);
    left:300px;
    top:300px;
    z-index:100;
}

.attack{
    position:absolute;
    background:white;
}

#text{
    position:absolute;
    top:10px;
    left:10px;
    font-size:30px;
    z-index:999;
}
</style>
</head>
<body>

<div id="battleBox">

    <div id="text">
        生き残れ。
    </div>

    <div id="soul"></div>

</div>

<script>

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

let x = window.innerWidth/2;
let y = window.innerHeight/2;

let soulType = "cyan";

const keys = {};

document.addEventListener("keydown",(e)=>{

    keys[e.key] = true;

    // シアン瞬間移動
    if(soulType === "cyan"){

        if(e.key === "ArrowUp") y -= 120;
        if(e.key === "ArrowDown") y += 120;
        if(e.key === "ArrowLeft") x -= 120;
        if(e.key === "ArrowRight") x += 120;
    }

});

document.addEventListener("keyup",(e)=>{
    keys[e.key] = false;
});

function update(){

    // 赤
    if(soulType === "red"){

        if(keys["ArrowUp"]) y -= 7;
        if(keys["ArrowDown"]) y += 7;
        if(keys["ArrowLeft"]) x -= 7;
        if(keys["ArrowRight"]) x += 7;
    }

    // 青
    if(soulType === "blue"){

        if(keys["ArrowLeft"]) x -= 8;
        if(keys["ArrowRight"]) x += 8;

        y += 10;

        if(keys["ArrowUp"]){
            y -= 20;
        }
    }

    // 紫
    if(soulType === "purple"){

        if(keys["ArrowLeft"]) x -= 12;
        if(keys["ArrowRight"]) x += 12;

        if(keys["ArrowUp"]) y -= 60;
        if(keys["ArrowDown"]) y += 60;
    }

    // 壁
    if(x < 0) x = 0;
    if(y < 0) y = 0;
    if(x > window.innerWidth-20) x = window.innerWidth-20;
    if(y > window.innerHeight-20) y = window.innerHeight-20;

    soul.style.left = x + "px";
    soul.style.top = y + "px";

    requestAnimationFrame(update);
}

update();

// 色変更（理不尽）
setInterval(()=>{

    const types = ["red","blue","purple","cyan"];

    soulType =
    types[Math.floor(Math.random()*types.length)];

    if(soulType === "red"){
        soul.style.background = "red";
    }

    if(soulType === "blue"){
        soul.style.background = "#4da6ff";
    }

    if(soulType === "purple"){
        soul.style.background = "violet";
    }

    if(soulType === "cyan"){
        soul.style.background = "cyan";
    }

},900);

// 超高速攻撃
setInterval(()=>{

    for(let i=0;i<10;i++){

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

        atk.classList.add("attack");

        const size =
        Math.random()*80 + 10;

        atk.style.width = size + "px";
        atk.style.height = size + "px";

        const side =
        Math.floor(Math.random()*4);

        let ax, ay, vx, vy;

        // 上
        if(side === 0){

            ax = Math.random()*window.innerWidth;
            ay = -100;

            vx = (Math.random()-0.5)*20;
            vy = Math.random()*20+15;
        }

        // 下
        if(side === 1){

            ax = Math.random()*window.innerWidth;
            ay = window.innerHeight+100;

            vx = (Math.random()-0.5)*20;
            vy = -(Math.random()*20+15);
        }

        // 左
        if(side === 2){

            ax = -100;
            ay = Math.random()*window.innerHeight;

            vx = Math.random()*20+15;
            vy = (Math.random()-0.5)*20;
        }

        // 右
        if(side === 3){

            ax = window.innerWidth+100;
            ay = Math.random()*window.innerHeight;

            vx = -(Math.random()*20+15);
            vy = (Math.random()-0.5)*20;
        }

        atk.style.left = ax + "px";
        atk.style.top = ay + "px";

        document.body.appendChild(atk);

        const move = setInterval(()=>{

            ax += vx;
            ay += vy;

            atk.style.left = ax + "px";
            atk.style.top = ay + "px";

            const soulRect =
            soul.getBoundingClientRect();

            const atkRect =
            atk.getBoundingClientRect();

            if(
                soulRect.left < atkRect.right &&
                soulRect.right > atkRect.left &&
                soulRect.top < atkRect.bottom &&
                soulRect.bottom > atkRect.top
            ){

                document.body.innerHTML =
                `
                <div style="
                color:red;
                font-size:120px;
                display:flex;
                justify-content:center;
                align-items:center;
                width:100vw;
                height:100vh;
                background:black;
                font-family:monospace;
                ">
                YOU DIED
                </div>
                `;
            }

            if(
                ax < -300 ||
                ax > window.innerWidth+300 ||
                ay < -300 ||
                ay > window.innerHeight+300
            ){
                atk.remove();
                clearInterval(move);
            }

        },16);

    }

},120);

// ランダムレーザー
setInterval(()=>{

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

    laser.style.position = "absolute";

    const vertical =
    Math.random() > 0.5;

    if(vertical){

        laser.style.width = "40px";
        laser.style.height = "100vh";

        laser.style.left =
        Math.random()*window.innerWidth + "px";

        laser.style.top = "0";

    }else{

        laser.style.height = "40px";
        laser.style.width = "100vw";

        laser.style.top =
        Math.random()*window.innerHeight + "px";

        laser.style.left = "0";
    }

    laser.style.background = "red";

    document.body.appendChild(laser);

    setTimeout(()=>{
        laser.remove();
    },300);

},700);

</script>

</body>
</html>
Game Source: 理不尽ソウル地獄

Creator: SparkGecko92
Libraries: none
Complexity: complex (330 lines, 6.1 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: -sparkgecko92" to link back to the original. Then publish at arcadelab.ai/publish.