Rivals

21 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Rivals Prototype</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: sans-serif;
        }
        #crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        #instructions {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background: rgba(0,0,0,0.7);
            padding: 20px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
        }
        #score {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            background: rgba(0,0,0,0.5);
            padding: 10px;
        }
    </style>
    
    <script src="https://cloudflare.com"></script>
</head>
<body>

<div id="crosshair"></div>
    <div id="score">Targets Hit: 0</div>
    <div id="instructions">
        <h2>WEB RIVALS</h2>
        <p>Click to Play</p>
        <p>Move: WASD | Aim: Mouse | Shoot: Left Click</p>
    </div>

const instructions = document.getElementById('instructions');
        const scoreElement = document.getElementById('score');

// Pointer lock to trap the mouse cursor for FPS controls
        instructions.addEventListener('click', () => {
            document.body.requestPointerLock();
        });

// Track mouse movement to rotate camera
        document.addEventListener('mousemove', (event) => {
            if (document.pointerLockElement !== document.body) return;
            camera.rotation.y -= event.movementX * 0.002;
            camera.rotation.x -= event.movementY * 0.002;
            camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x));
        });

// Initialize 3D World
        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x111116);
            scene.fog = new THREE.FogExp2(0x111116, 0.015);

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.rotation.order = 'YXZ'; // Important for FPS lookups
            camera.position.y = 2;

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

// Lighting
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
            scene.add(ambientLight);
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(10, 20, 10);
            scene.add(directionalLight);

// Floor Grid (Arena)
            const floorGeo = new THREE.PlaneGeometry(100, 100);
            const floorMat = new THREE.MeshStandardMaterial({ color: 0x222225, roughness: 0.8 });
            const floor = new THREE.Mesh(floorGeo, floorMat);
            floor.rotation.x = -Math.PI / 2;
            scene.add(floor);

const grid = new THREE.GridHelper(100, 50, 0x44444f, 0x222225);
            grid.position.y = 0.01;
            scene.add(grid);

// Spawn Red Targets (Like the dummy players in Rivals)
            for (let i = 0; i < 10; i++) {
                spawnTarget();
            }

// Input Listeners
            window.addEventListener('keydown', (e) => handleKeys(e.code, true));
            window.addEventListener('keyup', (e) => handleKeys(e.code, false));
            window.addEventListener('mousedown', shoot);
            window.addEventListener('resize', onWindowResize);

animate();
        }

function spawnTarget() {
            const geo = new THREE.BoxGeometry(2, 4, 2);
            const mat = new THREE.MeshStandardMaterial({ color: 0xff3333 });
            const target = new THREE.Mesh(geo, mat);
            target.position.set((Math.random() - 0.5) * 60, 2, (Math.random() - 0.5) * 60);
            scene.add(target);
            targets.push(target);
        }

function handleKeys(code, isPressed) {
            if (code === 'KeyW' || code === 'ArrowUp') moveForward = isPressed;
            if (code === 'KeyS' || code === 'ArrowDown') moveBackward = isPressed;
            if (code === 'KeyA' || code === 'ArrowLeft') moveLeft = isPressed;
            if (code === 'KeyD' || code === 'ArrowRight') moveRight = isPressed;
        }

// Shooting Mechanic (Raycasting)
        function shoot(event) {
            if (document.pointerLockElement !== document.body || event.button !== 0) return;

const raycaster = new THREE.Raycaster();
            // Center of screen
            const center = new THREE.Vector2(0, 0); 
            raycaster.setFromCamera(center, camera);

const intersects = raycaster.intersectObjects(targets);

if (intersects.length > 0) {
                const hitTarget = intersects[0].object;
                
                // Remove hit target and spawn a new one
                scene.remove(hitTarget);
                targets = targets.filter(t => t !== hitTarget);
                spawnTarget();

score++;
                scoreElement.innerText = "Targets Hit: " + score;
            }
        }

function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

// Game Loop
        function animate() {
            requestAnimationFrame(animate);

const time = performance.now();
            const delta = (time - prevTime) / 1000;

if (document.pointerLockElement === document.body) {
                // Apply friction/damping
                velocity.x -= velocity.x * 10.0 * delta;
                velocity.z -= velocity.z * 10.0 * delta;

direction.z = Number(moveForward) - Number(moveBackward);
                direction.x = Number(moveRight) - Number(moveLeft);
                direction.normalize();

// Calculate camera-facing movement vector
                const camDirection = new THREE.Vector3();
                camera.getWorldDirection(camDirection);
                camDirection.y = 0;
                camDirection.normalize();

const camSideways = new THREE.Vector3(-camDirection.z, 0, camDirection.x);

if (moveForward || moveBackward) {
                    velocity.z += direction.z * 400.0 * delta;
                }
                if (moveLeft || moveRight) {
                    velocity.x += direction.x * 400.0 * delta;
                }

// Translate movement relative to player view
                camera.position.addScaledVector(camDirection, velocity.z * delta * 0.05);
                camera.position.addScaledVector(camSideways, velocity.x * delta * 0.05);
            }

prevTime = time;
            renderer.render(scene, camera);
        }

window.onload = init;
    </script>
</body>
</html>

CSS

Comments 0

…