// CLIENT-SIDE CODE import * as THREE from 'three'; import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls'; function initGameClient(container, socket, roomId, emitAction) { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000508); scene.fog = new THREE.Fog(0x000508, 0, 300); const camera = new THREE.PerspectiveCamera(90, container.clientWidth / container.clientHeight, 0.1, 500); camera.position.set(0, 0, -80); const renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); container.appendChild(renderer.domElement); const controls = new PointerLockControls(camera, renderer.domElement); // UI Overlay const uiDiv = document.createElement('div'); uiDiv.style.position = 'absolute'; uiDiv.style.top = '0'; uiDiv.style.left = '0'; uiDiv.style.width = '100%'; uiDiv.style.height = '100%'; uiDiv.style.pointerEvents = 'none'; uiDiv.style.color = 'white'; uiDiv.style.fontFamily = 'monospace'; uiDiv.style.fontSize = '16px'; container.appendChild(uiDiv); const crosshair = document.createElement('div'); crosshair.style.position = 'absolute'; crosshair.style.top = '50%'; crosshair.style.left = '50%'; crosshair.style.width = '20px'; crosshair.style.height = '20px'; crosshair.style.transform = 'translate(-50%, -50%)'; crosshair.style.border = '2px solid #00ff00'; crosshair.style.borderRadius = '50%'; crosshair.innerHTML = '

'; uiDiv.appendChild(crosshair); const statusDiv = document.createElement('div'); statusDiv.style.position = 'absolute'; statusDiv.style.top = '20px'; statusDiv.style.left = '20px'; statusDiv.style.padding = '15px'; statusDiv.style.background = 'rgba(0,20,40,0.8)'; statusDiv.style.border = '2px solid #00ff88'; statusDiv.style.borderRadius = '5px'; uiDiv.appendChild(statusDiv); const instructionDiv = document.createElement('div'); instructionDiv.style.position = 'absolute'; instructionDiv.style.top = '50%'; instructionDiv.style.left = '50%'; instructionDiv.style.transform = 'translate(-50%, -50%)'; instructionDiv.style.textAlign = 'center'; instructionDiv.style.padding = '30px'; instructionDiv.style.background = 'rgba(0,20,40,0.95)'; instructionDiv.style.border = '3px solid #00ff88'; instructionDiv.style.borderRadius = '10px'; instructionDiv.innerHTML = `

⚔️ BATTLE ROOM ⚔️

WASD/Arrows - Thrust Forward/Back/Left/Right

Space - Thrust Up | Shift - Thrust Down

Mouse - Look Around

Click - Fire Laser

Touch the enemy gate to score!

Get hit and you freeze for 3 seconds!

Click to start

