{javascript} SPRITE buttons sticky hover state

Question

I am making a game in javascript/html5. I have buttons which I draw from a sprite sheet. I am attempting to get the hover state for the buttons working correctly. Currently the hover state draws when a button is hovered over, but does not "un hover" when not hovered over. Sticky hover behavior in other words.

I have attached a video of the behavior here: https://youtu.be/VD9rPG-iXTA?list=PLS5mKRel38oYGFCd2YOT9ugHwomFtAUZu

I am sure it is a problem with my logic but I can't see it. Here is my code:

function checkButtonHover()
{
    //Check for button hovers
    for(var b=0; b<buttons.length; b++)
    {
        var button = buttons[b];
        var select = null;

        //If poiint collision with button
        if(hitTestPoint(mouseX,mouseY,button))
        {
            //Assign select sprite art
            select = new Sprite("select",190,237,20,20,button.x,button.y,1,true,false,false);
            //Add select to sprites so that it get drawn in render()
            sprites.push(select);
        }
        else
        {   
            //If there isn't a collision but select has a value
            if(select !== null)
            {
                select.visible = false;
                removeObject(select,sprites);
                //Reset select to null
                select = null;
            }

        }

    }
}

Any assistance is greatly appreciated.

UPDATE

After hours of exhaustive experimentation. I finally solved the issue with a messy hack to the button objects themselves and then in checkButtonHover() I simply set button.select.visible to true if moused over and false otherwise. Thank you to every one who stopped by to read this question and to those who scratched their head trying to think of solutions.

{javascript} SPRITE buttons sticky hover state

0 Answers0