弾を避けるゲーム's game | AI game creator

Click here for free DL of the app version that can save data.

No:46622

65

弾を避けるゲーム
Developer User20162｜Date and time 24/2/25 13:06:21
Build time 6.852 sec｜Game capacity 2.353KB｜

→ 　

0　

0　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>弾を避けるゲーム</title>
<style>
    #player {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .bullet {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute;
        top: -20px;
        left: 0;
    }
</style>
</head>
<body>

<div id="player"></div>

<script>
    const player = document.getElementById("player");
    let playerLeft = 50;
    
    const createBullet = () => {
        const bullet = document.createElement("div");
        bullet.className = "bullet";
        bullet.style.left = Math.random() * window.innerWidth + "px";
        document.body.appendChild(bullet);
        
        const moveBullet = () => {
            let top = parseInt(bullet.style.top);
            if (top > window.innerHeight) {
                document.body.removeChild(bullet);
            } else {
                bullet.style.top = top + 5 + "px";
                if (checkCollision(bullet)) {
                    endGame();
                }
                requestAnimationFrame(moveBullet);
            }
        };
        requestAnimationFrame(moveBullet);
    };
    
    const checkCollision = (bullet) => {
        const playerRect = player.getBoundingClientRect();
        const bulletRect = bullet.getBoundingClientRect();
        
        return !(
            playerRect.top > bulletRect.bottom ||
            playerRect.bottom < bulletRect.top ||
            playerRect.left > bulletRect.right ||
            playerRect.right < bulletRect.left
        );
    };
    
    const endGame = () => {
        alert("ゲームオーバー！リロードして再挑戦！");
        location.reload();
    };
    
    document.addEventListener("mousemove", (e) => {
        playerLeft = e.clientX;
        if (playerLeft < player.offsetWidth / 2) {
            playerLeft = player.offsetWidth / 2;
        } else if (playerLeft > window.innerWidth - player.offsetWidth / 2) {
            playerLeft = window.innerWidth - player.offsetWidth / 2;
        }
        player.style.left = playerLeft + "px";
    });
    
    setInterval(createBullet, 1000);
</script>

</body>
</html>