<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First-Person Shooter Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
        #instructions {
            position: absolute;
            top: 50%;
            width: 100%;
            text-align: center;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 24px;
            user-select: none;
            cursor: pointer;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>

<div id="instructions">
    Click to Play<br>
    W/A/S/D to Move | Mouse to Look | Click to Shoot
</div>

<script type="module">
    // Import Three.js and PointerLockControls as ES6 modules using absolute URLs
    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.module.js';
    import { PointerLockControls } from 'https://cdn.jsdelivr.net/npm/three@0.152.0/examples/jsm/controls/PointerLockControls.js';

    // Setup Scene, Camera, and Renderer
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x222222);

    const camera = new THREE.PerspectiveCamera(
        75, 
        window.innerWidth / window.innerHeight, 
        0.1, 
        1000
    );

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Add Lighting
    const light = new THREE.HemisphereLight(0xffffff, 0x444444);
    light.position.set(0, 200, 0);
    scene.add(light);

    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(0, 200, 100);
    directionalLight.castShadow = true;
    scene.add(directionalLight);

    // Create Ground
    const groundGeometry = new THREE.PlaneGeometry(1000, 1000);
    const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false });
    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.rotation.x = - Math.PI / 2;
    ground.receiveShadow = true;
    scene.add(ground);

    // Add Some Cubes as Targets
    const boxGeometry = new THREE.BoxGeometry(20, 20, 20);
    const boxMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
    const targets = [];
    for (let i = 0; i < 20; i++) {
        const box = new THREE.Mesh(boxGeometry, boxMaterial);
        box.position.set(
            Math.random() * 800 - 400,
            10,
            Math.random() * 800 - 400
        );
        scene.add(box);
        targets.push(box);
    }

    // Pointer Lock Controls
    const controls = new PointerLockControls(camera, document.body);

    const instructions = document.getElementById('instructions');
    instructions.addEventListener('click', () => {
        controls.lock();
    }, false);

    controls.addEventListener('lock', () => {
        instructions.style.display = 'none';
    });

    controls.addEventListener('unlock', () => {
        instructions.style.display = '';
    });

    scene.add(controls.getObject());

    // Movement Variables
    const move = {
        forward: false,
        backward: false,
        left: false,
        right: false
    };

    const velocity = new THREE.Vector3();
    const direction = new THREE.Vector3();

    const speed = 400.0; // Units per second

    // Event Listeners for Key Presses
    const onKeyDown = function (event) {
        switch (event.code) {
            case 'KeyW':
            case 'ArrowUp':
                move.forward = true;
                break;
            case 'KeyA':
            case 'ArrowLeft':
                move.left = true;
                break;
            case 'KeyS':
            case 'ArrowDown':
                move.backward = true;
                break;
            case 'KeyD':
            case 'ArrowRight':
                move.right = true;
                break;
        }
    };

    const onKeyUp = function (event) {
        switch (event.code) {
            case 'KeyW':
            case 'ArrowUp':
                move.forward = false;
                break;
            case 'KeyA':
            case 'ArrowLeft':
                move.left = false;
                break;
            case 'KeyS':
            case 'ArrowDown':
                move.backward = false;
                break;
            case 'KeyD':
            case 'ArrowRight':
                move.right = false;
                break;
        }
    };

    window.addEventListener('keydown', onKeyDown, false);
    window.addEventListener('keyup', onKeyUp, false);

    // Bullet Array
    const bullets = [];
    const bulletSpeed = 1000; // Units per second
    const bulletGeometry = new THREE.SphereGeometry(0.5, 8, 8);
    const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

    // Shooting Mechanism
    const shoot = () => {
        const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
        bullet.position.copy(camera.position);

        // Calculate direction
        const vector = new THREE.Vector3(0, 0, -1);
        vector.applyQuaternion(camera.quaternion);
        bullet.velocity = vector.clone().multiplyScalar(bulletSpeed * deltaTime);

        scene.add(bullet);
        bullets.push(bullet);
    };

    let deltaTime = 0; // Time between frames

    window.addEventListener('mousedown', (event) => {
        if (event.button === 0 && controls.isLocked === true) { // Left mouse button
            shoot();
        }
    }, false);

    // Handle Window Resize
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
    }, false);

    // Animation Loop
    const clock = new THREE.Clock();

    function animate() {
        requestAnimationFrame(animate);

        deltaTime = clock.getDelta();

        // Update Velocity Based on Movement
        velocity.x -= velocity.x * 10.0 * deltaTime;
        velocity.z -= velocity.z * 10.0 * deltaTime;

        direction.z = Number(move.forward) - Number(move.backward);
        direction.x = Number(move.right) - Number(move.left);
        direction.normalize(); // this ensures consistent movements in all directions

        if (move.forward || move.backward) velocity.z -= direction.z * speed * deltaTime;
        if (move.left || move.right) velocity.x -= direction.x * speed * deltaTime;

        controls.moveRight(- velocity.x * deltaTime);
        controls.moveForward(- velocity.z * deltaTime);

        // Update Bullets
        for (let i = 0; i < bullets.length; i++) {
            const bullet = bullets[i];
            bullet.position.add(bullet.velocity);

            // Collision Detection with Targets
            for (let j = 0; j < targets.length; j++) {
                const target = targets[j];
                const distance = bullet.position.distanceTo(target.position);
                if (distance < 10) { // Assuming target radius ~10
                    // Remove target and bullet
                    scene.remove(target);
                    targets.splice(j, 1);

                    scene.remove(bullet);
                    bullets.splice(i, 1);
                    i--;
                    break;
                }
            }

            // Remove bullets that are too far away
            const distanceFromCamera = bullet.position.distanceTo(camera.position);
            if (distanceFromCamera > 1000) {
                scene.remove(bullet);
                bullets.splice(i, 1);
                i--;
            }
        }

        renderer.render(scene, camera);
    }

    animate();
</script>
</body>
</html> Uncaught TypeError TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
    at (program) (file:///C:/Users/123/Desktop/2.html:1:1)
arg0 =
TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". {stack: 'TypeError: Failed to resolve module specifier…s must start with either "/", "./", or "../".', message: 'Failed to resolve module specifier "three". … must start with either "/", "./", or "../".'}
message =
'Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".'
stack =
'TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".'
[[Prototype]] =
Error
constructor =
ƒ TypeError()
message =
''
name =
'TypeError'
[[Prototype]] =
Object
constructor =
ƒ Error()