Jump to content

when object reaches center of the stage when animated, do something


Recommended Posts

goal: when the gem reaches the center of the stage, write this is it in the console.

This is what I have:

red.position.set((text1a.width + text1b.width + 540), 0);
if (red.position.x == 250) {console.log("this is it")};

function gameLoop() {

red.x -= 1;



This is not firing. I think its because the if function is being called when it isnt registering that it has moved from the original position but when i put it in the gameloop(), it is firing constantly and gives an error in an infinite loop. What am I missing??


Link to comment
Share on other sites

Hm, not sure what you mean with firing, that term is commonly used for events. Do you mean the if-branch of your condition won't be evaluated? To be short, it can't. The if-condition is checked only once, that is directly after you set red's initial position. Afterwards you keep modifying the position in the game loop, but never check the position anymore.

I believe you think that if-statement gets evaluated every time the position changed (called the watcher pattern). That is not true. It gets only checked when the JS interpreter reaches the line that contains the if-statement. Watching a variable for changes is possible, but the exact mechanics vary with the browser you choose to run the script, and it's not exactly trivial (at least last time I looked, maybe my information is outdated?).

To solve your problem at hand, you need to put your if-condition in some place it can be reached.

// initialising object red
red.position.set(startX, startY)
red.moving = true

function gameLoop() {
  if (red.moving && red.position.y > 250) {
    red.position.x -= 1
  else {
    red.moving = false
    console.log("destination reached")

Now every time the game loop is evaluated, the position is checked, too. To avoid logging "destination reached" every time, you need to stop checking the position once it has reached the 250px position.

Of course, if you want to restrain a number of objects that way, you might not want to do type that for all objects

function moveElement(el, dx, dy) {
  if (!el.moving) return

  el.position.x += dx
  el.position.y += dy
  if ( el.position.x < (el.boundaries.minx || -Infinity) ||
       (el.boundaries.maxx || Infinity) < el.position.x ||
       el.position.y < (el.boundaries.miny || -Infinity) ||
       (el.boundaries.maxy || Infinity) < el.position.y ) {
    console.log("Boundaries reached")
    el.moving = false

red.moving = true
red.boundaries.miny = 250

function gameLoop() {
  moveElement(red, -1, 0)

Of course, this is simplified and not exactly optimised, but not knowing about your project it's as close as I can get.

It also seems like you're pretty new to JS or programming in general, so I kept my examples quite simple and I also advise you to check out some of the great JS learning guides linked in the main forum. If I happen do be wrong, no offense meant!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...