Sonic Noscoped - The Game

Okay, let's transform that animation sequence into a basic interactive game where the player controls the "noscope" action. This version introduces: 1. Player control via mouse click to "noscope". 2. Sonic moving randomly as a target. 3. Hit detection between the noscope shot and Sonic/Earth. 4. Game states progressing based on successful hits. Sonic Noscoped - The Game

Click to Noscope!

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Game State Enum const GameState = { AIM_SONIC: 0, SONIC_HIT_MLG: 1, WEREHOG_TRANSFORM: 2, AIM_EARTH: 3, EARTH_HIT: 4, GAME_OVER: 5 }; let currentGameState = GameState.AIM_SONIC; const infoElement = document.getElementById('info'); // Scene, Camera, Renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 5, 20); // Adjusted camera start const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Controls - Allow camera movement const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.target.set(0, 0, 0); // Look towards the center initially // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 10, 7.5); scene.add(directionalLight); // Objects // Earth const earthGeometry = new THREE.SphereGeometry(5, 32, 32); const earthMaterial = new THREE.MeshStandardMaterial({ color: 0x2266dd, roughness: 0.8 }); const earth = new THREE.Mesh(earthGeometry, earthMaterial); earth.position.y = -6; scene.add(earth); // Sonic (Target 1) const sonicGeometry = new THREE.SphereGeometry(1, 32, 32); const sonicMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.5 }); // Blue const sonic = new THREE.Mesh(sonicGeometry, sonicMaterial); sonic.position.set(-8, 0, 0); // Start position scene.add(sonic); let sonicVelocity = new THREE.Vector3((Math.random() - 0.5) * 0.1, 0, (Math.random() - 0.5) * 0.1); const movementBounds = { xMin: -10, xMax: 10, zMin: -5, zMax: 5 }; // Robotnik (Player representation) const robotnikGeometry = new THREE.SphereGeometry(1.5, 32, 32); const robotnikMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.6 }); // Red const robotnik = new THREE.Mesh(robotnikGeometry, robotnikMaterial); robotnik.position.set(12, 0, 0); // Fixed position for simplicity scene.add(robotnik); // Noscope Line const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff00ff, linewidth: 3, transparent: true, opacity: 0 }); // Start invisible const lineGeometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3()]); const noscopeLine = new THREE.Line(lineGeometry, lineMaterial); scene.add(noscopeLine); let noscopeActive = false; let noscopeTimer = 0; const NOSCOPE_DURATION = 0.15; // seconds // MLG Items (Placeholder Geometry) const mlgItemGroup = new THREE.Group(); const doritosGeo = new THREE.ConeGeometry(0.3, 0.5, 3); // Triangle shape const dewGeo = new THREE.CylinderGeometry(0.1, 0.1, 0.5, 8); const weedGeo = new THREE.SphereGeometry(0.2, 8, 8); // Simple sphere for placeholder const doritosMat = new THREE.MeshBasicMaterial({ color: 0xffa500 }); // Orange const dewMat = new THREE.MeshBasicMaterial({ color: 0x7fff00 }); // Chartreuse Green const weedMat = new THREE.MeshBasicMaterial({ color: 0x228b22 }); // Forest Green for (let i = 0; i < 5; i++) { const dorito = new THREE.Mesh(doritosGeo, doritosMat); dorito.position.randomDirection().multiplyScalar(1.5).add(sonic.position); // Position around sonic mlgItemGroup.add(dorito); const dew = new THREE.Mesh(dewGeo, dewMat); dew.position.randomDirection().multiplyScalar(1.5).add(sonic.position); mlgItemGroup.add(dew); const weed = new THREE.Mesh(weedGeo, weedMat); weed.position.randomDirection().multiplyScalar(1.5).add(sonic.position); mlgItemGroup.add(weed); } mlgItemGroup.visible = false; scene.add(mlgItemGroup); let mlgTimer = 0; const MLG_DURATION = 1.5; // seconds // Raycaster for shooting const raycaster = new THREE.Raycaster(); const shootDirection = new THREE.Vector3(); // Clock const clock = new THREE.Clock(); // --- Game Logic --- function updateInfo() { switch (currentGameState) { case GameState.AIM_SONIC: infoElement.textContent = "Noscope Sonic! (Click)"; break; case GameState.SONIC_HIT_MLG: infoElement.textContent = "MLG SONIC ACTIVATED!"; break; case GameState.WEREHOG_TRANSFORM: infoElement.textContent = "Sonic becomes... WEREHOG!"; break; case GameState.AIM_EARTH: infoElement.textContent = "Noscope the Earth! (Click)"; break; case GameState.EARTH_HIT: infoElement.textContent = "EARTH HAS BEEN NOSCOPED!"; break; case GameState.GAME_OVER: infoElement.textContent = "GAME OVER - Robotnik Wins!"; break; } } function shoot() { if (noscopeActive || (currentGameState !== GameState.AIM_SONIC && currentGameState !== GameState.AIM_EARTH)) { return; // Don't shoot if already shooting or in wrong state } // Shoot from Robotnik towards the center of the screen (approximated) // More accurate: Raycast from camera through center camera.getWorldDirection(shootDirection); const shootStart = robotnik.position.clone(); // Extend the line far out const shootEnd = shootStart.clone().add(shootDirection.multiplyScalar(100)); // Update line geometry const positions = noscopeLine.geometry.attributes.position.array; positions[0] = shootStart.x; positions[1] = shootStart.y; positions[2] = shootStart.z; positions[3] = shootEnd.x; positions[4] = shootEnd.y; positions[5] = shootEnd.z; noscopeLine.geometry.attributes.position.needsUpdate = true; // Make line visible and start timer noscopeLine.material.opacity = 1.0; noscopeActive = true; noscopeTimer = 0; // Check for hits raycaster.set(shootStart, shootDirection); // Use the calculated direction if (currentGameState === GameState.AIM_SONIC) { const intersectsSonic = raycaster.intersectObject(sonic); if (intersectsSonic.length > 0 && intersectsSonic[0].distance < 100) { // Check distance if needed console.log("Hit Sonic!"); currentGameState = GameState.SONIC_HIT_MLG; sonic.material.color.set(0x00ff00); // Green mlgItemGroup.visible = true; // Show MLG items mlgItemGroup.children.forEach(item => { // Reposition items around current sonic pos item.position.randomDirection().multiplyScalar(1.5).add(sonic.position); }); mlgTimer = 0; sonicVelocity.set(0, 0, 0); // Stop Sonic briefly updateInfo(); } } else if (currentGameState === GameState.AIM_EARTH) { const intersectsEarth = raycaster.intersectObject(earth); if (intersectsEarth.length > 0 && intersectsEarth[0].distance < 100) { console.log("Hit Earth!"); currentGameState = GameState.EARTH_HIT; earth.material.color.set(0x8B4513); // Brown - Cracked // Add a crack decal later if desired updateInfo(); // Set timeout for game over setTimeout(() => { currentGameState = GameState.GAME_OVER; updateInfo(); }, 2000); } } } function moveSonic(deltaTime) { if (currentGameState !== GameState.AIM_SONIC) return; // Only move when target sonic.position.add(sonicVelocity.clone().multiplyScalar(deltaTime * 30)); // Adjust speed multiplier as needed // Bounce off bounds if (sonic.position.x < movementBounds.xMin || sonic.position.x > movementBounds.xMax) { sonicVelocity.x *= -1; sonic.position.x = Math.max(movementBounds.xMin, Math.min(movementBounds.xMax, sonic.position.x)); // Clamp position } if (sonic.position.z < movementBounds.zMin || sonic.position.z > movementBounds.zMax) { sonicVelocity.z *= -1; sonic.position.z = Math.max(movementBounds.zMin, Math.min(movementBounds.zMax, sonic.position.z)); // Clamp position } // Add slight random change to velocity over time if (Math.random() < 0.01) { // Low chance each frame sonicVelocity.x += (Math.random() - 0.5) * 0.01; sonicVelocity.z += (Math.random() - 0.5) * 0.01; sonicVelocity.normalize().multiplyScalar(0.1); // Keep speed somewhat constant } } // --- Event Listeners --- window.addEventListener('click', shoot); window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // --- Animation Loop --- function animate() { requestAnimationFrame(animate); const deltaTime = clock.getDelta(); controls.update(); // Update camera controls // Update Noscope Line Visibility if (noscopeActive) { noscopeTimer += deltaTime; noscopeLine.material.opacity = Math.max(0, 1.0 - (noscopeTimer / NOSCOPE_DURATION)); if (noscopeTimer >= NOSCOPE_DURATION) { noscopeActive = false; noscopeLine.material.opacity = 0; } } // Update MLG State if (currentGameState === GameState.SONIC_HIT_MLG) { mlgTimer += deltaTime; mlgItemGroup.rotation.y += deltaTime * 2; // Spin the items if (mlgTimer >= MLG_DURATION) { currentGameState = GameState.WEREHOG_TRANSFORM; mlgItemGroup.visible = false; sonic.material.color.set(0x440066); // Dark Purple/Grey sonic.scale.set(1.2, 1.2, 1.2); // Make bigger updateInfo(); // Transition to next state after a delay setTimeout(() => { if (currentGameState === GameState.WEREHOG_TRANSFORM) { // Check if state hasn't changed again currentGameState = GameState.AIM_EARTH; updateInfo(); } }, 2000); // Wait 2 seconds in Werehog form } } // Move Sonic if applicable moveSonic(deltaTime); renderer.render(scene, camera); } // Start Game updateInfo(); animate();