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

[courtneyvigo]

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() {
  requestAnimationFrame(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??

Thanks!

[waechtertroll]

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")
  }
  requestAnimationFram(gameLoop)
}

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.position.set(...)
red.moving = true
red.boundaries.miny = 250

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

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!