2dスクロールアクションゲーム黒いサングラス男に捕まるとゲームオーバー黒いサングラス男から1分間逃げ切ったらクリア黒いサングラス男はスタート時複数体出現し追跡してくるまた、スタート時、障害物をランダムに配置's game

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

No:30956

←

Prev Next

→

2dスクロールアクションゲーム黒いサングラス男に捕まるとゲームオーバー黒いサングラス男から1分間..ALL
Developer User14987｜Date and time 23/12/24 17:59:10
Build time 18.152 sec｜Game capacity 4.924KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2Dスクロールアクションゲーム</title>
    <style>
        /* スタイルシート */
        #player {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 32px;
        }
        .obstacle {
            position: absolute;
            top: 0;
            height: 100%;
            width: 20px;
            background-color: gray;
        }
        #enemy {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 32px;
        }
        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            color: red;
            text-align: center;
        }
        .clear {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            color: green;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        // JavaScriptコード
        var player = document.getElementById("player");
        var enemy = document.getElementById("enemy");
        var obstacles = [];

// プレイヤーの初期位置
        var playerX = window.innerWidth / 2;
        var playerY = window.innerHeight / 2;
        player.style.left = playerX + "px";
        player.style.top = playerY + "px";

// ゲームオーバー、クリア判定フラグ
        var gameOver = false;
        var cleared = false;

// 敵の初期位置
        var enemyX = Math.random() * (window.innerWidth - 100);
        var enemyY = Math.random() * (window.innerHeight - 100);
        enemy.style.left = enemyX + "px";
        enemy.style.top = enemyY + "px";

// 障害物をランダムに配置
        for (var i = 0; i < 10; i++) {
            var obstacle = document.createElement("div");
            obstacle.className = "obstacle";
            var obstacleX = Math.random() * (window.innerWidth - 20);
            obstacle.style.left = obstacleX + "px";
            obstacles.push(obstacle);
            document.body.appendChild(obstacle);
        }
        
        // スマホの操作
        window.addEventListener("deviceorientation", function (event) {
            var moveX = event.gamma / 10;
            var moveY = event.beta / 10;
            
            // プレイヤーの位置を更新
            playerX -= moveX;
            playerY += moveY;
            player.style.left = playerX + "px";
            player.style.top = playerY + "px";

// プレイヤーと敵の衝突判定
            if (!gameOver && !cleared) {
                if (isCollided(player, enemy)) {
                    endGame(false);
                }
            }

// プレイヤーと障害物の衝突判定
            obstacles.forEach(function (obstacle) {
                if (!gameOver && !cleared) {
                    if (isCollided(player, obstacle)) {
                        endGame(false);
                    }
                }
            });

// クリア判定
            if (!gameOver && !cleared) {
                var currentTime = new Date().getTime();
                var startTime = sessionStorage.getItem("startTime");
                if (startTime == null) {
                    sessionStorage.setItem("startTime", currentTime);
                } else {
                    if (currentTime - startTime >= 60000) {
                        endGame(true);
                    }
                }
            }
        });

// 衝突判定
        function isCollided(a, b) {
            var aRect = a.getBoundingClientRect();
            var bRect = b.getBoundingClientRect();
            return !(aRect.top > bRect.bottom ||
                     aRect.left > bRect.right ||
                     aRect.bottom < bRect.top ||
                     aRect.right < bRect.left);
        }

// ゲーム終了
        function endGame(isCleared) {
            if (isCleared) {
                cleared = true;
                var message = document.createElement("div");
                message.className = "clear";
                message.textContent = "クリア！";
                document.body.appendChild(message);
            } else {
                gameOver = true;
                var message = document.createElement("div");
                message.className = "game-over";
                message.textContent = "ゲームオーバー";
                document.body.appendChild(message);
            }
        }
    </script>
</body>
</html>