Question

I’m learning javascript by using the easeljs library to make a simple game, for school lessons.
I want to make a crosshair give some feedback to the player by showing a small animation while you are pointing at your target, using a hittest I made.

However, when the crosshair touches the target, the animation (should be two little triangles pointing to the middle of the crosshair) seems to be stuck on it’s first frame.

Here is a bit of my code, I put both of these functions inside a ticker function. The functions do what they’re supposed to do (I checked by sending a message to the console.log), but I think the animation is reset as soon as the variable “hitTestControle” is set to true, at every tick.
If you want to check out all of the code, here is a link to the “game”:
http://athena.fhict.nl/users/i279907/achtergrond/achtergrond.html

function hitTest() {
    if(distance(crossHair, block) < 60) {
        hitTestControle = true; 
} else {
        hitTestControle = false;
        console.log(hitTestControle);
    }
}

function hitTestControl() {
    if(hitTestControle == true) {
        crossHair.gotoAndPlay("move");
        console.log("hit");
    } else {
        crossHair.gotoAndPlay("stop");
    }
}

PS: There also seems to be something wrong with this hittest I used.

function distance() {
    var difx = blok.x - crossHair.x;
    var dify = blok.y - crossHair.y;
    return Math.sqrt( (difx * difx) + (dify * dify) );
}

Answer 1

It looks like you’re starting the animation… setting it to the first frame and starting it… every time hitTestControle is true. Since hitTestControle will be true as long as you’re hovering over the target, the animation will never reach the second frame.

What you need to do is start the animation when you transition from hitTestControle = false to hitTestControle = true, but once that happens you just let it play automatically.

Try changing your hitTestControl() function to something like this:

function hitTestControl() {
    if(hitTestControle == true && alreadyOverHit == false) {
        crossHair.gotoAndPlay("move");
        alreadyOverHit = true;
        console.log("hit");
    } else {
        crossHair.gotoAndPlay("stop");
        alreadyOverHit = false;
    }
}

In other words, only start the animation once, during the first frame you’re detecting a hit, and then don’t touch it unless you move off the target and back on.