// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // Game Constants // ================================================== const SPICE_COLOR = 0xffa500; // Bright orange for spice const SANDWORM_COLOR = 0x654321; // Dark brown for sandworm const TERRAIN_COLOR = 0xf4a460; // Light sandy color for terrain const PLAYER_COLOR = 0x00ff00; // Green for player const SPICE_VALUE = 10; // Points per spice const SANDWORM_SPEED = 0.02; // Slower sandworm movement const WATER_DEPLETION_RATE = 0.5; // Slower water depletion const GAME_DURATION = 120; // 2-minute game duration // ================================================== // Game State // ================================================== let gameState = { spiceCollected: 0, water: 100, timeLeft: GAME_DURATION, isGameOver: false, }; // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const mountRef = useRef(null); const [score, setScore] = useState(0); const [water, setWater] = useState(gameState.water); const [timeLeft, setTimeLeft] = useState(gameState.timeLeft); const [gameOver, setGameOver] = useState(false); useEffect(() => { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); // Handle window resizing const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; const pixelRatio = window.devicePixelRatio; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(pixelRatio); camera.position.z = 15; }; // Initial setup renderer.setPixelRatio(window.devicePixelRatio); mountRef.current.appendChild(renderer.domElement); handleResize(); // Call once to set initial dimensions window.addEventListener('resize', handleResize); // Create desert terrain const terrainGeometry = new THREE.BoxGeometry(20, 0.5, 20); const terrainMaterial = new THREE.MeshBasicMaterial({ color: TERRAIN_COLOR }); const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial); terrain.position.y = -1; scene.add(terrain); // Create player (cube) const playerGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); const playerMaterial = new THREE.MeshBasicMaterial({ color: PLAYER_COLOR }); const player = new THREE.Mesh(playerGeometry, playerMaterial); player.position.y = 0.5; scene.add(player); // Create spice (small cubes) const spices = []; for (let i = 0; i < 10; i++) { const spiceGeometry = new THREE.BoxGeometry(0.3, 0.3, 0.3); const spiceMaterial = new THREE.MeshBasicMaterial({ color: SPICE_COLOR }); const spice = new THREE.Mesh(spiceGeometry, spiceMaterial); spice.position.set( Math.random() * 15 - 7.5, 0.2, Math.random() * 15 - 7.5 ); spices.push(spice); scene.add(spice); } // Create sandworm (long box) const sandwormGeometry = new THREE.BoxGeometry(2, 0.5, 4); const sandwormMaterial = new THREE.MeshBasicMaterial({ color: SANDWORM_COLOR }); const sandworm = new THREE.Mesh(sandwormGeometry, sandwormMaterial); sandworm.position.set(0, 0.5, 15); // Start far away scene.add(sandworm); // Add lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(5, 5, 5); scene.add(directionalLight); camera.position.z = 15; // Game logic const handleSpiceCollection = (spice) => { gameState.spiceCollected += SPICE_VALUE; setScore(gameState.spiceCollected); scene.remove(spice); }; const handleWaterDepletion = () => { gameState.water -= WATER_DEPLETION_RATE; setWater(gameState.water); if (gameState.water <= 0) { gameState.isGameOver = true; setGameOver(true); } }; const handleTimeUpdate = () => { gameState.timeLeft -= 1; setTimeLeft(gameState.timeLeft); if (gameState.timeLeft <= 0) { gameState.isGameOver = true; setGameOver(true); } }; // Player movement const handleKeyDown = (event) => { const speed = 0.1; if (event.key === 'w') player.position.z -= speed; if (event.key === 's') player.position.z += speed; if (event.key === 'a') player.position.x -= speed; if (event.key === 'd') player.position.x += speed; }; window.addEventListener('keydown', handleKeyDown); // Animation and game loop const animate = () => { if (gameState.isGameOver) return; requestAnimationFrame(animate); // Move sandworm sandworm.position.z -= SANDWORM_SPEED; if (sandworm.position.z < -15) { sandworm.position.z = 15; // Reset sandworm position } // Check for spice collection spices.forEach((spice, index) => { if (player.position.distanceTo(spice.position) < 1) { handleSpiceCollection(spice); spices.splice(index, 1); } }); // Update water and time handleWaterDepletion(); renderer.render(scene, camera); }; animate(); // Timer const timer = setInterval(handleTimeUpdate, 1000); // Cleanup return () => { window.removeEventListener('resize', handleResize); window.removeEventListener('keydown', handleKeyDown); clearInterval(timer); mountRef.current.removeChild(renderer.domElement); terrainGeometry.dispose(); terrainMaterial.dispose(); playerGeometry.dispose(); playerMaterial.dispose(); sandwormGeometry.dispose(); sandwormMaterial.dispose(); renderer.dispose(); }; }, []); return (

Dune x Minecraft Survival

Spice Collected: {score}

Water: {Math.round(water)}

Time Left: {timeLeft}

{gameOver &&

Game Over! Final Score: {score}

}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();