codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18⚡

19

Level 7: Random Apple Size

User Story: As a player, I want the apple to change size randomly so that the game becomes more challenging and interesting.

What You’ll Do

Create a utility function for random numbers and make the apple size change on each click.

Instructions

• Create a randomNumber(a, b) helper function outside the App component
  • It should return a random integer between a and b
  • Use Math.random() and Math.floor()
• Create state variable appleSize with initial value of 100
• Create a randomSize() function that sets appleSize to a random value between 20 and 100
• Call randomSize() in both clickTarget and missTarget functions
• Create an appleStyle object with dynamic width and height
• Apply the style object to the apple-target div using the style attribute

💡 Code Hints

Need help with random numbers and dynamic styling? Check out these snippets:

Show Me: random number utility function

function randomNumber(a, b) {
  return Math.floor(Math.random() * (b - a) + a);
}

function App() {
  // ... state and functions
}

Show Me: apple size state and function

const [score, setScore] = useState(0)
const [lives, setLives] = useState(3)
const [appleSize, setAppleSize] = useState(100)  // NEW

function randomSize() {
  const randomSize = randomNumber(20, 100)
  setAppleSize(randomSize)
}

Show Me: updated click handlers

function clickTarget(event) {
  event.stopPropagation();
  setScore(score + 1)
  randomSize();  // NEW
}

function missTarget() {
  setLives(lives - 1)
  randomSize();  // NEW
}

Show Me: dynamic style object

const appleStyle = {
  width: appleSize + "px",
  height: appleSize + "px"
}

return (
  <>
    {/* ... stats div ... */}
    <div className='orchard-background' onClick={missTarget}>
      <div className="apple-target" onClick={clickTarget} style={appleStyle}></div>
    </div>
  </>
)

✅ Check

1. Click the apple - it should change to a random size
2. Click the background - apple should also change size
3. Sizes should vary between very small and medium-large
4. The apple should maintain its aspect ratio
5. If size doesn’t change:
   • Check that randomSize() is called in both handlers
   • Verify the style object is applied with style={appleStyle}

How Math.random() works:

• Math.random() returns a decimal between 0 and 1
• Multiply by range (b - a) to scale it
• Add a to shift to desired range
• Math.floor() rounds down to get an integer

---