Javascript button that requires multiple "clicks" to proceed

[K7S]

Hi there,

I'm developing a project that's helping me learn Javascript for fun on the side.

I wanted to create a specific type of button, and I am having trouble finding any existing resources on it.

Does anyone know how to make a button that after multiple clicks jumps to the next label or frame. Preferably a random amount of clicks that can be set, let's say 3 - 12 clicks. This button should be recyclable, in that it can be used again on the timeline with the same snippet of code.

This is what I use for buttons typically is below and works great but I really would like some help expanding what buttons can do.

this.next.addEventListener("click", next_button1.bind(this));

function next_button1() {

    this.gotoAndPlay("start");

}

Any help would be really appreciated. Thank you !

[JoãoCésar · Accepted solution]

Hi.

My suggestion:

this.button0.on("click", function(e)
{
    this.randomClicks(e.currentTarget, 3, 7, this, 1);
}.bind(this));
this.randomClicks = function(button, min, max, target, destination)
{
    if (!button.setRandom)
        button.setRandom = Math.round(min + Math.random() * (max - min));
    if (!button.clicks)
        button.clicks = 0;
    console.log(button.clicks, button.setRandom);
    if (button.clicks == button.setRandom)
    {
        console.log("finish", button.setRandom);
        button.setRandom = null;
        button.clicks = null;
        target.gotoAndStop(destination);
    }
    button.clicks++;
}

You add a listener to the button you want and then you call the function for multiple clicks.

I hope it helps.

Regards,

JC

[K7S]

JoãoCésar

You are a Javascript God,

Thank you! It seems to work, could you help me read the code here a bit. Is the range 3 - 7 ? under e.currentTarget?

Thank you so much. I will be hiring you for extended help as soon as I am out of the negative on this adventure i've begun. Can you DM me your business email? or should I just reach out on here?

[JoãoCésar]

Haha! I wish.

The other guys here are lightyears better than me. Hehe

I added some comments:

this.stop();
// Here we set the button on stage to listen for clicks.
this.button0.on("click", function(e)
{
    this.randomClicks(e.currentTarget, 3, 7, this, 1);
    // The function for the random clicks needs 5 parameters:
    // the button
    // the minimum value for the random range
    // the max value
    // the Movie Clip we are going to change the frame when the maximum amount of clicks is reached
    // the frame/label to go in this Movie Clip.
}.bind(this)); // here I chain the bind function so the 'this' keyword inside the function refers to the main timeline
this.randomClicks = function(button, min, max, target, destination)
{
    // Here we only want the random value to be set once. So we check if the button have the property 'setRandom'.
    // If it doesn't, it means that we can set the random value
    if (!button.setRandom)
        button.setRandom = Math.round(min + Math.random() * (max - min));
    // The same as above. We check if the property exists and set its value only once.
    if (!button.clicks)
        button.clicks = 0;
    console.log(button.clicks, button.setRandom);
    // If the amount of clicks is equal to the random value, we set the created properties to null
    //so we can start another click session and we finally send the target movie clip to the desired frame
    if (button.clicks == button.setRandom)
    {
        console.log("finish", button.setRandom);
        button.setRandom = null;
        button.clicks = null;
        target.gotoAndStop(destination);
    }
    button.clicks++;
}

My business email is: joao.cesar@minifliper.com

Thank you!

[K7S]

Seems like when I add another button, they both go to the same label name despite the difference... scene3 in this case.

Everything works except the destination. Any idea why ?

this.stop();

this.button1.on("click", function(e) 

{ 

    this.randomClicks(e.currentTarget, 3, 7, this, 1); 

}.bind(this)); 

this.randomClicks = function(button, min, max, target, destination) 

{ 

    if (!button.setRandom) 

        button.setRandom = Math.round(min + Math.random() * (max - min)); 

    if (!button.clicks) 

        button.clicks = 0; 

    console.log(button.clicks, button.setRandom); 

    if (button.clicks == button.setRandom) 

    { 

        console.log("finish", button.setRandom); 

        button.setRandom = null; 

        button.clicks = null; 

        target.gotoAndStop("scene2"); 

    } 

    button.clicks++; 

} 

this.button2.on("click", function(e) 

{ 

    this.randomClicks(e.currentTarget, 1, 10, this, 1); 

}.bind(this)); 

this.randomClicks = function(button, min, max, target, destination) 

{ 

    if (!button.setRandom) 

        button.setRandom = Math.round(min + Math.random() * (max - min)); 

    if (!button.clicks) 

        button.clicks = 0; 

    console.log(button.clicks, button.setRandom); 

    if (button.clicks == button.setRandom) 

    { 

        console.log("finish", button.setRandom); 

        button.setRandom = null; 

        button.clicks = null; 

        target.gotoAndStop("scene3"); 

    } 

    button.clicks++; 

} 

[JoãoCésar]

Sure.

Take a look:

this.stop();

this.button1.on("click", function(e) 

{ 

    this.randomClicks(e.currentTarget, 3, 7, this, 1);  // destination for button1

}.bind(this));

this.button2.on("click", function(e) 

{ 

    this.randomClicks(e.currentTarget, 1, 10, this, 2);  // destination for button2

}.bind(this));

// don't replicate the function declaration. Only one is needed.

this.randomClicks = function(button, min, max, target, destination) 

{ 

    if (!button.setRandom) 

        button.setRandom = Math.round(min + Math.random() * (max - min)); 

    if (!button.clicks) 

        button.clicks = 0; 

    console.log(button.clicks, button.setRandom); 

    if (button.clicks == button.setRandom) 

    { 

        console.log("finish", button.setRandom); 

        button.setRandom = null; 

        button.clicks = null; 

        target.gotoAndStop("scene2"); 

    } 

    button.clicks++; 

}

[K7S]

Ok I think I understand functions a bit better. Thanks for taking the time to help me learn.

I would like a different destination for the second button, and the third button and so on. Kinda like flipping through a story book but each turn of page takes a random number of clicks.

Where do I input the "scene2" command? after e.currentTarget, 3, 7, this, 1,?

Also a related question. If this is function(e) will it interfere with another function(e) ? specifically, you helped me build a meter that I am still using in my game, will the code collide once I put it in ?

[K7S]

So to describe this in a linear way; one button stopped on first frame, takes 3-7 clicks to go to next frame or scene2 where there is a new buttton stopped and similarly this takes 1-10 clicks to go to the next frame (scene3), and so on. Is this possible in the way you wrote it? I can commission you?

[JoãoCésar]

You can do this the way things are. But remember: there's no concept of scenes in HTML5 (Canvas) documents. The gotoAndStop() function accepts frames numbers (starting from 0) or frame labels.

And the function(e) here is an inline and anonymous function. In my case, it was a lazy and compact solution to not have to write a separate handler function somewhere else. Hehe

You can add a event listener in several ways:

object.addEventListener("click", clickHandler);
object.on("click", clickHandler);
object.addEventListener("click", function(e){});
object.on("click", function(e){});

The result is the same.

And, no, one won't interfere with each other.