Sprite Following the Mouse

In many programs, the visual elements on the screen need to interact—follow each other, avoid each other, react a certain way when they meet each other, etc. In this lab, you will program two sprites. One sprite will follow your mouse. The other sprite will chase the first. When they meet, they will have a short conversation.

animation of a cartoon tiger chasing a cartoon bat that is following the mouse pointer

On this page, you will program the first sprite to follow your mouse and program the second sprite to point in the direction of the first sprite in preparation for following it.

Following the Mouse

  1. "U1L5-SpriteChase"Create a new project called U1L5-SpriteChase

    Creating a New Snap! Project

    1. Open Snap!.
      If you already have Snap! open and there is a project open, follow these steps first:
      1. If necessary, save your open work in Snap!.
      2. Choose "New" from the Snap! File menu, File menu button.
      3. Click "Yes" to open a new project (and close the open one).
    2. Choose "Save As..." from the Snap! File menu, File menu button.
    3. Type the project name.
    4. Click the "Save" button.
  2. Talk with Your Partner Read and think about this script before you build it. What do you expect it to do?
    when green flag clicked{forever{go to x:(mouse x) y:(mouse y)}}
  3. Now build the script and run it. Move your mouse around the stage while the program is running. What does the forever block do?
    To stop your script, click the red stop sign: stop button
  4. Talk with Your PartnerDoes the program work the way you expected?

Diana Macias, an American born of Mexican parents, manages a team of 20 engineers that design visual elements for Twitter (GIFs, stickers, and polls). She is the co-founder of Twitter Able, a group at Twitter for disabled employees and allies, and has served as the co-chair of Twitter's Latinx group, Twitter Alas. Macias has a B.S. in Computer Science and Mathematics from California State University, East Bay and over 15 years of experience in software development with a focus on user experience.

Article: Los 20 Latinos Más Influyentes en Tecnología (English)

Programming a Second Sprite

  1. Create a second sprite by clicking on the add a new turtle sprite button just below the stage.  
    The new sprite, automatically named Sprite(2), appears on the stage. It's brand new, so it has no scripts. The pictures of the sprites beneath the stage let you select the sprite you want to program.
  2. To make your sprite names meaningful, change the name of Sprite to Leader, and change Sprite(2) to Follower.

    Changing the Name of a Sprite

    Look for the name in a gray box above the scripting area. Click inside the name and you'll be able to edit it.
    image of sprite name input field above the scripting area and below the project name

  3. While a script is running, its border lights up. If the running time is short, you may not notice the brief flash.
    Make sure you have the Follower sprite selected. Write a script for Follower so that once the green flag is clicked, it will point toward Leader forever.
    point towards []
  4. Both sprites have scripts that use When 'Green Flag' Clicked, so both of those scripts run when green-flag button is clicked.
    Click green-flag button and check that your scripts do what you intended:
    • Leader always follows your mouse when you move your mouse around.
    • Follower stays in one place, but always points toward Leader.
  5. Save your work