3D FPS with Taiwan Flag

Here's the final version with all fixes and improvements: const world = document.getElementById('world'); const player = document.getElementById('player'); const flag = document.getElementById('flag'); let posX = 0, posY = 1.6, posZ = 0; let rotX = 0, rotY = 0; let velocityY = 0; const gravity = 0.002; const sensitivity = 0.2; const moveSpeed = 0.1; const jumpStrength = 0.25; let isPointerLocked = false; let lastTime = 0; let isOnGround = false; // World boundaries const worldSize = 500; const wallHeight = 100; const groundLevel = 0; const playerHeight = 1.6; // Create walls const walls = [ { x: 0, z: worldSize/2, width: worldSize, height: wallHeight, depth: 10 }, // North { x: 0, z: -worldSize/2, width: worldSize, height: wallHeight, depth: 10 }, // South { x: worldSize/2, z: 0, width: 10, height: wallHeight, depth: worldSize }, // East { x: -worldSize/2, z: 0, width: 10, height: wallHeight, depth: worldSize } // West ]; // Add walls to DOM walls.forEach(wall => { const wallElement = document.createElement('div'); wallElement.className = 'wall'; wallElement.style.width = `${wall.width}px`; wallElement.style.height = `${wall.height}px`; wallElement.style.transform = `translate3d(${wall.x}px, ${wall.height/2}px, ${wall.z}px)`; if (wall.width === 10) { wallElement.style.width = '10px'; wallElement.style.depth = `${wall.depth}px`; } else { wallElement.style.depth = '10px'; } world.appendChild(wallElement); }); // Draw Taiwan flag on the block const flagCanvas = document.createElement('canvas'); flagCanvas.width = 100; flagCanvas.height = 20; const ctx = flagCanvas.getContext('2d'); // Taiwan flag design ctx.fillStyle = '#FE0000'; ctx.fillRect(0, 0, 100, 20); ctx.fillStyle = '#000095'; ctx.fillRect(0, 0, 50, 10); ctx.fillStyle = '#FFFFFF'; ctx.beginPath(); ctx.arc(25, 5, 5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#000095'; ctx.beginPath(); ctx.arc(25, 5, 4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#FFFFFF'; ctx.beginPath(); ctx.arc(25, 5, 3, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#000095'; ctx.beginPath(); ctx.arc(25, 5, 2, 0, Math.PI * 2); ctx.fill(); flag.style.background = `url(${flagCanvas.toDataURL()})`; // Movement controls const keys = {}; document.addEventListener('keydown', (e) => keys[e.key.toLowerCase()] = true); document.addEventListener('keyup', (e) => keys[e.key.toLowerCase()] = false); // Mouse look document.addEventListener('mousemove', (e) => { if (!isPointerLocked) return; rotY += e.movementX * sensitivity; rotX -= e.movementY * sensitivity; rotX = Math.max(-89, Math.min(89, rotX)); }); // Jump when space is pressed document.addEventListener('keydown', (e) => { if (e.code === 'Space' && isOnGround) { velocityY = jumpStrength; isOnGround = false; } }); // Pointer lock handling document.addEventListener('click', () => { document.body.requestPointerLock = document.body.requestPointerLock || document.body.mozRequestPointerLock || document.body.webkitRequestPointerLock; document.body.requestPointerLock(); }); document.addEventListener('pointerlockchange', lockChangeAlert, false); document.addEventListener('mozpointerlockchange', lockChangeAlert, false); document.addEventListener('webkitpointerlockchange', lockChangeAlert, false); function lockChangeAlert() { isPointerLocked = ( document.pointerLockElement === document.body || document.mozPointerLockElement === document.body || document.webkitPointerLockElement === document.body ); } // Collision detection function checkCollision(x, z) { // Check world boundaries if (x < -worldSize/2 || x > worldSize/2 || z < -worldSize/2 || z > worldSize/2) { return true; } return false; } // Game loop function update(time) { const deltaTime = time - lastTime; lastTime = time; // Apply gravity velocityY -= gravity * deltaTime; posY += velocityY * deltaTime; // Ground collision if (posY < groundLevel + playerHeight) { posY = groundLevel + playerHeight; velocityY = 0; isOnGround = true; } else { isOnGround = false; } // Movement - using deltaTime for frame-rate independent movement const moveAmount = moveSpeed * deltaTime; const forwardX = Math.sin(rotY * Math.PI / 180); const forwardZ = Math.cos(rotY * Math.PI / 180); let newX = posX; let newZ = posZ; if (keys['w']) { newX -= forwardX * moveAmount; newZ -= forwardZ * moveAmount; } if (keys['s']) { newX += forwardX * moveAmount; newZ += forwardZ * moveAmount; } if (keys['a']) { newX -= forwardZ * moveAmount; newZ += forwardX * moveAmount; } if (keys['d']) { newX += forwardZ * moveAmount; newZ -= forwardX * moveAmount; } // Check collision before updating position if (!checkCollision(newX, newZ)) { posX = newX; posZ = newZ; } // Apply transforms world.style.transform = ` rotateX(${rotX}deg) rotateY(${rotY}deg) translate3d(${-posX}px, ${-(posY - playerHeight)}px, ${-posZ}px) `; requestAnimationFrame(update); } // Start game loop requestAnimationFrame(update); // Prevent arrow keys from scrolling page window.addEventListener('keydown', (e) => { if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].indexOf(e.code) > -1) { e.preventDefault(); } }); 3D FPS with Taiwan Flag

Key improvements: 1. Fixed movement controls (W=forward, S=backward) 2. Added proper walls with collision detection 3. Increased jump strength (jumpStrength = 0.25) 4. Added world boundaries 5. Proper first-person perspective 6. Smooth mouse look 7. Frame-rate independent movement 8. Added crosshair for better aiming Controls: - Click to lock pointer - W: Move forward - S: Move backward - A: Strafe left - D: Strafe right - Space: Jump - Mouse: Look around