Help with a code

CS Principles Coding and Debugging Help
1

Help with a code: I have a student who is stuck on a project…

[https://studio.code.org/projects/applab/8A60qASZYhIh00VGtq8vAXI8fzJbKn6MhJPhY07_TBohttps://studio.code.org/projects/applab/8A60qASZYhIh00VGtq8vAXI8fzJbKn6MhJPhY07_TBo?fbclid=IwAR3y9gNDQcfCy3E0ytsW5zqlVuLmSND-pdiUfBVL4-a4t00wjNQB5fKk1uc](https://studio.code.org/projects/applab/8A60qASZYhIh00VGtq8vAXI8fzJbKn6MhJPhY07_TBo<https://studio.code.org/projects/applab/8A60qASZYhIh00VGtq8vAXI8fzJbKn6MhJPhY07_TBo?fbclid=IwAR3y9gNDQcfCy3E0ytsW5zqlVuLmSND-pdiUfBVL4-a4t00wjNQB5fKk1uc)

When you press either the apple or strawberry the other item stops moving too.
They are trying too… When you press the apple- that disappears and goes back to the top, but the strawberry keeps going.

2

HI @jesatch - Welcome to the forum. I looked at the code and the thing that jumps out at me right away is having the onEvents inside functions. That’s usually not a good thing. When an onEvent is inside a function, a new event is created each time the function is called. All of them are trying to execute at the same time when the event occurs. I think that’s probably what you are seeing. I would recommend pulling them out of the functions and see if things work as expected.

3

Thank you!

I have tried that, but I am still finding that both the strawberry and apple freeze when the other is pressed.

4

@jesatch I have passed this on the code.org team.

5

Thank you!
:grinning:

6

Hello,

It looks like your problem is stemming from the timedLoop function. Both strabelle and apple are implementing a timedLoop when they start, but when you click one your student’s invokes the stopTimedLoop command. It is ambiguous which should stop - so both do! In order to fix the problem, the student will have to create unique identifiers for each timedLoop so the computer knows which one to stop each time. There are details about how to do this in the documentation of timedLoop. To find it hover over “timedLoop” in the toolbox, then click “see examples” and read through the first paragraph.

Good luck!

7

Hi :slight_smile:
I had a look at this document but could not see anything about how to individualise the timeloop or stop timeloop. Are you able to share an example of what it should look like?

Also is there away to make the movement look smoother?

Thank you,
Jess

9

In order to individualize timed loops you must store the value returned by your timedLoop() function and then pass this value to the stopTimedLoop() function. For example:

  1. On the top declare 2 variables to store the values of the timedLoops.

var aLoop, bLoop;

  1. In the moveApple method, save the value of the timedLoop and use that value in the stopTimedLoop call.

aLoop = timedLoop( …)
.
.
if (y > 400)
stopTimedLoop(aLoop)
.
.
.
3. Do the same thing in the movestrawbelle() method
bLoop = timedLoop( …)
.
.
if (y > 400)
stopTimedLoop(bLoop)
.
.
.

  1. Do the same thing for the stopTimedLoop in the onEvents.
10

Can you please help me edit the below code!
Now the are moving down the screen but bouncing from left to right like a typewriter as they do it!

onEvent(“staetbtn”, “click”, function( ) {
setScreen(“instruct”);
});
onEvent(“startGame”, “click”, function( ) {
setScreen(“screen2”);
});
onEvent(“startGame”, “click”, function( ) {
hideElement(“strawbelle”);
});
onEvent(“startGame”, “click”, function( ) {
hideElement(“mangio”);
});
onEvent(“startGame”, “click”, function( ) {
hideElement(“strawbelle”);
hideElement(“apple”);
movestrawbelle();
moveapple();
});
var aLoop = timedLoop;
function moveapple() {
var xPos=randomNumber(0,260);
setPosition(“apple”, xPos, -15);
showElement(“apple”);
timedLoop(1000, function() {
var yPos= getYPosition(“apple”);
setPosition(“apple”, xPos, yPos+5);
if (yPos>400){
stopTimedLoop(aLoop);
hideElement(“apple”);
moveapple();
}
});}
onEvent(“apple”, “click”, function( ) {
stopTimedLoop(aLoop);
hideElement(“apple”);
moveapple();
});
var bLoop = timedLoop;
function movestrawbelle() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle”, xPos, -15);
showElement(“strawbelle”);
timedLoop(1000, function() {
var yPos= getYPosition(“strawbelle”);
setPosition(“strawbelle”, xPos, yPos+5);
if (yPos>400){
stopTimedLoop(bLoop);
hideElement(“strawbelle”);
movestrawbelle();
}
});}
onEvent(“strawbelle”, “click”, function( ) {
stopTimedLoop(bLoop);
hideElement(“strawbelle”);
movestrawbelle();
});
speed(100);