`; uiDiv.appendChild(instructionDiv); container.addEventListener('click', () => { if (!controls.isLocked) { controls.lock(); instructionDiv.style.display = 'none'; } }); controls.addEventListener('unlock', () => { instructionDiv.style.display = 'block'; }); // Ambient lighting const ambientLight = new THREE.AmbientLight(0x4488ff, 0.3); scene.add(ambientLight); // Directional light const dirLight = new THREE.DirectionalLight(0xffffff, 0.5); dirLight.position.set(50, 100, 50); scene.add(dirLight); // Create battle room boundaries (invisible walls) const roomSize = { x: 150, y: 100, z: 200 }; // Create gates at each end const gateGeometry = new THREE.TorusGeometry(8, 1, 16, 32); const gate1Material = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.6, side: THREE.DoubleSide }); const gate1 = new THREE.Mesh(gateGeometry, gate1Material); gate1.position.set(0, 0, -roomSize.z / 2 + 10); gate1.rotation.y = Math.PI / 2; gate1.userData.team = 'red'; scene.add(gate1); const gate2Material = new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 0.6, side: THREE.DoubleSide }); const gate2 = new THREE.Mesh(gateGeometry, gate2Material); gate2.position.set(0, 0, roomSize.z / 2 - 10); gate2.rotation.y = Math.PI / 2; gate2.userData.team = 'blue'; scene.add(gate2); // Add glowing effects to gates const gate1Glow = new THREE.PointLight(0xff0000, 2, 30); gate1Glow.position.copy(gate1.position); scene.add(gate1Glow); const gate2Glow = new THREE.PointLight(0x0000ff, 2, 30); gate2Glow.position.copy(gate2.position); scene.add(gate2Glow); // Create floating stars/asteroids as cover const stars = []; const starConfigs = [ // Large central star { pos: [0, 0, 0], size: 8, spikes: 12 }, // Mid-field clusters { pos: [-30, 15, -20], size: 5, spikes: 8 }, { pos: [30, -15, -20], size: 5, spikes: 8 }, { pos: [-30, -15, 20], size: 5, spikes: 8 }, { pos: [30, 15, 20], size: 5, spikes: 8 }, // Near gates { pos: [-20, 10, -60], size: 4, spikes: 6 }, { pos: [20, -10, -60], size: 4, spikes: 6 }, { pos: [-20, -10, 60], size: 4, spikes: 6 }, { pos: [20, 10, 60], size: 4, spikes: 6 }, // Random scattered { pos: [-40, 20, 0], size: 3, spikes: 6 }, { pos: [40, -20, 0], size: 3, spikes: 6 }, { pos: [0, 30, -40], size: 3, spikes: 6 }, { pos: [0, -30, 40], size: 3, spikes: 6 }, { pos: [-25, 0, -80], size: 3, spikes: 6 }, { pos: [25, 0, 80], size: 3, spikes: 6 }, ]; starConfigs.forEach(config => { const group = new THREE.Group(); // Core sphere const core = new THREE.Mesh( new THREE.SphereGeometry(config.size * 0.6, 16, 16), new THREE.MeshLambertMaterial({ color: 0x666666 }) ); group.add(core); // Spikes for (let i = 0; i < config.spikes; i++) { const spike = new THREE.Mesh( new THREE.ConeGeometry(config.size * 0.2, config.size * 1.2, 6), new THREE.MeshLambertMaterial({ color: 0x444444 }) ); const phi = Math.acos(-1 + (2 * i) / config.spikes); const theta = Math.sqrt(config.spikes * Math.PI) * phi; spike.position.x = Math.cos(theta) * Math.sin(phi) * config.size * 0.6; spike.position.y = Math.sin(theta) * Math.sin(phi) * config.size * 0.6; spike.position.z = Math.cos(phi) * config.size * 0.6; spike.lookAt(0, 0, 0); spike.rotateX(Math.PI / 2); group.add(spike); } group.position.set(...config.pos); group.userData.rotationSpeed = (Math.random() - 0.5) * 0.01; scene.add(group); stars.push(group); }); // Player meshes const playerMeshes = {}; function createPlayerMesh(team) { const group = new THREE.Group(); // Body const body = new THREE.Mesh( new THREE.CapsuleGeometry(0.5, 1.5, 8, 16), new THREE.MeshLambertMaterial({ color: team === 'red' ? 0xff3333 : 0x3333ff }) ); group.add(body); // Helmet visor const visor = new THREE.Mesh( new THREE.SphereGeometry(0.4, 16, 16, 0, Math.PI * 2, 0, Math.PI / 2), new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.5 }) ); visor.position.y = 1; group.add(visor); // Jetpack const jetpack = new THREE.Mesh( new THREE.BoxGeometry(0.8, 0.6, 0.3), new THREE.MeshLambertMaterial({ color: 0x222222 }) ); jetpack.position.set(0, 0, -0.4); group.add(jetpack); return group; } // Laser beams const laserBeams = []; function createLaserBeam(start, end, color) { const geometry = new THREE.BufferGeometry().setFromPoints([start, end]); const material = new THREE.LineBasicMaterial({ color, linewidth: 3 }); const line = new THREE.Line(geometry, material); line.userData.createdAt = Date.now(); scene.add(line); laserBeams.push(line); } // Particle effects const particles = []; function createHitEffect(position, color) { for (let i = 0; i < 20; i++) { const particle = new THREE.Mesh( new THREE.SphereGeometry(0.1, 4, 4), new THREE.MeshBasicMaterial({ color }) ); particle.position.copy(position); particle.userData.velocity = new THREE.Vector3( (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2 ); particle.userData.life = 1.0; scene.add(particle); particles.push(particle); } } // Movement state const velocity = new THREE.Vector3(); const acceleration = new THREE.Vector3(); const moveState = { forward: false, backward: false, left: false, right: false, up: false, down: false }; let isFrozen = false; let frozenUntil = 0; document.addEventListener('keydown', (e) => { if (e.code === 'KeyW' || e.code === 'ArrowUp') moveState.forward = true; if (e.code === 'KeyS' || e.code === 'ArrowDown') moveState.backward = true; if (e.code === 'KeyA' || e.code === 'ArrowLeft') moveState.left = true; if (e.code === 'KeyD' || e.code === 'ArrowRight') moveState.right = true; if (e.code === 'Space') moveState.up = true; if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') moveState.down = true; }); document.addEventListener('keyup', (e) => { if (e.code === 'KeyW' || e.code === 'ArrowUp') moveState.forward = false; if (e.code === 'KeyS' || e.code === 'ArrowDown') moveState.backward = false; if (e.code === 'KeyA' || e.code === 'ArrowLeft') moveState.left = false; if (e.code === 'KeyD' || e.code === 'ArrowRight') moveState.right = false; if (e.code === 'Space') moveState.up = false; if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') moveState.down = false; }); let lastShootTime = 0; const shootCooldown = 200; container.addEventListener('click', () => { if (controls.isLocked && !isFrozen && Date.now() - lastShootTime > shootCooldown) { lastShootTime = Date.now(); const direction = new THREE.Vector3(); camera.getWorldDirection(direction); emitAction('shoot', { position: camera.position.toArray(), direction: direction.toArray() }); // Visual feedback const start = camera.position.clone(); const end = start.clone().add(direction.multiplyScalar(200)); createLaserBeam(start, end, 0x00ff00); } }); // Handle window resize window.addEventListener('resize', () => { camera.aspect = container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); }); // Animation loop let animationId; function animate() { animationId = requestAnimationFrame(animate); const now = Date.now(); // Check if frozen if (isFrozen && now > frozenUntil) { isFrozen = false; } if (!isFrozen && controls.isLocked) { // Zero-gravity movement with acceleration const thrustPower = 0.3; const dampening = 0.98; const maxSpeed = 1.5; acceleration.set(0, 0, 0); // Get camera directions const forward = new THREE.Vector3(); const right = new THREE.Vector3(); camera.getWorldDirection(forward); right.crossVectors(forward, camera.up).normalize(); if (moveState.forward) acceleration.add(forward.multiplyScalar(thrustPower)); if (moveState.backward) acceleration.add(forward.multiplyScalar(-thrustPower)); if (moveState.left) acceleration.add(right.multiplyScalar(-thrustPower)); if (moveState.right) acceleration.add(right.multiplyScalar(thrustPower)); if (moveState.up) acceleration.y += thrustPower; if (moveState.down) acceleration.y -= thrustPower; velocity.add(acceleration); velocity.multiplyScalar(dampening); // Clamp velocity if (velocity.length() > maxSpeed) { velocity.normalize().multiplyScalar(maxSpeed); } camera.position.add(velocity); // Boundary constraints camera.position.x = Math.max(-roomSize.x / 2, Math.min(roomSize.x / 2, camera.position.x)); camera.position.y = Math.max(-roomSize.y / 2, Math.min(roomSize.y / 2, camera.position.y)); camera.position.z = Math.max(-roomSize.z / 2, Math.min(roomSize.z / 2, camera.position.z)); // Send position update emitAction('move', { position: camera.position.toArray(), rotation: [camera.rotation.x, camera.rotation.y, camera.rotation.z] }); } // Animate stars stars.forEach(star => { star.rotation.x += star.userData.rotationSpeed; star.rotation.y += star.userData.rotationSpeed * 0.5; }); // Animate gates gate1.rotation.z += 0.01; gate2.rotation.z += 0.01; // Update laser beams for (let i = laserBeams.length - 1; i >= 0; i--) { if (now - laserBeams[i].userData.createdAt > 100) { scene.remove(laserBeams[i]); laserBeams.splice(i, 1); } } // Update particles for (let i = particles.length - 1; i >= 0; i--) { const p = particles[i]; p.position.add(p.userData.velocity); p.userData.velocity.multiplyScalar(0.95); p.userData.life -= 0.02; p.material.opacity = p.userData.life; if (p.userData.life <= 0) { scene.remove(p); particles.splice(i, 1); } } renderer.render(scene, camera); } animate(); return { onStateUpdate: (state) => { // Update frozen status const myPlayer = state.players[socket.id]; if (myPlayer) { if (myPlayer.frozen && !isFrozen) { isFrozen = true; frozenUntil = Date.now() + 3000; crosshair.style.borderColor = '#ff0000'; } else if (!myPlayer.frozen && isFrozen && Date.now() > frozenUntil) { isFrozen = false; crosshair.style.borderColor = '#00ff00'; } } // Update status display let statusHTML = '

⚔️ BATTLE ROOM ⚔️

'; statusHTML += '

'; // Show scores const redScore = state.scores?.red || 0; const blueScore = state.scores?.blue || 0; statusHTML += `

