Exemplar code for Unit 3?

Activity bubble 9 was one of the more difficult activities…at least for me. I ended up using if…else to hide the sprite again and realize that students haven’t learned that at that point. Are there exemplar examples of code for teachers to be sure both student and teacher are on the right track and understanding the intent of the activity?

1 Like


You should be able to complete this with just an if statement that calls the different sprite animation based on the arrow key pressed. For example:

if (keyDown("down")) { bug.y = bug.y + 1; bug.setAnimation("bee_down"); }

In this case I have 4 different setAnimation sprites (“bee_down”, “bee_up”, “bee_right” and “bee_left”) that are all called when a key is pressed and stay until another key is pressed to change the sprite.

I don’t have any examples, but bubble 9 is the direction control and then bubble 10 are additional challenges.

Hope that helps - please reach out if you have additional questions!


I took out the else for the left key button but now I get the “missing sprite” square and he doesn’t disappear when the other keys are pressed. The others don’t have that square but they still have the else.

Also, when the other sprites appear, they always appear at 200 200 instead of where the last sprite was placed; however, that might be beyond the scope of the activity.

Here is mine: https://studio.code.org/projects/gamelab/pQR2AproRGOfOFgDmww-ruKHf0znuDIpc0rOlZTQ6CQ

Thanks! These are questions I have so I assume my kids will have them as well.


I see the issue, you’ve created multiple sprites - rather than creating one sprite and change the animation to the certain sprite animation.

For your example: You’d have a sun created at 100, 100, then created 4 separate sprites that are moved when pressing up, down, left, right.

Ideally you’d like: A sun created at 100, 100, then a single sprite (bee) created at 200, 200, then once the user pressed the up arrow, the code would switch the bee sprite to the bee_up animation and subtract one from the y value (to move up).

var sun = createSprite(100,100); // creates the sun
sun.setAnimation("sun.png_1"); // sets the sun as the sprite animation
var bee = createSprite(200, 200); // creates the bee/bug
bee.setAnimation("bee_left"); // sets the bee/bug as the sprite animation

function draw() {
background("white"); // draw the white background first, then everything on top of it
if (keyDown("left")){ // if the left key is pressed...
bee.x = bee.x -1; // the bee sprite will subtract one from the x value to move to the left
bee.setAnimation("bee_left"); // the bee/bug animation (or costume) will change to the bee_left animation (or costume)
if (keyDown("right")) { // same as left but right
bee.x = bee.x + 1;// same as left but right (so add 1 to x value)
bee.setAnimation("bee_right"); // the bee/bug animation (or costume) will change to the bee_right animation (or costume)
if (keyDown("up")) {
bee.y = bee.y -1;// subtract 1 to move up
bee.setAnimation("bee_up"); // the bee/bug animation (or costume) will change to the bee_up animation (or costume)
if (keyDown("down")) {
bee.y = bee.y +1; // add 1 to move down the screen
bee.setAnimation("bee_down"); // the bee/bug animation (or costume) will change to the bee_down animation (or costume)
sun.rotation=sun.rotation + 0.5; // will modify the sun sprite
drawSprites(); // draws the sun and 1 bee/bug sprite

I hope that helps!


Huge help and easy to fix with your explanation that I only need to create one sprite and set a different animation in each conditional!! Thank you!