Unit 3 Interactive card background help needed

I have a student who create his interactive card. His background is blue. Then he has shapes to complete his background. After the user has interacted with the card, a message (text) is supposed to show above (over) where the shapes are. It works if we move the text to where the blue background is, but is hidden if we move it to the bottom where the shapes are.

I was thinking that the shapes should be part of the background, but not sure how to do it. Or is there a better way.

Could you post the link to the code? It really helps to better answer your questions. Thanks!

This is his code. He want the text that says, “Press spacebar…” to be at coordinates 50, 350, but when he changes to those coordinates, the line it is hidden behind his shapes.

var dirt_grass_1 = createSprite(390, 364);
dirt_grass_1.setAnimation(“dirt_grass_1”);
dirt_grass_1.width = 777;
dirt_grass_1.height = 230;
var tree = createSprite(340, 248);
tree.setAnimation(“tree”);
tree.height = 763;
tree.width = 454;
var target = createSprite(302, 169);
target.setAnimation(“target”);
target.width = 70;
target.height = 53;
var archerjoe_1 = createSprite(57, 180);
archerjoe_1.setAnimation(“archerjoe_1”);
archerjoe_1.scale = 4;
archerjoe_1.width = 100;
archerjoe_1.height = 100;
var bow = createSprite(93, 248);
bow.setAnimation(“bow”);
bow.rotation = 320;
var arrow = createSprite(131, 250);
arrow.setAnimation(“arrow”);
arrow.scale = 0.9;
arrow.rotation = 280;
function draw() {
//sky
background(“blue”);

textFont(“Arial”);
fill(rgb(255, 255, 255));

if (mouseWentDown(“leftButton”)) {
arrow.x = arrow.x + 10;
arrow.y = arrow.y - 3.8;
}
if (arrow.x > 258) {
textSize(23);
text(“winner winner chicken dinner”, 16, 47);
textSize(30);
text(“press space to return to bow”, 50, 250);
}
if (keyWentDown(“space”)) {
arrow.x = 131;
arrow.y = 250;
}

drawSprites();
}

My apologies. I reread his code, and it is NOT a shape, but sprites! The sprites are already there when the interaction takes place. The text should be on top of those sprites. HELP?
(https://studio.code.org/projects/gamelab/X9cOzLjxT40fes5AFOBLDyH40E7XBFhoWxoudqW3GHM)

Mrs. Fredericks,

This is a common issue - text isn’t sprites so when you are drawing the sprites after the text, they are drawing them on top and you are losing the text.

Change the order of the code (move all text related code below the drawSprites();) and let us know if that works (it worked for me on the project you shared but want to make sure!)

Brad

That worked! Can’t believe it was that simple!
Thank you so much!
Sheila

1 Like