Thank you

11

I’ve made changes to this code (changes are in bold). Try this.

12

Thank you for all your help so far!

I am having trouble now with the reload when the game is finished and it returns to screen1.
Upon restarting the game the images do not behave as they did when the game was first played.

var aLoop, bLoop;
var cLoop;
var dLoop;
var eLoop;
var fLoop;
var gLoop;
onEvent(“staetbtn”, “click”, function( ) {
setScreen(“instruct”);
});
onEvent(“startGame”, “click”, function( ) {
setScreen(“screen2”);
});
onEvent(“startGame”, “click”, function( ) {
hideElement(“strawbelle”);
hideElement(“mangio”);
hideElement(“apple”);
hideElement(“boom”);
hideElement(“strawbelle2”);
hideElement(“strawbelle4”);
hideElement(“strawbelle3”);
movestrawbelle();
moveapple();
});
//delay start for strawbelle2
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
movestrawbelle2();
clearInterval(interval1);
}, 10000);
});
//delay start for boom
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
moveboom();
clearInterval(interval1);
}, 30000);
});
//delay start for mangio
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
movemangio();
clearInterval(interval1);
}, 22000);
});
//delay start for strawbelle3
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
movestrawbelle3();
clearInterval(interval1);
}, 15000);
});
//delay start for strawbelle4
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
movestrawbelle4();
clearInterval(interval1);
}, 25000);
});
//var aLoop = timedLoop;
function moveapple() {
var xPos=randomNumber(0,260);
setPosition(“apple”, xPos, -15);
showElement(“apple”);
aLoop = timedLoop(1000, function() { //added aLoop here
var yPos= getYPosition(“apple”);
setPosition(“apple”, xPos, yPos+5);
if (yPos>400){
stopTimedLoop(aLoop);
hideElement(“apple”);
moveapple();
}
});}
onEvent(“apple”, “click”, function( ) {
stopTimedLoop(aLoop);
hideElement(“apple”);
moveapple();
});
//var bLoop = timedLoop; removed this
function movestrawbelle() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle”, xPos, -15);
showElement(“strawbelle”);
bLoop = timedLoop(1000, function() { //added bLoop here
var yPos= getYPosition(“strawbelle”);
setPosition(“strawbelle”, xPos, yPos+100);
if (yPos>400){
stopTimedLoop(bLoop);
hideElement(“strawbelle”);
movestrawbelle();
}
});}
onEvent(“strawbelle”, “click”, function( ) {
stopTimedLoop(bLoop);
hideElement(“strawbelle”);
movestrawbelle();
});
//var cLoop = timedLoop;
function movestrawbelle2() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle2”, xPos, -15);
showElement(“strawbelle2”);
cLoop = timedLoop(1000, function() { //added cLoop here
var yPos= getYPosition(“strawbelle2”);
setPosition(“strawbelle2”, xPos, yPos+60);
if (yPos>400){
stopTimedLoop(cLoop);
hideElement(“strawbelle2”);
movestrawbelle2();
}
});}
onEvent(“strawbelle2”, “click”, function( ) {
stopTimedLoop(cLoop);
hideElement(“strawbelle2”);
movestrawbelle2();
});
//var dLoop = timedLoop;
function movestrawbelle3() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle3”, xPos, -15);
showElement(“strawbelle3”);
dLoop = timedLoop(1000, function() { //added dLoop here
var yPos= getYPosition(“strawbelle3”);
setPosition(“strawbelle3”, xPos, yPos+120);
if (yPos>400){
stopTimedLoop(dLoop);
hideElement(“strawbelle3”);
movestrawbelle3();
}
});}
onEvent(“strawbelle3”, “click”, function( ) {
stopTimedLoop(dLoop);
hideElement(“strawbelle3”);
movestrawbelle3();
});
//var eLoop = timedLoop;
function movestrawbelle4() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle4”, xPos, -15);
showElement(“strawbelle4”);
eLoop = timedLoop(1000, function() { //added eLoop here
var yPos= getYPosition(“strawbelle4”);
setPosition(“strawbelle4”, xPos, yPos+120);
if (yPos>400){
stopTimedLoop(eLoop);
hideElement(“strawbelle4”);
movestrawbelle4();
}
});}
onEvent(“strawbelle4”, “click”, function( ) {
stopTimedLoop(eLoop);
hideElement(“strawbelle4”);
movestrawbelle4();
});
//var fLoop = timedLoop;
function movemangio() {
var xPos=randomNumber(0,300);
setPosition(“mangio”, xPos, -15);
showElement(“mangio”);
fLoop = timedLoop(1000, function() { //added fLoop here
var yPos= getYPosition(“mangio”);
setPosition(“mangio”, xPos, yPos+25);
if (yPos>400){
stopTimedLoop(fLoop);
hideElement(“mangio”);
movemangio();
}
});}
onEvent(“mangio”, “click”, function( ) {
stopTimedLoop(fLoop);
hideElement(“mangio”);
movemangio();
});
//var gLoop = timedLoop;
function moveboom() {
var xPos=randomNumber(0,300);
setPosition(“boom”, xPos, -15);
showElement(“boom”);
gLoop = timedLoop(1000, function() { //added gLoop here
var yPos= getYPosition(“boom”);
setPosition(“boom”, xPos, yPos+25);
if (yPos>400){
stopTimedLoop(gLoop);
hideElement(“boom”);
moveboom();
}
});}
onEvent(“boom”, “click”, function( ) {
stopTimedLoop(gLoop);
setScreen(“screen3”);
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
setScreen(“screen4”);
clearInterval(interval1);
}, 1600);
});
speed(100);
onEvent(“restart”, “click”, function() {
setScreen(“screen1”);
});

