Jeu style Fortnite (Lite)

Score: 0

Click to lock pointer • WASD to move • Space to jump • Click to shoot

html, body { height: 100%; margin: 0; overflow: hidden; font-family: system-ui, Arial, sans-serif; background: #111; } canvas { display: block; } #hud { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; } #crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.85); font-size: 24px; line-height: 1; pointer-events: none; user-select: none; } #info { position: absolute; left: 12px; top: 12px; color: #fff; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } #instructions { font-size: 12px; opacity: 0.9; margin-top: 6px; } import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { createScene } from './sceneSetup.js'; import Player from './player.js'; import EnemyManager from './enemies.js'; import Projectiles from './projectiles.js'; import UI from './ui.js'; // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Scene & Camera const { scene, ground } = createScene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000); camera.position.set(0, 2, 5); // Controls (pointer lock) const controls = new PointerLockControls(camera, document.body); document.addEventListener('click', () => { if (document.pointerLockElement !== document.body) { controls.lock(); } }); // Systems const ui = new UI(); const projectiles = new Projectiles(scene, ui); const player = new Player(camera, controls, projectiles); const enemies = new EnemyManager(scene, player, ui); // Add ground to player physics reference player.setGround(ground); // Resize handling window.addEventListener('resize', onWindowResize); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // Main loop let lastTime = performance.now(); function animate() { const now = performance.now(); const delta = Math.min(0.05, (now - lastTime) / 1000); lastTime = now; player.update(delta); projectiles.update(delta, enemies); enemies.update(delta); ui.update(); renderer.render(scene, camera); requestAnimationFrame(animate); } // Start the loop animate(); import * as THREE from 'three'; export function createScene() { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); // sky blue // Hemisphere light for ambient feel const hemi = new THREE.HemisphereLight(0xffffff, 0x444444, 0.8); hemi.position.set(0, 200, 0); scene.add(hemi); // Directional sun const sun = new THREE.DirectionalLight(0xffffff, 0.8); sun.position.set(100, 200, 100); sun.castShadow = true; scene.add(sun); // Ground plane const groundGeo = new THREE.PlaneGeometry(2000, 2000); const groundMat = new THREE.MeshStandardMaterial({ color: 0x228b22, roughness: 1 }); const ground = new THREE.Mesh(groundGeo, groundMat); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Simple obstacles (boxes) const boxGeo = new THREE.BoxGeometry(4, 4, 4); const boxMat = new THREE.MeshStandardMaterial({ color: 0x8b4513 }); for (let i = 0; i < 20; i++) { const box = new THREE.Mesh(boxGeo, boxMat); box.position.set((Math.random() - 0.5) * 200, 2, (Math.random() - 0.5) * 200); box.castShadow = true; box.receiveShadow = true; scene.add(box); } return { scene, ground }; } import * as THREE from 'three'; const GRAVITY = 30; const MOVE_SPEED = 12; const JUMP_SPEED = 9; export default class Player { constructor(camera, controls, projectiles) { this.camera = camera; this.controls = controls; this.projectiles = projectiles; this.velocity = new THREE.Vector3(); this.direction = new THREE.Vector3(); this.canJump = false; this.ground = null; this.keys = { forward: false, backward: false, left: false, right: false, jump: false }; this._bindEvents(); this.shootCooldown = 0.15; this.lastShot = 0; } setGround(ground) { this.ground = ground; } _bindEvents() { document.addEventListener('keydown', (e) => this._onKeyDown(e)); document.addEventListener('keyup', (e) => this._onKeyUp(e)); document.addEventListener('mousedown', (e) => this._onMouseDown(e)); } _onKeyDown(e) { switch (e.code) { case 'KeyW': this.keys.forward = true; break; case 'KeyS': this.keys.backward = true; break; case 'KeyA': this.keys.left = true; break; case 'KeyD': this.keys.right = true; break; case 'Space': if (this.canJump) { this.velocity.y = JUMP_SPEED; this.canJump = false; } break; } } _onKeyUp(e) { switch (e.code) { case 'KeyW': this.keys.forward = false; break; case 'KeyS': this.keys.backward = false; break; case 'KeyA': this.keys.left = false; break; case 'KeyD': this.keys.right = false; break; } } _onMouseDown(e) { if (document.pointerLockElement === document.body) { const now = performance.now() / 1000; if (now - this.lastShot >= this.shootCooldown) { const origin = this.camera.position.clone(); const dir = new THREE.Vector3(); this.camera.getWorldDirection(dir); this.projectiles.spawn(origin.add(dir.clone().multiplyScalar(1)), dir); this.lastShot = now; } } } update(delta) { // Movement input this.direction.set(0, 0, 0); if (this.keys.forward) this.direction.z -= 1; if (this.keys.backward) this.direction.z += 1; if (this.keys.left) this.direction.x -= 1; if (this.keys.right) this.direction.x += 1; this.direction.normalize(); // Convert direction to world space based on camera yaw const yaw = new THREE.Quaternion(); yaw.setFromAxisAngle(new THREE.Vector3(0, 1, 0), this._getCameraYaw()); const worldDir = this.direction.clone().applyQuaternion(yaw); // Apply movement this.velocity.x = worldDir.x * MOVE_SPEED; this.velocity.z = worldDir.z * MOVE_SPEED; // Gravity this.velocity.y -= GRAVITY * delta; // Integrate const move = this.velocity.clone().multiplyScalar(delta); this.controls.getObject().position.add(move); // Simple ground collision if (this.controls.getObject().position.y < 1.6) { this.velocity.y = 0; this.controls.getObject().position.y = 1.6; this.canJump = true; } } _getCameraYaw() { const euler = new THREE.Euler().setFromQuaternion(this.camera.quaternion, 'YXZ'); return euler.y; } getPosition() { return this.controls.getObject().position; } } import * as THREE from 'three'; export default class Projectiles { constructor(scene, ui) { this.scene = scene; this.ui = ui; this.bullets = []; this.speed = 120; this.life = 2; // seconds this.temp = new THREE.Vector3(); this.bulletGeo = new THREE.SphereGeometry(0.08, 6, 6); this.bulletMat = new THREE.MeshBasicMaterial({ color: 0xffee88 }); } spawn(position, direction) { const bullet = { mesh: new THREE.Mesh(this.bulletGeo, this.bulletMat), dir: direction.clone().normalize(), age: 0 }; bullet.mesh.position.copy(position); this.scene.add(bullet.mesh); this.bullets.push(bullet); } update(delta, enemyManager) { for (let i = this.bullets.length - 1; i >= 0; i--) { const b = this.bullets[i]; b.mesh.position.add(b.dir.clone().multiplyScalar(this.speed * delta)); b.age += delta; // Check collisions with enemies const hitEnemy = enemyManager.checkHit(b.mesh.position, 0.6); if (hitEnemy) { enemyManager.damageEnemy(hitEnemy, 50); this._removeBullet(i); continue; } if (b.age > this.life) { this._removeBullet(i); } } } _removeBullet(index) { const b = this.bullets[index]; this.scene.remove(b.mesh); this.bullets.splice(index, 1); } } import * as THREE from 'three'; export default class EnemyManager { constructor(scene, player, ui) { this.scene = scene; this.player = player; this.ui = ui; this.enemies = []; this.spawnCount = 8; this.spawnRange = 100; this._createEnemies(); } _createEnemies() { const geo = new THREE.BoxGeometry(1.6, 2, 1.6); const mat = new THREE.MeshStandardMaterial({ color: 0xff5555 }); for (let i = 0; i < this.spawnCount; i++) { const mesh = new THREE.Mesh(geo, mat.clone()); mesh.position.set( (Math.random() - 0.5) * this.spawnRange, 1, (Math.random() - 0.5) * this.spawnRange ); mesh.userData = { hp: 100, id: i + 1 }; this.scene.add(mesh); this.enemies.push(mesh); } } update(delta) { const ppos = this.player.getPosition(); for (const e of this.enemies) { if (!e) continue; // simple AI: move toward player slowly const dir = new THREE.Vector3().subVectors(ppos, e.position); const dist = dir.length(); if (dist > 1.5) { dir.normalize(); e.position.add(dir.multiplyScalar(2 * delta)); // speed 2 } // face player e.lookAt(ppos.x, e.position.y, ppos.z); } } checkHit(position, radius) { for (const e of this.enemies) { if (!e) continue; const d = e.position.distanceTo(position); if (d < radius + 0.9) return e; } return null; } damageEnemy(enemy, dmg) { enemy.userData.hp -= dmg; if (enemy.userData.hp <= 0) { this._killEnemy(enemy); } else { // flash color enemy.material.color.setHex(0xffff66); setTimeout(() => enemy.material.color.setHex(0xff5555), 120); } } _killEnemy(enemy) { const idx = this.enemies.indexOf(enemy); if (idx !== -1) this.enemies.splice(idx, 1); this.scene.remove(enemy); this.ui.addScore(100); // respawn after delay setTimeout(() => this._respawn(), 1500); } _respawn() { const geo = new THREE.BoxGeometry(1.6, 2, 1.6); const mat = new THREE.MeshStandardMaterial({ color: 0xff5555 }); const mesh = new THREE.Mesh(geo, mat); mesh.position.set( (Math.random() - 0.5) * this.spawnRange, 1, (Math.random() - 0.5) * this.spawnRange ); mesh.userData = { hp: 100, id: Math.floor(Math.random() * 10000) }; this.scene.add(mesh); this.enemies.push(mesh); } } export default class UI { constructor() { this.scoreEl = document.getElementById('score'); this.score = 0; } addScore(amount) { this.score += amount; this._render(); } _render() { this.scoreEl.textContent = `Score: ${this.score}`; } update() { // reserved for future updates (e.g., ammo, health) } }