Coding issue using mousepressed over

CS Discoveries
1

I have a couple of students who have run into a problem. They are trying to have a user click on the Start Game button using mousepressedover. However, it is not changing the screen. Here is the code below. What could they be doing wrong? I couldn’t find anything wrong with it. Could you help?

=================================
var Background = createSprite(200, 200);
Background.setAnimation(“paper”);
Background.scale = 2.15;
drawStart();

if (mousePressedOver(“StartGame”) == true) {
“StartGame”.visible = false;
drawStage();
}
function drawStage() {
fill(rgb(200,200,200));
strokeWeight(3);
rect(0, 350, 400, 200);
rect(50, 250, 100, 10);
rect(250, 250, 100, 10);
}
function drawStart() {
var StartGame = createSprite(200, 300);
StartGame.setAnimation(“Start_Game”);
StartGame.scale = 0.70;
StartGame.setCollider(“rectangle”, -5, -5, 400, 155);
StartGame.debug = true;
}
drawSprites();

2

Hi Sharon,

I tried running the code and found a couple bugs…

  1. StartGame is a variable and should not be in quotes (unlike the names of the animations, like “paper”, that does have to be in quotes)
  2. The program needs to constantly be checking if mousePressedOver is true, meaning that if-statement needs to be in a “draw” loop.
  3. StartGame needs to be declared/defined in the main part of the code before it is used - well I’m not sure that’s the exact requirement, but I was getting an error when “var StartGame” was in the drawStart function. I don’t know the exact ins and outs of how JavaScript is interpreted…

The following is the same code with the changes above implemented…

===========================================
var Background = createSprite(200, 200);
Background.setAnimation(“paper”);
Background.scale = 2.15;
var StartGame = createSprite(200, 300);
drawStart();

function draw() {
if (mousePressedOver(StartGame) == true) {
StartGame.visible = false;
drawStage();
}
}

function drawStage() {
fill(rgb(200,200,200));
strokeWeight(3);
rect(0, 350, 400, 200);
rect(50, 250, 100, 10);
rect(250, 250, 100, 10);
}
function drawStart() {

StartGame.setAnimation(“Start_Game”);
StartGame.scale = 0.70;
StartGame.setCollider(“rectangle”, -5, -5, 400, 155);
StartGame.debug = true;
}
drawSprites();

3

@sharon.elzey

Hi Sharon and Frank,

I agree with Frank on (1) and (2), and I’d also add that “drawSprites()” needs to be in the draw loop, too. The sprites need to be redrawn each time the draw loop runs, or else you will not be able to see the changes. In this student’s program, there is no draw loop at all, so the program will never change.

Any variable that is used throughout a program should be declared at the beginning of the program. If a variable is declared inside a function (as StartGame is declared inside the drawStart() function), it can only be used inside the function. It was a good idea to use abstraction for the set up of the sprite, but the student will need to move the variable declaration of StartGame to the beginning of the program.

In general, students may want to follow these guidelines:

  1. Declare all the variables and create all the sprites that you will use at the beginning of the program. (You can make the ones you don’t need yet invisible in the next step.)
  2. Do all the general “set up” of placing things where you want them in the beginning, initial velocities, etc.
  3. Inside the draw loop…
       a. Make any changes that will be happen as the program is running. In general, all of your conditionals/user input should be here, because you are checking the conditions and checking for user input as the program runs.
       b. Draw your background, any text/images that should appear, and draw the sprites again.
  4. Define the functions that you will use. It’s okay to define a function after you use it in your program.

Even though programmers may sometimes choose to create sprites in the middle of a program or declare variables inside a function, it might be better for students to avoid these things for now, because they rely on an understanding of variables that’s outside the scope of the course.

We’ll keep this student’s experience in mind as feedback on how we can better reinforce proper structuring of programs in future revisions of the course.

Thanks,
Elizabeth