21. Star-Circle

We will make a simple game where you control a circle and try to surround a star.

• The center of the circle follows the mouse.
• Clicking changes the circle between solid and outline.
• When the solid circle completely surrounds the star, you win.
• My images below are based on a 400x200 scene.

We will call the structure scg for “star circle game”.

1. Write a data description for scg. Make sure to include the type and human-understandable purpose for each field. (In class they got called stp, cp, and fill.)
2. Write an example scg that represents the initial state, shown on the left, where the star is centered at (50,75) and the outline circle is centered at (300,100). Store it in a variable ex-a.
3. Write a check-expect for the mouse handler mh that shows what happens when you are in state ex-a and:
   1. Move the mouse to (290,80).
   2. Click at location (292,75). Call the resulting state ex-c.
4. Write the part of the mouse handler to handle movement.
5. Write another check-expect for the mouse handler that shows what happens when you are in the state ex-c and click at (300,100). The circle should change back to an outline.

There is a video showing the game in action.

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/TV34itNilb8?autoplay=0&controls=1&end=0&loop=0&mute=0&start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="Star-Circle game demo video"
  ></iframe>
</div>