13

Hi @jesatch,

I didn’t completely look over the code since I’m not too familiar with running identical events and loops in parallel (to be honest I didn’t know App Lab let us do that without getting incredibly buggy), but I did notice a couple things that might be relevant to the bug:

  1. There’s quite a few variables going on and things running concurrently, but the bomb and reset function seem to reset only a few things. I suspect there are still some things that ran from the initial “Start” click that still need to be reset when the user clicks to try/start again.
  2. I noticed that when “the images do not behave as they did”, specifically they seem to jump back and forth between two x values (hard to track this with the strawberries, but easy to notice with a unique fruit like the apple). For each sprite, the code ever only specifies a single (random) x value. So where is that second x value coming from? My guess is this relates back to issue 1 - probably a variable that’s still running from the first round.

Hope this helps you figure out more specifically where the bug is!

Frank

14

Hi Frank,

Thank you for the advice.
Is there an over all code input that I can use to do a full reset of the program when “Try Again!” is pressed so that it reverts back to the initial code from the beginning?

Regards,
Jess

15

Not that I know of. I believe you’ll need to explicitly track the state of each variable and decide if you need to “reset” those variables.

Be aware that you generally don’t want to define the same variable more than once. I’m not sure what actually happens when you do that - it’s happening in the current code and I wouldn’t be surprised if you’re unable to effectively “reset” a variable if there’s somehow multiple instances of it floating around.

