import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; // Input Handler class to manage interactions class InputHandler { constructor() { this.selectedPart = null; } selectPart(part) { this.selectedPart = part; console.log('Part selected:', part); } deselectPart() { console.log('Part deselected:', this.selectedPart); this.selectedPart = null; } getSelectedPart() { return this.selectedPart; } } // Player class to manage parts class Target { constructor(x, y, isGood) { this.x = x; this.y = y; this.isGood = isGood; this.radius = 20; // Size of the target this.collected = false; // Track if target has been collected this.isInGracePeriod = false; this.gracePeriodStart = 0; this.gracePeriodDuration = 1000; // 2 seconds in milliseconds } startGracePeriod() { this.isInGracePeriod = true; this.gracePeriodStart = Date.now(); } isGracePeriodActive() { if (!this.isInGracePeriod) return false; const elapsed = Date.now() - this.gracePeriodStart; if (elapsed >= this.gracePeriodDuration) { this.isInGracePeriod = false; return false; } return true; } } class Player { constructor() { this.parts = [ { id: 1, x: 159, y: 250 }, { id: 2, x: 259, y: 250 }, { id: 3, x: 259, y: 350 }, { id: 4, x: 159, y: 350 } ]; this.maxDistance = 120; // Maximum distance from center } getCenterPoint() { const totalX = this.parts.reduce((sum, part) => sum + part.x, 0); const totalY = this.parts.reduce((sum, part) => sum + part.y, 0); return { x: totalX / this.parts.length, y: totalY / this.parts.length }; } movePart(part, newX, newY) { const center = this.getCenterPoint(); const distance = Math.sqrt( Math.pow(newX - center.x, 2) + Math.pow(newY - center.y, 2) ); if (distance <= this.maxDistance) { part.x = newX; part.y = newY; } else { // Constrain the position to the maximum allowed distance const angle = Math.atan2(newY - center.y, newX - center.x); part.x = center.x + this.maxDistance * Math.cos(angle); part.y = center.y + this.maxDistance * Math.sin(angle); } return this.parts; } getParts() { return this.parts; } addPart(x, y) { const newPart = { id: this.parts.length + 1, x: x, y: y }; this.parts.push(newPart); return newPart; } getHeadPosition() { const part1 = this.parts[0]; const part2 = this.parts[1]; return { x: (part1.x + part2.x) / 2, y: (part1.y + part2.y) / 2 }; } } const GameState = { PLAYING: 'playing', GAME_OVER: 'game_over', TIME_UP: 'time_up' }; const GAME_DURATION = 60; // 60 seconds const SOUND_EFFECTS = { TIME_UP: 'https://play.rosebud.ai/assets/snd_timeup.ogg?6c3x', GAME_OVER: 'https://rosebud.ai/assets/snd_gameover3.ogg?DNTr' }; const SCORE_SOUNDS = [ 'https://play.rosebud.ai/assets/snd_scifiscore1.ogg?8Gzw', 'https://play.rosebud.ai/assets/snd_scifiscore2.ogg?6He6', 'https://play.rosebud.ai/assets/snd_scifiscore3.ogg?sqkN' ]; const Game = () => { const currentAudioRef = React.useRef(null); const bgMusicRef = React.useRef(null); const [player] = useState(new Player()); const [parts, setParts] = useState(player.getParts()); const [highScore, setHighScore] = useState(() => { const savedHighScore = localStorage.getItem('highScore'); return savedHighScore ? parseInt(savedHighScore, 10) : 0; }); const [gameState, setGameState] = useState(GameState.PLAYING); const [timeRemaining, setTimeRemaining] = useState(GAME_DURATION); const [score, setScore] = useState(0); const playSound = (soundUrl) => { // Stop any currently playing audio if (currentAudioRef.current) { currentAudioRef.current.pause(); currentAudioRef.current.currentTime = 0; } // Create and play new audio const audio = new Audio(soundUrl); audio.volume = 0.2; currentAudioRef.current = audio; audio.play(); }; const handleGameStateChange = (newState) => { if (newState === gameState) return; // Prevent duplicate state changes if (gameState === GameState.TIME_UP) return; // Prevent state change if time is up if (newState === GameState.GAME_OVER) { playSound(SOUND_EFFECTS.GAME_OVER); } else if (newState === GameState.TIME_UP) { playSound(SOUND_EFFECTS.TIME_UP); } setGameState(newState); }; const generateTargets = () => { const center = player.getCenterPoint(); const baseTargets = 3; const maxTargets = 6; const targetIncrease = Math.floor(score / 3); const badTargetCount = Math.min(baseTargets + targetIncrease, maxTargets); const minSpawnDistance = 100; const maxSpawnDistance = 200; const screenWidth = 418; const screenHeight = 600; const screenPadding = 40; const minTargetSpacing = 50 + Math.min(score * 2, 30); // Spacing decreases with score const constrainToScreen = (x, y) => ({ x: Math.min(Math.max(x, screenPadding), screenWidth - screenPadding), y: Math.min(Math.max(y, screenPadding), screenHeight - screenPadding) }); const isValidPosition = (x, y, existingTargets, isGoodTarget = false) => { // Check if position is too close to player parts if (!isGoodTarget) { // Only check for bad targets const tooCloseToPlayer = player.getParts().some(part => { const dx = part.x - x; const dy = part.y - y; const distance = Math.sqrt(dx * dx + dy * dy); return distance < 100; // Minimum 100px from any player part }); if (tooCloseToPlayer) return false; } // Check distance from existing targets return !existingTargets.some(target => { const dx = target.x - x; const dy = target.y - y; const distance = Math.sqrt(dx * dx + dy * dy); // Increase spacing between good and bad targets const requiredSpacing = isGoodTarget || target.isGood ? minTargetSpacing * 1.5 : minTargetSpacing; return distance < requiredSpacing; }); }; const findValidPosition = (angleBase, existingTargets, isGoodTarget = false) => { let attempts = 0; const maxAttempts = 15; while (attempts < maxAttempts) { // Completely random angle for more unpredictability const angle = Math.random() * Math.PI * 2; // Random distance based on score and target type const distance = isGoodTarget ? // Good targets spawn 1.5x further away (minSpawnDistance * 1.5) + Math.random() * ((maxSpawnDistance * 1.5) - (minSpawnDistance * 1.5)) * (1 - Math.min(score * 0.03, 0.4)) : // Bad targets spawn in normal varying distances minSpawnDistance + Math.random() * (maxSpawnDistance - minSpawnDistance); const rawPos = { x: center.x + Math.cos(angle) * distance, y: center.y + Math.sin(angle) * distance }; const pos = constrainToScreen(rawPos.x, rawPos.y); if (isValidPosition(pos.x, pos.y, existingTargets)) { return pos; } attempts++; } // If no valid position found, try a different base angle const newAngle = angleBase + Math.PI / 2; const rawPos = { x: center.x + Math.cos(newAngle) * minSpawnDistance, y: center.y + Math.sin(newAngle) * minSpawnDistance }; return constrainToScreen(rawPos.x, rawPos.y); }; const targets = []; // Spawn bad targets with random positioning for (let i = 0; i < badTargetCount; i++) { const pos = findValidPosition(0, targets, false); targets.push(new Target(pos.x, pos.y, false)); } // Spawn good target with strategic positioning const goodPos = findValidPosition(0, targets, true); targets.push(new Target(goodPos.x, goodPos.y, true)); return targets; }; const [targets, setTargets] = useState(generateTargets); const [inputHandler] = useState(new InputHandler()); const [hoveredPart, setHoveredPart] = useState(null); const [isDragging, setIsDragging] = useState(false); const requestRef = React.useRef(); const previousTimeRef = React.useRef(); const mousePositionRef = React.useRef({ x: 0, y: 0 }); useEffect(() => { const handleGlobalMouseUp = () => { if (isDragging) { setIsDragging(false); inputHandler.deselectPart(); cancelAnimationFrame(requestRef.current); } }; window.addEventListener('mouseup', handleGlobalMouseUp); return () => { window.removeEventListener('mouseup', handleGlobalMouseUp); cancelAnimationFrame(requestRef.current); }; }, [isDragging, inputHandler]); const handleStyle = { position: 'absolute', width: '40px', height: '40px', transform: 'translate(-50%, -50%)', cursor: 'pointer', userSelect: 'none', WebkitUserSelect: 'none', }; const renderTubes = () => { const lines = []; const center = player.getCenterPoint(); for (let i = 0; i < parts.length; i++) { const currentPart = parts[i]; const nextPart = parts[(i + 1) % parts.length]; // Calculate the midpoint between the two parts const midX = (currentPart.x + nextPart.x) / 2; const midY = (currentPart.y + nextPart.y) / 2; // Pull the control point toward the center const pullStrength = 0.8; // Adjust this value to control the curve strength const controlX = midX + (center.x - midX) * pullStrength; const controlY = midY + (center.y - midY) * pullStrength; // Create a quadratic Bezier curve path const path = `M ${currentPart.x} ${currentPart.y} Q ${controlX} ${controlY} ${nextPart.x} ${nextPart.y}`; lines.push( ); } return lines; }; const animate = (time) => { if (previousTimeRef.current !== undefined) { if (isDragging && inputHandler.getSelectedPart()) { // Check for collisions with targets let goodTargetCollected = false; // First check tube collisions with bad targets for (let i = 0; i < parts.length; i++) { const currentPart = parts[i]; const nextPart = parts[(i + 1) % parts.length]; targets.forEach(target => { if (!target.isGood && !target.isGracePeriodActive()) { // Only check active red targets // Check if line segment intersects with target circle const dx = nextPart.x - currentPart.x; const dy = nextPart.y - currentPart.y; const len = Math.sqrt(dx * dx + dy * dy); // Calculate the closest point on the line segment to the target const t = Math.max(0, Math.min(1, ( (target.x - currentPart.x) * dx + (target.y - currentPart.y) * dy ) / (len * len))); const closestX = currentPart.x + t * dx; const closestY = currentPart.y + t * dy; // Check distance from closest point to target const distanceToTarget = Math.sqrt( Math.pow(closestX - target.x, 2) + Math.pow(closestY - target.y, 2) ); if (distanceToTarget < target.radius * 0.8 + 5) { // Reduced hit box for tube collisions handleGameStateChange(GameState.GAME_OVER); return; } } }); } // Then check part collisions with targets const collidingTargets = targets.filter(target => { if (target.collected) return false; // Skip already collected targets const colliding = parts.some(part => { const dx = part.x - target.x; const dy = part.y - target.y; const distance = Math.sqrt(dx * dx + dy * dy); // Significantly reduced hit box for part collisions const collisionRadius = target.isGood ? target.radius + 10 : // Reduced size for good targets target.radius * 0.6 + 10; // Further reduced hit box for bad targets return distance < collisionRadius; }); if (colliding) { target.collected = true; // Mark as collected if (target.isGood) { goodTargetCollected = true; // Play random score sound const randomSound = SCORE_SOUNDS[Math.floor(Math.random() * SCORE_SOUNDS.length)]; playSound(randomSound); setScore(prevScore => { const newScore = prevScore + 1; if (newScore > highScore) { setHighScore(newScore); localStorage.setItem('highScore', newScore.toString()); } return newScore; }); } else if (!target.isGracePeriodActive()) { handleGameStateChange(GameState.GAME_OVER); } } return colliding; }); if (collidingTargets.length > 0) { if (goodTargetCollected) { // If good target was collected, start grace period for new targets const newTargets = generateTargets(score); newTargets.forEach(target => { if (!target.isGood) { target.startGracePeriod(); } }); setTargets(newTargets); } else { // If bad target was collected, just remove that target setTargets(targets.filter(t => !collidingTargets.includes(t))); } } const newParts = player.movePart( inputHandler.getSelectedPart(), mousePositionRef.current.x, mousePositionRef.current.y ); setParts([...newParts]); } } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [isDragging]); // Only re-run the effect if isDragging changes // Timer effect useEffect(() => { let timerInterval; if (gameState === GameState.PLAYING) { timerInterval = setInterval(() => { setTimeRemaining(prev => { if (prev <= 1) { handleGameStateChange(GameState.TIME_UP); return 0; } return prev - 1; }); }, 1000); } return () => clearInterval(timerInterval); }, [gameState]); const handleMouseMove = (e) => { const rect = e.currentTarget.getBoundingClientRect(); mousePositionRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top }; }; const handleRestartGame = () => { // Get the current high score from localStorage before resetting const savedHighScore = localStorage.getItem('highScore'); setHighScore(savedHighScore ? parseInt(savedHighScore, 10) : 0); setParts(player.getParts()); setTargets(generateTargets()); setTimeRemaining(GAME_DURATION); setGameState(GameState.PLAYING); setScore(0); // Restart background music if (bgMusicRef.current) { bgMusicRef.current.currentTime = 0; bgMusicRef.current.play(); } }; // Initialize background music useEffect(() => { bgMusicRef.current = new Audio('https://play.rosebud.ai/assets/snd_track_miami_daisuke.mp3?rf8P'); bgMusicRef.current.loop = true; bgMusicRef.current.volume = 0.1; // Decreased volume by double (from 0.3) bgMusicRef.current.play(); return () => { if (bgMusicRef.current) { bgMusicRef.current.pause(); bgMusicRef.current = null; } }; }, []); return (

{parts.map(part => (

{ e.preventDefault(); setIsDragging(true); inputHandler.selectPart(part); }} onDragStart={(e) => { e.preventDefault(); }} onMouseEnter={() => setHoveredPart(part)} onMouseLeave={() => { setHoveredPart(null); if (!isDragging) { inputHandler.deselectPart(); } }} /> ))}

Time: {timeRemaining}s

Score: {score}

High Score: {highScore}

{(gameState === GameState.GAME_OVER || gameState === GameState.TIME_UP) && (

{gameState === GameState.TIME_UP ? "Time's Up!" : "Game Over!"}
You got {score} points! {score === highScore && score > 0 && (
New High Score!
)}

)}

); }; const App = () => { return (

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

{gameState === GameState.TIME_UP ? "Time's Up!" : "Game Over!"} You got {score} points! {score === highScore && score > 0 && ( New High Score! )}

{gameState === GameState.TIME_UP ? "Time's Up!" : "Game Over!"}
You got {score} points! {score === highScore && score > 0 && (
New High Score!
)}