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 8: Random Apple Position

User Story: As a player, I want the apple to appear in different locations so that I have to search for it and the game is more engaging.

What You’ll Do

Add state variables for apple position and randomize the position on each interaction.

Instructions

• Create state variables appleX and appleY with initial value of 0
• Create a randomSpot() function that:
  • Sets appleX to a random value between 0 and 400
  • Sets appleY to a random value between 0 and 600
• Call randomSpot() in both clickTarget and missTarget functions
• Add left and top properties to the appleStyle object
• Test that the apple moves to different positions

💪 Practice Challenge: This level is similar to Level 7. Try to complete it on your own using the same patterns!

✅ Check

1. Click the apple - it should move to a new random location
2. Click the background - apple should also move
3. The apple should stay within the game board boundaries
4. Both size and position should change simultaneously
5. If apple goes off-screen:
   • Check your random ranges (400 for X, 600 for Y)
   • Remember the game board is 500x700

CSS Positioning Review:

• position: absolute allows us to place elements anywhere
• left sets distance from the left edge
• top sets distance from the top edge
• Coordinates (0, 0) are at the top-left corner

---