Mini FPS 3D

by MagicDolphin95

170 lines3.2 KB🛠️ Three.js (3D graphics)

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mini FPS 3D</title>

<style>
body{
    margin:0;
    overflow:hidden;
    background:black;
    font-family:Arial;
}

#crosshair{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:white;
    font-size:30px;
}

#ui{
    position:absolute;
    top:10px;
    left:10px;
    color:white;
    background:rgba(0,0,0,0.5);
    padding:10px;
    border-radius:10px;
}
</style>
</head>

<body>

<div id="crosshair">+</div>

<div id="ui">
WASD = mover<br>
Mouse = mirar<br>
Click = bloquear mouse
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/PointerLockControls.js"></script>

<script>

let scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);

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

let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

let light = new THREE.HemisphereLight(0xffffff,0x444444,1.5);
scene.add(light);

let floorGeo = new THREE.PlaneGeometry(200,200);
let floorMat = new THREE.MeshLambertMaterial({
    color:0x228822
});

let floor = new THREE.Mesh(floorGeo,floorMat);
floor.rotation.x = -Math.PI/2;
scene.add(floor);

for(let i=0;i<30;i++){

    let boxGeo = new THREE.BoxGeometry(5,5,5);

    let boxMat = new THREE.MeshLambertMaterial({
        color:0x888888
    });

    let box = new THREE.Mesh(boxGeo,boxMat);

    box.position.x = Math.random()*100-50;
    box.position.y = 2.5;
    box.position.z = Math.random()*100-50;

    scene.add(box);
}

let enemyGeo = new THREE.BoxGeometry(2,2,2);
let enemyMat = new THREE.MeshLambertMaterial({
    color:0xff0000
});

let enemy = new THREE.Mesh(enemyGeo,enemyMat);

enemy.position.set(0,1,-20);

scene.add(enemy);

camera.position.y = 2;

let controls = new THREE.PointerLockControls(camera,document.body);

document.body.addEventListener("click",()=>{
    controls.lock();
});

scene.add(controls.getObject());

let moveForward=false;
let moveBackward=false;
let moveLeft=false;
let moveRight=false;

document.addEventListener("keydown",(e)=>{

    if(e.code==="KeyW") moveForward=true;
    if(e.code==="KeyS") moveBackward=true;
    if(e.code==="KeyA") moveLeft=true;
    if(e.code==="KeyD") moveRight=true;

});

document.addEventListener("keyup",(e)=>{

    if(e.code==="KeyW") moveForward=false;
    if(e.code==="KeyS") moveBackward=false;
    if(e.code==="KeyA") moveLeft=false;
    if(e.code==="KeyD") moveRight=false;

});

function animate(){

    requestAnimationFrame(animate);

    let speed=0.15;

    if(moveForward) controls.moveForward(speed);
    if(moveBackward) controls.moveForward(-speed);

    if(moveLeft) controls.moveRight(-speed);
    if(moveRight) controls.moveRight(speed);

    enemy.rotation.y += 0.02;

    renderer.render(scene,camera);
}

animate();

window.addEventListener("resize",()=>{

    camera.aspect=window.innerWidth/window.innerHeight;

    camera.updateProjectionMatrix();

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

});

</script>

</body>
</html>

Game Source: Mini FPS 3D

Creator: MagicDolphin95

Libraries: three

Complexity: moderate (170 lines, 3.2 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: mini-fps-3d-magicdolphin95" to link back to the original. Then publish at arcadelab.ai/publish.