Making an Image move in the app clicker game


#1

I have assigned the Clicker Game to my High School students. The code has been working great and we are liking the App Lab. A student has used a for loop to control movement of an image with the mouse click, but we haven’t figured out how to have an image move once we change screens. I thought that putting in a for loop with a setPosition block that has y=y+1 for changing the y position would make an image move. Would you please help with the proper code? Does the for loop need to be put into an event handler?
Thanks so much,
Valerie

https://studio.code.org/projects/applab/_BMTxT_7ZcxvX7cDBjnwqrXb31AVtcccMydNGaxji-4/edit


#2

Hi @valerieadams,

Can you clarify what the student is trying to make happen with the app? Is it part of the assignment?

From your description it sounds like the student wants to animate the movement of an image so it looks like it travels on its own after an event occurs?

Frank


#3

Frank,
Yes, we would like the image to move and thought that setPosition in a loop would do that. No, it is not part of the assignment. Is it possible that the code is not working because it is not being asked for in that assignment?

Please advise

Thank you !


#4

Any ideas?
If it can not be done, that’s fine. The student wanted it to be a part of their game.
Thank you!


#5

The image is not placed on screen2 hence you cannot view it on screen2. The outside loop executes as soon as the program loads and you won’t see the image move since it is happening too quickly. In fact the location of the image that you see when the program starts is set by that for loop. If you want to see the image on screen2, it will be need to added in on screen2.


#6

Thank you so much for your input. I modified the code and I still am not able to make any image move on the screen by using a for loop and setPosition. Is this possible?


#7

The program runs so quickly that you don’t see the movement. You would either need to add some sort of a wait inside the loop or put the loop in an event.


#8

Ok, Could you show me an example that works? It doesn’t seem like that would work either. The only events are clicks, mouse down, etc where the user needs to do something. The student wants to have an image move on the screen. I already have an image moving when I click a button.
Thanks for your help.


#9

@valerieadams

Here is a resource posted by a teacher. I think it may be helpful in your situation.

Andrea


#10

I have modified your code and added a timed loop. Not sure if this is what you want to do. But the image moves on its own.


#11

Yes,thank you so much. We didn’t know why using a loop with setPosition didn’t work. Like you said,it could be because it happens so quickly. I appreciate you sharing that code that work and accomplishes what the student wanted to do for his app.


#12

Yes, this is also very helpful for using in App Lab. Thank you!


#13

Big picture: the topic of animation is a source of confusion both in App Lab AND generally.

Generally speaking you can’t use loops to create animation effects in App Lab - this has to do with the event-driven paradigm of App Lab. If you’re running a loop, that takes over the machine and it can’t do other things in parallel, like listen for events. The source of confusion is of our own making – when you use loops with the Turtle it does cause an animation-like effect. That’s because we did behind the scenes magic to make it seem like you’re using a loop to cause animation. We did that with the thinking that it’s a natural way for students to think about iterative behavior and we wanted to reduce barriers to using loops in the first place - otherwise it’s hard to justify using a loop in an event-driven environment for things besides data processing.

Thus, to make animation work in an event-driven paradigm you have to…use events! That’s what the timedLoop command is for. What timedLoop does is fire an event at a given interval of time. So rather than a continuous loop that takes over the machine, you get to process the code in the event-handling function at every interval.

Hope that makes some kind of big-picture sense.

Baker
CSP Team


#14

Thank you for the very thorough explanation. Yes, I totally understand using loops for the Turtle to demonstrate the “animation” effect… and that events need to be used in app lab. The timedLoop will work just fine for the students’ planned game. I appreciate your clarification.