# CSD Unit 3 Lesson 21 Debugging help

When my student runs the code the sprites are not visible unless he changes the background to White. I can’t figure out whats wrong anyone have an idea.

//GAME SETUP
// Create the sprites
// set velocity for the obstacle and the target
var player = createSprite(150, 350);
player.setAnimation(“frog”);
var target = createSprite(500, randomNumber (300,200));
target.setAnimation(“fly”);
var obs = createSprite(500, 350);
obs.setAnimation(“mushroom”);

//create the variables
var score = 0;
var health = 100;

function draw() {
// BACKGROUND
var sky = createSprite(200, 200);
sky.setAnimation(“sky”);
sky.scale = 5;
// draw the ground and other background
var ground = createSprite(200, 200);
ground.setAnimation(“ground”);
ground.scale = 5;

// SPRITE INTERACTIONS
// if the player touches the obstacle
if (obs.isTouching(player)) {
health = health - 1;
}
// the health goes down, and the obstacle turns

// if the player touches the target
// the score goes up, the target resets
if (target.isTouching(player)) {
score = score + 1;
}

// JUMPING
// if the player has reached the ground
// stop moving down
if (player.y == 350) {
player.velocityY = 0;
}

// if the player presses the up arrow
// start moving up
if (keyWentDown(“space”)) {
player.velocityY = -10;
}

// if the player reaches the top of the jump
// start moving down
if (player.y <= 200) {
player.velocityY = 10;
}

//If the player touches the mushroom, tilt
obs.x = obs.x - 14;
if (obs.isTouching(player)) {
obs.rotation = 45;
}
//fly
target.x = target.x - 12;
if (player.isTouching(target)) {
target.y = randomNumber(300, 200);
target.x = 500;
}
if (target.x < -25) {
target.y = randomNumber(300,200);
target.x = 500;
}

// LOOPING
// if the obstacle has gone off the left hand side of the screen,
// move it to the right hand side of the screen
if (obs.x < -25) {
obs.x = 500;
obs.rotation = 0;
}

// if the target has gone off the left hand side of the screen,
// move it to the right hand side of the screen

// DRAW SPRITES
drawSprites();

// SCOREBOARD
// add scoreboard and health meter
fill(“black”);
textSize(20);
text(“score:”, 280, 45);
text (score, 350, 45);
fill(“black”);
textSize(20);
text(“Health:”, 280, 30);
text (health, 350, 30);
// GAME OVER
// if health runs out
// show Game over
if (health < 0) {
background(“black”);
fill(“green”);
textSize(50);
text(“Game Over!” , 40, 200);
}
}

Hi @rgreep,

I am guessing that it is because the background is being drawn last in the list of sprites and it is drawn repeatedly (since it is in the draw loop with the var sky). Game Lab, and most tools like this, draw the sprites to the screen in layers of sorts with the “layer in the front” the last sprite listed in the code. If your student moves the following code to the 1st line of code, it should work fine:
var sky = createSprite(200, 200);
sky.setAnimation(“sky”);
sky.scale = 5;

Good luck!
~Michelle

thanks yes that is the fix I figured it out yesterday fortunately. I appreciate the reply, I knew it was something simple we were missing.

1 Like