RED: ${redScore} | BLUE: ${blueScore}

`; // Show player status if (myPlayer) { statusHTML += `

Energy: ${myPlayer.energy || 100}

`; if (myPlayer.frozen) { const timeLeft = Math.max(0, Math.ceil((frozenUntil - Date.now()) / 1000)); statusHTML += `

FROZEN: ${timeLeft}s

`; } } statusHTML += '

'; statusDiv.innerHTML = statusHTML; // Update other players Object.keys(state.players).forEach(id => { if (id === socket.id) return; const player = state.players[id]; if (!playerMeshes[id]) { playerMeshes[id] = createPlayerMesh(player.team); scene.add(playerMeshes[id]); } const mesh = playerMeshes[id]; mesh.position.set(...player.position); mesh.rotation.y = player.rotation[1]; // Show frozen effect if (player.frozen) { mesh.children[0].material.emissive = new THREE.Color(0x00aaff); mesh.children[0].material.emissiveIntensity = 0.5; } else { mesh.children[0].material.emissive = new THREE.Color(0x000000); mesh.children[0].material.emissiveIntensity = 0; } }); // Remove disconnected players Object.keys(playerMeshes).forEach(id => { if (!state.players[id]) { scene.remove(playerMeshes[id]); delete playerMeshes[id]; } }); // Show laser hits if (state.lastHit && state.lastHit.time > Date.now() - 500) { const hitPos = new THREE.Vector3(...state.lastHit.position); createHitEffect(hitPos, state.lastHit.hit ? 0xff0000 : 0x888888); } } }; } // SERVER-SIDE CODE const serverLogic = { initialState: { players: {}, scores: { red: 0, blue: 0 }, lastHit: null, gameEnded: false, gameWinner: null, gameEndReason: '' }, moves: { playerJoined(state, payload, playerId) { const playerCount = Object.keys(state.players).length; const team = playerCount % 2 === 0 ? 'red' : 'blue'; const spawnZ = team === 'red' ? -80 : 80; state.players[playerId] = { position: [0, 0, spawnZ], rotation: [0, team === 'red' ? 0 : Math.PI, 0], team: team, energy: 100, frozen: false, frozenUntil: 0 }; }, move(state, payload, playerId) { if (!state.players[playerId] || state.gameEnded) return; const player = state.players[playerId]; // Can't move when frozen if (player.frozen && Date.now() < player.frozenUntil) { return; } else if (player.frozen) { player.frozen = false; } player.position = payload.position; player.rotation = payload.rotation; // Check gate collision for scoring const pos = player.position; // Red gate at z = -90, Blue gate at z = 90 const redGateDist = Math.sqrt(pos[0] * pos[0] + pos[1] * pos[1] + (pos[2] + 90) * (pos[2] + 90)); const blueGateDist = Math.sqrt(pos[0] * pos[0] + pos[1] * pos[1] + (pos[2] - 90) * (pos[2] - 90)); // Score if touching enemy gate if (player.team === 'blue' && redGateDist < 10 && !player.frozen) { state.scores.blue++; player.position = [0, 0, 80]; // Respawn if (state.scores.blue >= 5) { state.gameEnded = true; state.gameWinner = playerId; state.gameEndReason = 'Blue team captured the red gate 5 times!'; } } else if (player.team === 'red' && blueGateDist < 10 && !player.frozen) { state.scores.red++; player.position = [0, 0, -80]; // Respawn if (state.scores.red >= 5) { state.gameEnded = true; state.gameWinner = playerId; state.gameEndReason = 'Red team captured the blue gate 5 times!'; } } }, shoot(state, payload, playerId) { if (!state.players[playerId] || state.gameEnded) return; const shooter = state.players[playerId]; if (shooter.frozen) return; const start = payload.position; const dir = payload.direction; // Raycasting to find hit let closestHit = null; let closestDist = Infinity; Object.keys(state.players).forEach(targetId => { if (targetId === playerId) return; const target = state.players[targetId]; const targetPos = target.position; // Simple sphere collision (radius 1.5) const toTarget = [ targetPos[0] - start[0], targetPos[1] - start[1], targetPos[2] - start[2] ]; const dot = toTarget[0] * dir[0] + toTarget[1] * dir[1] + toTarget[2] * dir[2]; if (dot < 0) return; // Behind shooter const closestPoint = [ start[0] + dir[0] * dot, start[1] + dir[1] * dot, start[2] + dir[2] * dot ]; const dist = Math.sqrt( Math.pow(closestPoint[0] - targetPos[0], 2) + Math.pow(closestPoint[1] - targetPos[1], 2) + Math.pow(closestPoint[2] - targetPos[2], 2) ); if (dist < 1.5 && dot < closestDist) { closestHit = targetId; closestDist = dot; } }); if (closestHit) { const target = state.players[closestHit]; target.frozen = true; target.frozenUntil = Date.now() + 3000; target.energy = Math.max(0, target.energy - 20); state.lastHit = { position: target.position, hit: true, time: Date.now() }; } else { state.lastHit = { position: [start[0] + dir[0] * 50, start[1] + dir[1] * 50, start[2] + dir[2] * 50], hit: false, time: Date.now() }; } }, tick(state) { if (state.gameEnded) return; // Unfreeze players whose time is up Object.keys(state.players).forEach(id => { const player = state.players[id]; if (player.frozen && Date.now() > player.frozenUntil) { player.frozen = false; } }); } } };

Best matching community games

bender's game