codex-lv3-may-2025

Level Navigation: 1

18⚡

Level 18: Challenge Extensions ⚡

CHALLENGE LEVEL

User Story: As a developer, I want to implement advanced features so that I can challenge myself and create a more impressive game.

What You’ll Do

Choose from these advanced challenges to extend your game.

Challenge Options

Challenge 1: Game Over Condition

Difficulty: ⭐ Easy

Add a game over condition when lives reach 0.

Instructions:

Add conditional rendering for when lives <= 0
Show a “Game Over!” message
Hide the apple
Display final score
Optionally add a restart button

Hint: Conditional structure

if (lives <= 0) {
  return <GameOverScreen score={score} />
}

Challenge 2: Restart Functionality

Difficulty: ⭐ Easy

Add a button to restart the game.

Instructions:

Create a restartGame() function
Reset all state variables to initial values
Add a restart button (visible on win or game over)
Style the button

Hint: Reset function

function restartGame() {
  setScore(0)
  setLives(3)
  setAppleSize(100)
  setAppleX(0)
  setAppleY(0)
}

Challenge 3: High Score with localStorage

Difficulty: ⭐⭐ Medium

Track and display the highest score using browser storage.

Instructions:

Use localStorage.getItem() and setItem()
Create state for highScore
Update high score when game ends
Display high score in stats or on win screen

Hint: localStorage usage

// Load high score on mount
const [highScore, setHighScore] = useState(() => {
  return parseInt(localStorage.getItem('highScore')) || 0
})

// Save when game ends
if (score > highScore) {
  setHighScore(score)
  localStorage.setItem('highScore', score)
}

Challenge 4: Sound Effects

Difficulty: ⭐⭐ Medium

Add sound effects for clicks, misses, and winning.

Instructions:

Find or create sound files
Use HTML5 Audio API or <audio> elements
Play sounds on different game events
Consider adding a mute button

Hint: Playing sounds

const clickSound = new Audio('/click.mp3')

function clickTarget(event) {
  event.stopPropagation();
  clickSound.play()
  setScore(score + 1)
  // ... rest of function
}

Challenge 5: Timer/Countdown Mode

Difficulty: ⭐⭐⭐ Hard

Add a timer that counts down, creating urgency.

Instructions:

Add state for timeRemaining
Use useEffect with setInterval for countdown
Game ends when time reaches 0
Display timer in stats
Clean up interval on unmount

Hint: Timer with useEffect

useEffect(() => {
  if (timeRemaining > 0) {
    const timer = setInterval(() => {
      setTimeRemaining(time => time - 1)
    }, 1000)
    
    return () => clearInterval(timer)
  }
}, [timeRemaining])

Challenge 6: Difficulty Levels

Difficulty: ⭐⭐⭐ Hard

Add Easy/Medium/Hard difficulty levels.

Instructions:

Create difficulty selection screen
Adjust game parameters based on difficulty:
- Easy: Larger apples, slower changes
- Medium: Current settings
- Hard: Smaller apples, more lives lost
Store difficulty in state
Allow changing difficulty

Challenge 7: Animations

Difficulty: ⭐⭐⭐ Hard

Add smooth animations for apple movement and size changes.

Instructions:

Use CSS transitions for smooth size changes
Consider React Spring or Framer Motion for animations
Animate apple movement between positions
Add particle effects on click

Hint: CSS transitions

.apple-target {
  transition: all 0.3s ease-in-out;
}

Challenge 8: Mobile Support

Difficulty: ⭐⭐ Medium

Make the game work well on mobile devices.

Instructions:

Add touch event support
Make game board responsive
Adjust sizes for smaller screens
Test on mobile devices

✅ Check

Choose at least one challenge to implement
Test your new feature thoroughly
Update your README with new features
Commit your changes with descriptive messages
Consider adding screenshots or GIFs