<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simple 3D FPS Game with Babylon.js - Updated Version</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: black;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
        /* Crosshair */
        #crosshair {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 32px;
            height: 32px;
            margin-left: -16px;
            margin-top: -16px;
            background: url('https://i.imgur.com/OQZgBIv.png') no-repeat center center;
            pointer-events: none;
        }
        /* Leaderboard */
        #leaderboard {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background-color: rgba(0,0,0,0.8);
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
        }
        #leaderboard h2 {
            margin-top: 0;
            text-align: center;
        }
        #leaderboard table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }
        #leaderboard th, #leaderboard td {
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }
        #leaderboard tr:hover {
            background-color: rgba(255,255,255,0.1);
        }
    </style>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <div id="crosshair"></div>
    <!-- Leaderboard -->
    <div id="leaderboard">
        <h2>Leaderboard</h2>
        <table>
            <tr><th>Player</th><th>Score</th></tr>
            <tr><td>Player1</td><td>100</td></tr>
            <tr><td>Player2</td><td>80</td></tr>
            <tr><td>Player3</td><td>60</td></tr>
            <!-- Add more players as needed -->
        </table>
    </div>
    <script>
        // Get the canvas element
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        // Create the scene
        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
            scene.gravity = new BABYLON.Vector3(0, -0.5, 0);
            scene.collisionsEnabled = true;

            // Camera (FPS style)
            var camera = new BABYLON.UniversalCamera("FPS_Camera", new BABYLON.Vector3(0, 2, 0), scene);
            camera.attachControl(canvas, true);
            camera.applyGravity = true;
            camera.checkCollisions = true;
            camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
            camera.speed = 0.5; // Adjusted speed

            // Adjust WASD keys
            camera.keysUp = [87];    // W
            camera.keysDown = [83];  // S
            camera.keysLeft = [65];  // A
            camera.keysRight = [68]; // D

            // Enable mouse lock (click to lock pointer)
            canvas.addEventListener("click", function () {
                canvas.requestPointerLock = canvas.requestPointerLock || canvas.msRequestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
                if (canvas.requestPointerLock) {
                    canvas.requestPointerLock();
                }
            }, false);

            // Light
            var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

            // Ground
            var groundSize = 100;
            var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: groundSize, height: groundSize}, scene);
            ground.checkCollisions = true;
            ground.material = new BABYLON.StandardMaterial("groundMat", scene);
            ground.material.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);

            // Maze generation (simple random walls)
            var walls = [];
            for (var i = -groundSize/2; i < groundSize/2; i += 5) {
                for (var j = -groundSize/2; j < groundSize/2; j += 5) {
                    if (Math.random() > 0.7) {
                        var box = BABYLON.MeshBuilder.CreateBox("wall", {height: 5, width: 5, depth: 5}, scene);
                        box.position = new BABYLON.Vector3(i, 2.5, j);
                        box.checkCollisions = true;
                        box.material = new BABYLON.StandardMaterial("wallMat", scene);
                        box.material.diffuseColor = new BABYLON.Color3(0.6, 0.6, 0.6);
                        walls.push(box);
                    }
                }
            }

            // Gun
            var gun = BABYLON.MeshBuilder.CreateBox("gun", {height: 0.2, width: 0.2, depth: 0.5}, scene); // Smaller gun
            gun.parent = camera;
            gun.position = new BABYLON.Vector3(0.5, -0.5, 1);
            gun.rotation = new BABYLON.Vector3(0, Math.PI, 0); // Adjust orientation
            gun.material = new BABYLON.StandardMaterial("gunMat", scene);
            gun.material.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1);

            // Enemies
            var enemies = [];
            for (var e = 0; e < 10; e++) {
                var enemy = BABYLON.MeshBuilder.CreateSphere("enemy", {diameter: 2}, scene);
                enemy.position = new BABYLON.Vector3(Math.random() * groundSize - groundSize/2, 1, Math.random() * groundSize - groundSize/2);
                enemy.material = new BABYLON.StandardMaterial("enemyMat", scene);
                enemy.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
                enemy.checkCollisions = true;
                enemies.push(enemy);
            }

            // Shooting
            var canShoot = true;
            var bullets = []; // Keep track of bullets

            var shoot = function () {
                if (!canShoot) return;
                canShoot = false;
                setTimeout(function () { canShoot = true; }, 300); // Fire rate

                var origin = camera.position.clone();
                var forward = camera.getForwardRay().direction.clone();
                var bullet = BABYLON.MeshBuilder.CreateSphere("bullet", {diameter: 0.2}, scene);
                bullet.position = origin.add(forward.scale(1)); // Position bullet in front of the camera
                bullet.direction = forward; // Store the forward direction
                bullet.speed = 2; // Bullet speed
                bullet.material = new BABYLON.StandardMaterial("bulletMat", scene);
                bullet.material.emissiveColor = new BABYLON.Color3(1, 1, 0);
                bullets.push(bullet);
            };

            // Input handling
            window.addEventListener("mousedown", function () {
                shoot();
            });

            // Leaderboard display
            window.addEventListener("keydown", function (event) {
                if (event.keyCode === 9) { // TAB key
                    event.preventDefault(); // Prevent default TAB behavior
                    document.getElementById('leaderboard').style.display = 'block';
                }
            });

            window.addEventListener("keyup", function (event) {
                if (event.keyCode === 9) { // TAB key
                    document.getElementById('leaderboard').style.display = 'none';
                }
            });

            // Game loop
            scene.registerBeforeRender(function () {
                // Enemy AI (simple movement towards the player)
                enemies.forEach(function (enemy) {
                    var direction = camera.position.subtract(enemy.position).normalize().scale(0.02);
                    enemy.moveWithCollisions(direction);
                });

                // Move bullets
                bullets = bullets.filter(function (bullet) {
                    bullet.translate(bullet.direction, bullet.speed, BABYLON.Space.WORLD);

                    // Check if bullet is out of bounds
                    if (bullet.position.y < 0 || bullet.position.y > 100 || bullet.position.x < -groundSize/2 || bullet.position.x > groundSize/2 || bullet.position.z < -groundSize/2 || bullet.position.z > groundSize/2) {
                        bullet.dispose();
                        return false;
                    }

                    // Check for collisions with enemies
                    for (var i = 0; i < enemies.length; i++) {
                        var enemy = enemies[i];
                        if (bullet.intersectsMesh(enemy, false)) {
                            // Remove enemy
                            enemy.dispose();
                            enemies.splice(i, 1);
                            // Remove bullet
                            bullet.dispose();
                            return false;
                        }
                    }

                    return true; // Keep the bullet
                });
            });

            return scene;
        };

        var scene = createScene();

        // Render loop
        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

Add direct crosshair (not image), add main menu with working settings (for mouse), menu should be modern and sleek