A common occurrence I see of spawning multiple instances of the same variable is defining the variable inside a function. Every time the function gets called, a new instance of the variable is created (or whatever actually happens - I’m not sure how the system deals with that). One way to avoid that is to just define the variable outside of any code that has a chance of being repeated (remember - some stuff that isn’t repeated in your code within one game does get repeated in the following game when the user hits “Start game” - so be careful).

For example, let’s say you have a function that contains this line:
var x = 0;

This is bad because every time the function is called, the computer will try to re-create the variable x.

Instead, separate it so you have this before the function call:
var x;
And then this inside the function:
x = 0;
That way, every time the function is called, it “resets” the variable without creating a new instance.

I also haven’t used the timer functions before and am not sure if those are something that require resetting.

16

reload%20issue
reload issue.jpg2731×1396 618 KB

I am having trouble now with the reload when the game is finished and it returns to screen1.
Upon restarting the game the images do not behave as they did when the game was first played.

20

Since the restart of your game seems to be an issue, I would suggest putting all the initializations of the variables and UI elements (the different fruit images) into one function. Then call that function every time you restart your code. It seems that some parameters of your game are not getting set up correctly for a restart.

21

now none of the other UIs are working except for the initial two.

var aLoop, bLoop;
var cLoop;
var dLoop;
var eLoop;
var fLoop;
var gLoop;
onEvent(“staetbtn”, “click”, function( ) {
setScreen(“instruct”);
});
onEvent(“startGame”, “click”, function( ) {
setScreen(“screen2”);
});
//delay start for strawbelle2
function delaystrawbelle2() {
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
movestrawbelle2();
clearInterval(interval1);
}, 10000);
});
}
//delay start for boom
function delayboom() {
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
moveboom();
clearInterval(interval1);
}, 30000);
});
}
//delay start for mangio
function delaymangio() {
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
movemangio();
clearInterval(interval1);
}, 22000);
});
}
//delay start for strawbelle3
function delaystrawbelle3() {
onEvent(“startGame”, “click”, function( ) {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
movestrawbelle3();
clearInterval(interval1);
}, 15000);
});
}
//delay start for strawbelle4
function delaystraebelle4() {
onEvent(“startGame”, “click”, function() {
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
movestrawbelle4();
clearInterval(interval1);
}, 25000);
});
}
//var aLoop = timedLoop;
function moveapple() {
var xPos=randomNumber(0,260);
setPosition(“apple”, xPos, -15);
showElement(“apple”);
aLoop = timedLoop(1000, function() { //added aLoop here
var yPos= getYPosition(“apple”);
setPosition(“apple”, xPos, yPos+5);
if (yPos>400){
stopTimedLoop(aLoop);
hideElement(“apple”);
moveapple();
}
});}
onEvent(“apple”, “click”, function( ) {
stopTimedLoop(aLoop);
hideElement(“apple”);
moveapple();
});
//var bLoop = timedLoop; removed this
function movestrawbelle() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle”, xPos, -15);
showElement(“strawbelle”);
bLoop = timedLoop(1000, function() { //added bLoop here
var yPos= getYPosition(“strawbelle”);
setPosition(“strawbelle”, xPos, yPos+100);
if (yPos>400){
stopTimedLoop(bLoop);
hideElement(“strawbelle”);
movestrawbelle();
}
});}
onEvent(“strawbelle”, “click”, function( ) {
stopTimedLoop(bLoop);
hideElement(“strawbelle”);
movestrawbelle();
});
//var cLoop = timedLoop;
function movestrawbelle2() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle2”, xPos, -15);
showElement(“strawbelle2”);
cLoop = timedLoop(1000, function() { //added cLoop here
var yPos= getYPosition(“strawbelle2”);
setPosition(“strawbelle2”, xPos, yPos+60);
if (yPos>400){
stopTimedLoop(cLoop);
hideElement(“strawbelle2”);
movestrawbelle2();
}
});}
onEvent(“strawbelle2”, “click”, function( ) {
stopTimedLoop(cLoop);
hideElement(“strawbelle2”);
movestrawbelle2();
});
//var dLoop = timedLoop;
function movestrawbelle3() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle3”, xPos, -15);
showElement(“strawbelle3”);
dLoop = timedLoop(1000, function() { //added dLoop here
var yPos= getYPosition(“strawbelle3”);
setPosition(“strawbelle3”, xPos, yPos+120);
if (yPos>400){
stopTimedLoop(dLoop);
hideElement(“strawbelle3”);
movestrawbelle3();
}
});}
onEvent(“strawbelle3”, “click”, function( ) {
stopTimedLoop(dLoop);
hideElement(“strawbelle3”);
movestrawbelle3();
});
//var eLoop = timedLoop;
function movestrawbelle4() {
var xPos=randomNumber(0,300);
setPosition(“strawbelle4”, xPos, -15);
showElement(“strawbelle4”);
eLoop = timedLoop(1000, function() { //added eLoop here
var yPos= getYPosition(“strawbelle4”);
setPosition(“strawbelle4”, xPos, yPos+120);
if (yPos>400){
stopTimedLoop(eLoop);
hideElement(“strawbelle4”);
movestrawbelle4();
}
});}
onEvent(“strawbelle4”, “click”, function( ) {
stopTimedLoop(eLoop);
hideElement(“strawbelle4”);
movestrawbelle4();
});
//var fLoop = timedLoop;
function movemangio() {
var xPos=randomNumber(0,300);
setPosition(“mangio”, xPos, -15);
showElement(“mangio”);
fLoop = timedLoop(1000, function() { //added fLoop here
var yPos= getYPosition(“mangio”);
setPosition(“mangio”, xPos, yPos+25);
if (yPos>400){
stopTimedLoop(fLoop);
hideElement(“mangio”);
movemangio();
}
});}
onEvent(“mangio”, “click”, function( ) {
stopTimedLoop(fLoop);
hideElement(“mangio”);
movemangio();
});
//var gLoop = timedLoop;
function moveboom() {
var xPos=randomNumber(0,300);
setPosition(“boom”, xPos, -15);
showElement(“boom”);
gLoop = timedLoop(1000, function() { //added gLoop here
var yPos= getYPosition(“boom”);
setPosition(“boom”, xPos, yPos+25);
if (yPos>400){
stopTimedLoop(gLoop);
hideElement(“boom”);
moveboom();
}
});}
onEvent(“boom”, “click”, function( ) {
stopTimedLoop(gLoop);
setScreen(“screen3”);
var seconds = 0;
var interval1 = setInterval(function() {
seconds = seconds + 1;
console.log(seconds + " seconds have elapsed");
setScreen(“screen4”);
clearInterval(interval1);
}, 1600);
});
speed(100);
onEvent(“restart”, “click”, function() {
delaystraebelle4();
delaystrawbelle2();
moveapple();
movestrawbelle();
delayboom();
delaymangio();
delaystrawbelle3();
setScreen(“screen1”);
});
onEvent(“startGame”, “click”, function( ) {
hideElement(“strawbelle4”);
hideElement(“strawbelle3”);
hideElement(“strawbelle2”);
hideElement(“strawbelle”);
hideElement(“mangio”);
hideElement(“boom”);
hideElement(“apple”);
delaystraebelle4();
delaystrawbelle2();
delayboom();
delaymangio();
delaystrawbelle3();
moveapple();
movestrawbelle();
});

22

Unfortunately, you cannot put onEvents inside functions. You need to figure out which variables need to be initialized and create a function to initialize just those variables and positions of the fruits. Whenever, the restart button is clicked, call that function to initialize all the variables and the positions of the fruits.

23

I am still having trouble with this.
Are you able to give me an example?

Thank you,
Jess

25

I looked through the code and played around with it. But, I can’t seem to fix the problem. Have you gone through the different lessons in unit 5? I would recommend going through the exercises prescribed in the curriculum first. As you progress through the lessons, you will find examples of similar apps and concepts that would help you with debugging this game.