Spaces:

yefem16191
/

erer

Running

erer / index.html

🎮 PARTE 1 — BASE DO JOGO 3D (MAPA + PERSONAGEM + CONTROLES) ✅ Objetivo: Criar a estrutura base com: Terreno simples Personagem articulado Controles funcionais Câmera em terceira pessoa Física e gravidade 🧾 Prompt 1 — Estrutura inicial do jogo: Crie um jogo 3D leve e minimalista com: • Um personagem com corpo articulado (braços, pernas e cabeça) estilo low poly. • O personagem deve começar acima do terreno e completamente visível. • Movimentação com teclado: W, A, S, D para andar; Espaço para pular; Shift para correr. • Câmera em terceira pessoa, acompanhando o personagem suavemente por trás. • Um terreno plano grande e algumas plataformas elevadas espalhadas. • Física básica: gravidade ativa, colisão entre o personagem e o terreno/plataformas. • Iluminação clara e céu azul com luz ambiente suave. Este será o esqueleto do jogo. - Initial Deployment

ce5c7f8 verified about 1 year ago

Raw

History Blame Contribute Delete

32.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Oxygen Runner</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	font-family: 'Arial', sans-serif;
	}
	#game-container {
	position: relative;
	width: 100%;
	height: 100vh;
	}
	#ui-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	}
	.oxygen-bar {
	transition: width 0.3s ease;
	}
	#mobile-controls {
	display: none;
	}
	@media (max-width: 768px) {
	#mobile-controls {
	display: flex;
	}
	}
	</style>
	</head>
	<body class="bg-blue-50">
	<div id="game-container" tabindex="0">
	<div id="ui-overlay" class="flex flex-col p-4">
	<!-- Oxygen and score display -->
	<div class="flex justify-between items-center">
	<div class="bg-white bg-opacity-70 rounded-lg p-2 shadow-lg">
	<div class="text-sm font-bold text-gray-800">OXYGEN</div>
	<div class="w-40 h-4 bg-gray-300 rounded-full overflow-hidden">
	<div id="oxygen-bar" class="oxygen-bar h-full bg-blue-500" style="width: 100%;"></div>
	</div>
	<div id="oxygen-time" class="text-xs font-semibold text-gray-700">02:30</div>
	</div>

	<div class="bg-white bg-opacity-70 rounded-lg p-2 shadow-lg">
	<div class="text-sm font-bold text-gray-800">GREEN ZONES</div>
	<div id="green-zones" class="text-lg font-bold text-green-600">0/5</div>
	</div>
	</div>

	<!-- Game messages -->
	<div id="game-message" class="mt-4 mx-auto bg-white bg-opacity-80 rounded-lg px-4 py-2 shadow-lg text-center text-gray-800 font-bold text-lg hidden"></div>

	<!-- Start screen -->
	<div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-60">
	<h1 class="text-4xl md:text-6xl font-bold text-white mb-4">OXYGEN RUNNER</h1>
	<p class="text-white text-lg mb-8 max-w-md text-center">Restore the planet's green zones before your oxygen runs out!</p>
	<button id="start-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg transition-all transform hover:scale-105 pointer-events-auto">
	START MISSION
	</button>
	<div class="mt-8 text-white">
	<div class="mb-2">WASD: Move</div>
	<div class="mb-2">SPACE: Jump</div>
	<div class="mb-2">SHIFT: Run</div>
	<div>E: Interact</div>
	</div>
	</div>

	<!-- Game over screen -->
	<div id="game-over-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-60 hidden">
	<h1 id="game-over-title" class="text-4xl md:text-6xl font-bold text-white mb-4"></h1>
	<p id="game-over-message" class="text-white text-lg mb-8 max-w-md text-center"></p>
	<button id="restart-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg transition-all transform hover:scale-105 pointer-events-auto">
	TRY AGAIN
	</button>
	</div>

	<!-- Mobile controls -->
	<div id="mobile-controls" class="absolute bottom-4 w-full px-4 pointer-events-auto">
	<div class="grid grid-cols-3 gap-2">
	<div></div>
	<button id="mobile-up" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
	↑
	</button>
	<div></div>
	<button id="mobile-left" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
	←
	</button>
	<button id="mobile-interact" class="bg-green-500 bg-opacity-80 rounded-full h-16 flex items-center justify-center shadow-lg text-white font-bold">
	E
	</button>
	<button id="mobile-right" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
	→
	</button>
	<button id="mobile-jump" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
	↑↑
	</button>
	<button id="mobile-run" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
	RUN
	</button>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Background music and sounds
	const bgMusic = new Audio('https://assets.mixkit.co/music/preview/mixkit-forest-trek-583.mp3');
	bgMusic.loop = true;
	bgMusic.volume = 0.4;

	// Preload sounds
	const soundEffects = {
	collect: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3'),
	restore: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3'),
	jump: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-quick-jump-arcade-game-239.mp3'),
	step: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-footsteps-on-grass-531.mp3'),
	win: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3')
	};

	// Set volumes
	Object.values(soundEffects).forEach(sound => {
	sound.volume = 0.3;
	});

	// Game variables
	let scene, camera, renderer, controls, player, oxygenSpheres = [], greenZones = [];
	let oxygenLevel = 100;
	let oxygenTime = 150; // 2.5 minutes in seconds
	let collectedSpheres = 0;
	let restoredZones = 0;
	let totalZones = 5;
	let gameActive = false;
	let playerSpeed = 0.1;
	let clock = new THREE.Clock();
	let keys = {};

	// Initialize the game
	function init() {
	// Create scene
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0x87CEEB);

	// Create camera
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 10, 15);

	// Create renderer
	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.getElementById('game-container').prepend(renderer.domElement);

	// Add lights
	const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
	scene.add(ambientLight);

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

	// Create ground
	const groundGeometry = new THREE.PlaneGeometry(50, 50);
	const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xB8860B });
	const ground = new THREE.Mesh(groundGeometry, groundMaterial);
	ground.rotation.x = -Math.PI / 2;
	ground.receiveShadow = true;
	scene.add(ground);

	// Create more realistic player
	player = new THREE.Group();

	// Body
	const bodyGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.8, 8);
	const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x4682B4 });
	const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
	body.position.y = 0.4;
	body.rotation.x = Math.PI / 2;
	player.add(body);

	// Head
	const headGeometry = new THREE.SphereGeometry(0.25, 16, 16);
	const headMaterial = new THREE.MeshStandardMaterial({ color: 0xFFD700 });
	const head = new THREE.Mesh(headGeometry, headMaterial);
	head.position.y = 0.8;
	player.add(head);

	// Arms
	const armGeometry = new THREE.CylinderGeometry(0.08, 0.08, 0.6, 8);
	const armMaterial = new THREE.MeshStandardMaterial({ color: 0xFFD700 });

	const leftArm = new THREE.Mesh(armGeometry, armMaterial);
	leftArm.position.set(-0.3, 0.4, 0);
	leftArm.rotation.z = Math.PI / 2;
	player.add(leftArm);

	const rightArm = new THREE.Mesh(armGeometry, armMaterial);
	rightArm.position.set(0.3, 0.4, 0);
	rightArm.rotation.z = Math.PI / 2;
	player.add(rightArm);

	// Legs
	const legGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 8);
	const legMaterial = new THREE.MeshStandardMaterial({ color: 0x4682B4 });

	const leftLeg = new THREE.Mesh(legGeometry, legMaterial);
	leftLeg.position.set(-0.15, -0.3, 0);
	player.add(leftLeg);

	const rightLeg = new THREE.Mesh(legGeometry, legMaterial);
	rightLeg.position.set(0.15, -0.3, 0);
	player.add(rightLeg);

	player.position.y = 1;
	player.castShadow = true;
	player.userData = {
	armSwing: 0,
	legSwing: 0,
	isMoving: false
	};
	scene.add(player);

	// Create platforms and obstacles
	createEnvironment();

	// Create oxygen spheres
	createOxygenSpheres();

	// Create green zones
	createGreenZones();

	// Add event listeners
	window.addEventListener('resize', onWindowResize);
	document.addEventListener('keydown', onKeyDown);
	document.addEventListener('keyup', onKeyUp);

	// Mobile controls
	document.getElementById('mobile-up').addEventListener('touchstart', () => keys['w'] = true);
	document.getElementById('mobile-up').addEventListener('touchend', () => keys['w'] = false);
	document.getElementById('mobile-left').addEventListener('touchstart', () => keys['a'] = true);
	document.getElementById('mobile-left').addEventListener('touchend', () => keys['a'] = false);
	document.getElementById('mobile-right').addEventListener('touchstart', () => keys['d'] = true);
	document.getElementById('mobile-right').addEventListener('touchend', () => keys['d'] = false);
	document.getElementById('mobile-jump').addEventListener('touchstart', () => keys[' '] = true);
	document.getElementById('mobile-jump').addEventListener('touchend', () => keys[' '] = false);
	document.getElementById('mobile-run').addEventListener('touchstart', () => keys['Shift'] = true);
	document.getElementById('mobile-run').addEventListener('touchend', () => keys['Shift'] = false);
	document.getElementById('mobile-interact').addEventListener('touchstart', () => interact());

	// Game buttons
	document.getElementById('start-button').addEventListener('click', startGame);
	document.getElementById('restart-button').addEventListener('click', restartGame);

	// Start animation loop
	animate();
	}

	function createEnvironment() {
	// Add some platforms
	const platformGeometry = new THREE.BoxGeometry(8, 0.5, 8);
	const platformMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });

	for (let i = 0; i < 5; i++) {
	const platform = new THREE.Mesh(platformGeometry, platformMaterial);
	platform.position.x = (Math.random() - 0.5) * 30;
	platform.position.z = (Math.random() - 0.5) * 30;
	platform.position.y = Math.random() * 3;
	scene.add(platform);
	}

	// Add some dead trees
	const treeGeometry = new THREE.ConeGeometry(0.5, 2, 4);
	const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F });

	for (let i = 0; i < 10; i++) {
	const tree = new THREE.Mesh(treeGeometry, treeMaterial);
	tree.position.x = (Math.random() - 0.5) * 40;
	tree.position.z = (Math.random() - 0.5) * 40;
	tree.position.y = 1;
	scene.add(tree);
	}
	}

	function createOxygenSpheres() {
	const sphereGeometry = new THREE.SphereGeometry(0.5, 16, 16);
	const sphereMaterial = new THREE.MeshStandardMaterial({
	color: 0x00BFFF,
	transparent: true,
	opacity: 0.8,
	emissive: 0x00BFFF,
	emissiveIntensity: 0.5
	});

	for (let i = 0; i < 10; i++) {
	const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
	sphere.position.x = (Math.random() - 0.5) * 40;
	sphere.position.z = (Math.random() - 0.5) * 40;
	sphere.position.y = 10 + Math.random() * 5; // Start higher up

	// Physics properties
	sphere.userData = {
	velocity: new THREE.Vector3(0, -0.1, 0),
	onGround: false,
	time: Math.random() * Math.PI * 2
	};

	oxygenSpheres.push(sphere);
	scene.add(sphere);
	}
	}

	function createGreenZones() {
	const zoneGeometry = new THREE.CylinderGeometry(2, 2, 0.1, 32);
	const zoneMaterial = new THREE.MeshStandardMaterial({
	color: 0x228B22,
	transparent: true,
	opacity: 0.7,
	emissive: 0x00FF00,
	emissiveIntensity: 0.8
	});

	// Enhanced white outline effect with glow
	const zoneOutlineGeometry = new THREE.RingGeometry(1.9, 2.2, 32);
	const zoneOutlineMaterial = new THREE.MeshBasicMaterial({
	color: 0xFFFFFF,
	side: THREE.DoubleSide,
	transparent: true,
	opacity: 0.9
	});

	// Add pulsing glow effect
	const zoneGlowGeometry = new THREE.RingGeometry(2.1, 2.5, 32);
	const zoneGlowMaterial = new THREE.MeshBasicMaterial({
	color: 0x00FF00,
	side: THREE.DoubleSide,
	transparent: true,
	opacity: 0.5
	});

	for (let i = 0; i < totalZones; i++) {
	const zone = new THREE.Mesh(zoneGeometry, zoneMaterial);
	zone.position.x = (Math.random() - 0.5) * 40;
	zone.position.z = (Math.random() - 0.5) * 40;
	zone.position.y = 0.05;
	zone.visible = false;

	greenZones.push(zone);
	scene.add(zone);
	}
	}

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

	function onKeyDown(event) {
	// Only process keys when game container has focus
	if (document.activeElement.id === 'game-container') {
	keys[event.key] = true;

	// Prevent space bar from scrolling page
	if (event.key === ' ' \|\|
	event.key === 'w' \|\|
	event.key === 'a' \|\|
	event.key === 's' \|\|
	event.key === 'd') {
	event.preventDefault();
	}

	// Interact with E
	if (event.key === 'e' && gameActive) {
	interact();
	}
	}
	}

	function onKeyUp(event) {
	keys[event.key] = false;
	}

	// Sound effects
	const sounds = {
	collect: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-positive-interface-beep-221.mp3'),
	restore: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3'),
	win: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3')
	};

	function interact() {
	if (!gameActive) return;

	// Check for nearby oxygen spheres
	for (let i = 0; i < oxygenSpheres.length; i++) {
	const sphere = oxygenSpheres[i];
	const distance = player.position.distanceTo(sphere.position);

	if (distance < 2) {
	// Enhanced visual effect
	const flash = new THREE.PointLight(0x00BFFF, 5, 5);
	flash.position.copy(sphere.position);
	scene.add(flash);

	// Add particle burst
	const particles = new THREE.Group();
	for (let i = 0; i < 20; i++) {
	const particle = new THREE.Mesh(
	new THREE.SphereGeometry(0.1),
	new THREE.MeshBasicMaterial({ color: 0x00BFFF })
	);
	particle.position.copy(sphere.position);
	particle.userData = {
	velocity: new THREE.Vector3(
	(Math.random() - 0.5) * 0.5,
	Math.random() * 0.5,
	(Math.random() - 0.5) * 0.5
	),
	lifetime: 0
	};
	particles.add(particle);
	}
	scene.add(particles);

	// Animate and remove effects
	setTimeout(() => {
	scene.remove(flash);
	scene.remove(particles);
	}, 500);

	// Collect sphere
	scene.remove(sphere);
	oxygenSpheres.splice(i, 1);
	collectedSpheres++;

	// Add oxygen
	oxygenLevel = Math.min(100, oxygenLevel + 10);
	updateOxygenDisplay();

	// Play sound and show message
	sounds.collect.play();
	showMessage("Oxygen collected!", 1500);
	return;
	}
	}

	// Check for green zones to restore
	for (let i = 0; i < greenZones.length; i++) {
	const zone = greenZones[i];

	if (!zone.visible) {
	const distance = player.position.distanceTo(zone.position);

	if (distance < 3 && collectedSpheres > 0) {
	// Restore zone
	zone.visible = true;
	collectedSpheres--;
	restoredZones++;
	updateGreenZonesDisplay();

	// Show message
	showMessage("Green zone restored!", 1500);

	// Check win condition
	if (restoredZones >= totalZones) {
	endGame(true);
	}
	return;
	}
	}
	}
	}

	function startGame() {
	document.getElementById('start-screen').classList.add('hidden');
	gameActive = true;
	bgMusic.play();

	// Start oxygen depletion
	setInterval(() => {
	if (gameActive) {
	oxygenTime--;
	oxygenLevel = (oxygenTime / 150) * 100;
	updateOxygenDisplay();

	if (oxygenTime <= 0) {
	endGame(false);
	}
	}
	}, 1000);
	}

	function endGame(win) {
	gameActive = false;
	const gameOverScreen = document.getElementById('game-over-screen');
	const title = document.getElementById('game-over-title');
	const message = document.getElementById('game-over-message');

	gameOverScreen.classList.remove('hidden');

	if (win) {
	title.textContent = "VOCÊ SALVOU O PLANETA!";
	message.textContent = `Você restaurou todas as ${totalZones} zonas verdes com ${oxygenTime} segundos restantes!`;

	// Confetti effect
	setTimeout(() => {
	for (let i = 0; i < 100; i++) {
	const confetti = new THREE.Mesh(
	new THREE.SphereGeometry(0.1),
	new THREE.MeshBasicMaterial({
	color: Math.random() * 0xffffff
	})
	);
	confetti.position.set(
	player.position.x + (Math.random() - 0.5) * 10,
	player.position.y + Math.random() * 10,
	player.position.z + (Math.random() - 0.5) * 10
	);
	confetti.userData = {
	velocity: new THREE.Vector3(
	(Math.random() - 0.5) * 0.1,
	Math.random() * 0.1,
	(Math.random() - 0.5) * 0.1
	)
	};
	scene.add(confetti);
	}
	}, 500);

	// Auto-restart after 10 seconds
	setTimeout(restartGame, 10000);
	} else {
	title.textContent = "MISSION FAILED";
	message.textContent = `You ran out of oxygen after restoring ${restoredZones} of ${totalZones} green zones.`;
	}

	// Pause background music
	bgMusic.pause();
	}

	function restartGame() {
	document.getElementById('game-over-screen').classList.add('hidden');

	// Reset game state
	oxygenLevel = 100;
	oxygenTime = 150;
	collectedSpheres = 0;
	restoredZones = 0;
	gameActive = false;

	// Reset displays
	updateOxygenDisplay();
	updateGreenZonesDisplay();

	// Clear existing objects
	oxygenSpheres.forEach(sphere => scene.remove(sphere));
	greenZones.forEach(zone => {
	zone.visible = false;
	scene.remove(zone);
	});

	oxygenSpheres = [];
	greenZones = [];

	// Recreate objects
	createOxygenSpheres();
	createGreenZones();

	// Reset player position
	player.position.set(0, 1, 0);

	// Show start screen
	document.getElementById('start-screen').classList.remove('hidden');
	}

	function updateOxygenDisplay() {
	const oxygenBar = document.getElementById('oxygen-bar');
	oxygenBar.style.width = `${oxygenLevel}%`;

	// Change color based on oxygen level
	if (oxygenLevel < 30) {
	oxygenBar.classList.remove('bg-blue-500');
	oxygenBar.classList.add('bg-red-500');
	} else {
	oxygenBar.classList.remove('bg-red-500');
	oxygenBar.classList.add('bg-blue-500');
	}

	// Update time display
	const minutes = Math.floor(oxygenTime / 60);
	const seconds = oxygenTime % 60;
	document.getElementById('oxygen-time').textContent =
	`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
	}

	function updateGreenZonesDisplay() {
	document.getElementById('green-zones').textContent =
	`${restoredZones}/${totalZones}`;
	}

	function showMessage(text, duration) {
	const messageElement = document.getElementById('game-message');
	messageElement.textContent = text;
	messageElement.classList.remove('hidden');

	setTimeout(() => {
	messageElement.classList.add('hidden');
	}, duration);
	}

	function animate() {
	requestAnimationFrame(animate);

	const delta = clock.getDelta();

	if (gameActive) {
	// Player movement
	const moveSpeed = keys['Shift'] ? playerSpeed * 1.5 : playerSpeed;

	if (keys['w']) {
	player.position.z -= moveSpeed;
	camera.position.z -= moveSpeed;
	}
	if (keys['s']) {
	player.position.z += moveSpeed;
	camera.position.z += moveSpeed;
	}
	if (keys['a']) {
	player.position.x -= moveSpeed;
	camera.position.x -= moveSpeed;
	}
	if (keys['d']) {
	player.position.x += moveSpeed;
	camera.position.x += moveSpeed;
	}
	if (keys[' '] && player.position.y <= 1.1) {
	player.position.y += 0.5;
	}

	// Improved gravity and jumping
	if (player.position.y > 0.8) {
	player.position.y -= 0.1;
	} else {
	player.position.y = 0.8;
	}

	// Character animation
	const isMoving = keys['w'] \|\| keys['a'] \|\| keys['s'] \|\| keys['d'];
	player.userData.isMoving = isMoving;

	if (isMoving) {
	// Arm swing animation
	player.userData.armSwing += delta * 10;
	const leftArm = player.children[2];
	const rightArm = player.children[3];
	leftArm.rotation.z = Math.sin(player.userData.armSwing) * 0.5;
	rightArm.rotation.z = Math.sin(player.userData.armSwing + Math.PI) * 0.5;

	// Leg swing animation
	player.userData.legSwing += delta * 10;
	const leftLeg = player.children[4];
	const rightLeg = player.children[5];
	leftLeg.rotation.z = Math.sin(player.userData.legSwing + Math.PI) * 0.3;
	rightLeg.rotation.z = Math.sin(player.userData.legSwing) * 0.3;
	} else {
	// Reset to idle position
	player.children[2].rotation.z = THREE.MathUtils.lerp(
	player.children[2].rotation.z, 0, delta * 5
	);
	player.children[3].rotation.z = THREE.MathUtils.lerp(
	player.children[3].rotation.z, 0, delta * 5
	);
	player.children[4].rotation.z = THREE.MathUtils.lerp(
	player.children[4].rotation.z, 0, delta * 5
	);
	player.children[5].rotation.z = THREE.MathUtils.lerp(
	player.children[5].rotation.z, 0, delta * 5
	);
	}

	// Keep camera following player in third-person view
	const cameraOffset = new THREE.Vector3(0, 5, 10);
	const targetPosition = new THREE.Vector3();
	targetPosition.copy(player.position).add(cameraOffset);
	camera.position.lerp(targetPosition, delta * 5);
	camera.lookAt(player.position.x, player.position.y + 1, player.position.z);

	// Update oxygen spheres physics
	oxygenSpheres.forEach(sphere => {
	if (!sphere.userData.onGround) {
	sphere.userData.velocity.y -= 0.01; // Gravity
	sphere.position.add(sphere.userData.velocity);

	// Simple ground collision
	if (sphere.position.y <= 0.5) {
	sphere.position.y = 0.5;
	sphere.userData.onGround = true;
	}
	}

	// Pulsing animation when on ground
	if (sphere.userData.onGround) {
	sphere.userData.time += delta;
	sphere.position.y = 0.5 + Math.sin(sphere.userData.time) * 0.1;
	}

	sphere.rotation.y += delta * 0.5;
	});
	}

	renderer.render(scene, camera);
	}

	// Ensure game container has focus
	document.getElementById('game-container').focus();

	// Handle focus when clicking anywhere in the game
	document.addEventListener('click', () => {
	document.getElementById('game-container').focus();
	});

	// Start the game
	init();
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yefem16191/erer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>