<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Fruit Fall 3D</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
#gameCanvas { display: block; }
#ui-container {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: rgba(0,0,0,0.5);
color: white;
border-radius: 5px;
z-index: 100;
}
#score { font-size: 1.5em; margin-bottom: 5px; }
#start-button, #reset-button {
padding: 8px 15px;
font-size: 1em;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
margin-top: 5px;
}
#reset-button { background-color: #f44336; display: none;}
#game-over-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
background-color: rgba(0,0,0,0.7);
padding: 20px;
border-radius: 10px;
font-size: 2em;
text-align: center;
z-index: 101;
display: none; /* Hidden by default */
}
</style>
</head>
<body>
<div id="ui-container">
<div id="score">Score: 0</div>
<button id="start-button">Start Game</button>
<button id="reset-button">Play Again</button>
</div>
<div id="game-over-message">
Game Over!<br>
<span id="final-score-message"></span>
</div>
<canvas id="gameCanvas"></canvas>
<script>
let scene, camera, renderer;
let fruits = [];
let score = 0;
let gameActive = false;
let raycaster, mouse; // For click detection
let audioContext;
let gameTimer, timeLeft;
const GAME_DURATION = 30; // seconds
const scoreElement = document.getElementById('score');
const startButton = document.getElementById('start-button');
const resetButton = document.getElementById('reset-button');
const gameOverMessageDiv = document.getElementById('game-over-message');
const finalScoreMessageSpan = document.getElementById('final-score-message');
const fruitTypes = [
{ name: 'Mango', color: 0xFFBF00, size: 0.5, points: 10 },
{ name: 'Apple', color: 0xFF0000, size: 0.4, points: 10 },
{ name: 'Banana', color: 0xFFFF00, size: 0.35, points: 15 }, // Represented as sphere
{ name: 'Grapes', color: 0x800080, size: 0.3, points: 20 },
{ name: 'Watermelon', color: 0x00FF00, size: 0.7, points: 5 }
];
function initAudio() {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
}
function playSound(type = 'click', freq = 440, duration = 0.05) {
if (!audioContext) return;
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.type = (type === 'miss') ? 'sawtooth' : 'triangle';
oscillator.frequency.setValueAtTime(freq, audioContext.currentTime);
gainNode.gain.setValueAtTime(0.15, audioContext.currentTime); // Lowered volume
gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration);
oscillator.start();
oscillator.stop(audioContext.currentTime + duration);
}
function init() {
// Scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // Sky blue
// Camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 7); // Positioned to see the falling fruits well
camera.lookAt(0, 0, 0);
// Renderer
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7);
directionalLight.castShadow = true;
scene.add(directionalLight);
// Ground (optional, for visual reference)
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22, side: THREE.DoubleSide }); // Forest green
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -5; // Fruits fall past this
ground.receiveShadow = true;
scene.add(ground);
// Raycaster for mouse clicks
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
// Event Listeners
window.addEventListener('resize', onWindowResize, false);
renderer.domElement.addEventListener('click', onClick, false); // For desktop
renderer.domElement.addEventListener('touchstart', onTouch, false); // For mobile
startButton.addEventListener('click', startGame);
resetButton.addEventListener('click', startGame); // Reset button also starts the game
}
function startGame() {
initAudio();
score = 0;
timeLeft = GAME_DURATION;
updateScoreDisplay();
gameActive = true;
fruits.forEach(fruit => scene.remove(fruit.mesh)); // Clear existing fruits
fruits = [];
startButton.style.display = 'none';
resetButton.style.display = 'none';
gameOverMessageDiv.style.display = 'none';
if (gameTimer) clearInterval(gameTimer);
gameTimer = setInterval(() => {
timeLeft--;
// Optionally display timer: scoreElement.textContent = `Score: ${score} | Time: ${timeLeft}`;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
spawnFruitLoop(); // Start spawning fruits
if (!renderer.xr.isPresenting) animate(); // Ensure animate isn't called twice if in XR
}
function endGame() {
gameActive = false;
clearInterval(gameTimer);
clearTimeout(fruitSpawnTimeout); // Stop spawning new fruits
finalScoreMessageSpan.textContent = `Your Score: ${score}`;
gameOverMessageDiv.style.display = 'flex';
resetButton.style.display = 'inline-block';
}
let fruitSpawnTimeout;
function spawnFruitLoop() {
if (!gameActive) return;
createFruit();
const spawnInterval = Math.random() * 1500 + 500; // 0.5 to 2 seconds
fruitSpawnTimeout = setTimeout(spawnFruitLoop, spawnInterval);
}
function createFruit() {
if (!gameActive) return;
const type = fruitTypes[Math.floor(Math.random() * fruitTypes.length)];
const geometry = new THREE.SphereGeometry(type.size, 16, 12);
const material = new THREE.MeshStandardMaterial({ color: type.color, roughness: 0.5, metalness: 0.1 });
const fruitMesh = new THREE.Mesh(geometry, material);
fruitMesh.castShadow = true;
// Random spawn position at the top
fruitMesh.position.x = (Math.random() - 0.5) * 10; // Range: -5 to 5
fruitMesh.position.y = 7 + Math.random() * 3; // Start above camera view
fruitMesh.position.z = (Math.random() - 0.5) * 4; // Some depth variation
fruitMesh.userData = { type: type.name, points: type.points, fallSpeed: 0.02 + Math.random() * 0.03 };
scene.add(fruitMesh);
fruits.push({ mesh: fruitMesh, data: fruitMesh.userData });
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function handleInteraction(clientX, clientY) {
if (!gameActive) return;
mouse.x = (clientX / window.innerWidth) * 2 - 1;
mouse.y = -(clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const fruitMeshes = fruits.map(f => f.mesh);
const intersects = raycaster.intersectObjects(fruitMeshes);
if (intersects.length > 0) {
const clickedFruitMesh = intersects[0].object;
const fruitIndex = fruits.findIndex(f => f.mesh === clickedFruitMesh);
if (fruitIndex !== -1) {
const fruitData = fruits[fruitIndex].data;
score += fruitData.points;
updateScoreDisplay();
playSound('click', 300 + Math.random()*200);
// Simple "pop" effect: shrink and remove
// More complex particle effects are possible but add overhead
clickedFruitMesh.scale.set(0.1,0.1,0.1); // Visually shrink
setTimeout(() => { // Remove after slight delay
scene.remove(clickedFruitMesh);
}, 50);
fruits.splice(fruitIndex, 1);
}
}
}
function onClick(event) {
handleInteraction(event.clientX, event.clientY);
}
function onTouch(event) {
if (event.touches.length > 0) {
handleInteraction(event.touches[0].clientX, event.touches[0].clientY);
}
}
function updateScoreDisplay() {
scoreElement.textContent = `Score: ${score} | Time: ${timeLeft}`;
}
function animate() {
if (!gameActive && timeLeft <= 0) { // If game ended, stop animation loop
return;
}
requestAnimationFrame(animate);
if (gameActive) {
// Fruit falling logic
for (let i = fruits.length - 1; i >= 0; i--) {
const fruitObj = fruits[i];
fruitObj.mesh.position.y -= fruitObj.data.fallSpeed;
fruitObj.mesh.rotation.x += 0.01;
fruitObj.mesh.rotation.y += 0.01;
// Remove fruit if it falls below a certain point (miss)
if (fruitObj.mesh.position.y < -6) { // Below the ground plane
scene.remove(fruitObj.mesh);
fruits.splice(i, 1);
// playSound('miss', 150); // Optional miss sound
// score -= 5; // Optional penalty
updateScoreDisplay();
}
}
}
renderer.render(scene, camera);
}
// --- Start ---
init();
// startGame(); // Initial call to animate if not waiting for button
</script>
</body>
</html>