Project 2.8: Click
Click on the image to score points


  • Create a program that displays at least one moving image

    • The image can move in any pattern you want. It should either bounce or wrap when it would attempt to leave the screen.

    • When the user clicks on the image, the image instantly teleports to a new, random location and the user earns a point

  • Your program must have a background that is also an image of your choice

  • At the top of the screen, you must display:

    • The user's current score

    • The amount of time left in seconds

      • The user starts with a maximum of 20 seconds (1200 frames)

  • When time is up...

    • The image should stop moving and not respond to clicks

    • You should display one of three messages to the user rating their performance.

      • Ex: An okay score might say, "Not Bad!" while a high score would say, "Great Job"

FAQ / Tips

Breaking It Up Into Steps

    1. Find your background image and moving image

    2. Display them both on the screen in a stationary way

    3. Make your image move

    4. Make your image bounce off the edges or wrap

    5. When the user clicks on the image, have it move to a new place

    6. Make a score variable and display it on the screen

    7. When the user clicks on the image, gain a point

    8. Make a timeLeft variable and display it on the screen in frames

    9. Make your timeLeft variable decrease every frame as long as it is greater than zero

    10. Make your timeLeft variable display in seconds

    11. The image should only move and respond to clicks when timeLeft is greater than zero.

    12. If timeleft is zero, display a message to the user rating their performance

How do I detect if a user clicks in the image?

    • You'll need an if statement with four conditions all joined by AND statements:

      • mouseX > xPos

      • mouseX < xPos + your image's width

      • mouseY > yPos

      • mouseY < yPos + your image's height

    • You can find a much more detailed discussion of this in the Coder's Handbook on Mouseover and Clicks

  • How do I convert from frames to seconds?

    • There are 60 frames in a second. So... divide by 60.

  • How do I make my program "stop" when I hit the end

    • Don't think of it as stopping the movement. Rather, you'll only allow the movement to happen if there is time left. To put it plainly: you'll wrap a section of your code in an if statement that checks timeLeft.


Click here to download a running version of the program. <TBD>