Creating Variable in HTML5? I think?

[mentalcase129]

I'm helping somebody create a simple game with HTML5.  The concept of the game is a point and click eye spy sort of thing.  You find an object in the room, you click on it and it disappears from the room and shows up in your inventory.  That's being achieved just with turning movieclips off and on with fairly simple code.  The one part we'd like to make work that is a bit beyond me though is how to make it so that once all the required items are located, the game, or the level so to speak finishes.

I'm assuming the best way to do this would be to create some sort of variable system so that once all of the needed items are activated in the inventory, it triggers some "congrats" animation or something.  My coding background is quite limited though, my background is in animation.  So I don't really have any idea how to approach setting something like that up.  And I'm also not confident enough about how to approach it that I don't even know exactly what to search for to try and find a tutorial to help me.

The code we are primarily working with is "this.movieclip.visible=true" "this.movieclip.visible=false" and some play and stop code for some movieclip animation.  So MAYBE the new code we need would recognize when all those movieclips become visible then the game is won.  Like, "if this, this, this, and this are visible then this movieclip plays"

I think that makes sense in theory but I have no idea how to set it up code wise.

Anybody know how to do that?  Or can point me to an appropriate tutorial.  Baring in mind that coding is really not my thing and I might need it over explained if I don't have a working example in front of me to dissect lol.

[kdmemory]

Hi mentalcase 😉

I mostly use at least two variables to achieve a goal like yours.

Firstly for all your objects you want to have clicked and collected you provide for each one of those an Instance Name in the Properties panel. For the sake of an example let's call them "o1", "o2", "o3", "o4", "o5".

Then you set up code in your first frame (main timeline) where you initialize a variable as an Array. This array will contain all findable objects:

this.findObjectsArr = ["o1", "o2", "o3", "o4", "o5"];

This kind of array can be accessed with a number of methods. I.e.

this.findObjectsArr[3] - this would result in "o4". Consider that an Array starts counting with 0 (zero).

this.findObjectsArr.length - this would result in 5, because there are 5 items in your Array.

this.findObjectsArr.indexOf("o1") - this would result in 0 (zero). If you would code this.findObjectsArr.indexOf("o7") - this would result in -1, everytime an index position is attempted to be found for an an item that isn't present in a particular Array, the result is -1.

Okay then the second variable

this.objectsFoundCounter = 0;

This again goes into your first frame (main timeline). The value is 0 (zero) because at the very start none of the objects are found.

Then the whole code for this mechanism can go like this:

/* I assign this (which is valid for the duration of the timeline where it has been initialized) to the variable here. */

var here = this;
here.findObjectsArr = ["o1", "o2", "o3", "o4", "o5"];
here.objectsFoundCounter = 0; 
here.on("click", here.clickHander, here, false);
here.clickHander = function (e) {
    var etn = e.target.name; //this will give you the instance name of the clicked object
    // the next condition is to make sure that really one of your findable objects has been clicked and not something else
    if (here.findObjectsArr.indexOf(etn) != -1) {
        //now you can process everything with the found object what's necessary, i.e.
        here[etn].visible = false;
        // and more
        // and important, add 1 to the value of your second variable:
        here.objectsFoundCounter++;
        // now the check if all objects have been already found (clicked):
        if (here.objectsFoundCounter == here.findObjectsArr.length) {
            // then you can trigger your congrats animation like:
            here.congrats_mc.play();
            // and whatever else is necessary here
        }
    }
};

Hope this helps you

Klaus

[mentalcase129]

Thanks!  This is helpful and definitely pointing me in the right direction but I'm still struggling to fully wrap my head around it.  I made a test file using your naming conventions so that I could sort of just plug it all in and see if it works.  It's not lol.  I'm a little unclear on what in your code I need adjust for my purposes.  I also added the click events to turn the objects invisible, which I assume was needed for the variable code to work, but so far I'm not getting it right.  Also the congrats movieclip was playing, so I created a stop command for it so that it wouldn't be triggered until your code allows it but it still wants to loop when I test it.

I'll keep experimenting with it but any further advice would be helpful.

Here's the fla I'm working with if you want to take a look:

https://drive.google.com/file/d/1sHk1sql8W34LZvuAYqITstmQSswvbYbm/view?usp=sharing

Here's my code stack now, with my failed attempts at changing your stuff removed(sorry, couldn't figure out how to properly paste the code like you did):

this.congrats_mc.stop();

var here = this; 

here.findObjectsArr = ["o1", "o2", "o3", "o4", "o5"]; 

here.objectsFoundCounter = 0;  

here.on("click", here.clickHander, here, false); 

here.clickHander = function (e) { 

    var etn = e.target.name; //this will give you the instance name of the clicked object 

    // the next condition is to make sure that really one of your findable objects has been clicked and not something else 

    if (here.findObjectsArr.indexOf(etn) != -1) { 

        //now you can process everything with the found object what's necessary, i.e. 

        here[etn].visible = false;

        // and more 

        // and important, add 1 to the value of your second variable: 

        here.objectsFoundCounter++; 

        // now the check if all objects have been already found (clicked): 

        if (here.objectsFoundCounter == here.findObjectsArr.length) { 

            // then you can trigger your congrats animation like: 

            here.congrats_mc.play(); 

            // and whatever else is necessary here 

        } 

    } 

};

this.o1.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

this.o1.visible=false

}

this.o2.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2()

{

this.o2.visible=false

}

this.o3.addEventListener("click", fl_MouseClickHandler_3.bind(this));

function fl_MouseClickHandler_3()

{

this.o3.visible=false

}

this.o4.addEventListener("click", fl_MouseClickHandler_4.bind(this));

function fl_MouseClickHandler_4()

{

this.o4.visible=false

}

this.o5.addEventListener("click", fl_MouseClickHandler_5.bind(this));

function fl_MouseClickHandler_5()

{

this.o5.visible=false

}

[ClayUUID · Accepted solution]

Since your clickable objects are named in a consistent, linear way, you can make your code so much more concise:

var thingsPrefix = "o";

var numThings = 4;

for (var i = 1; i <= numThings; i++) {

    this[thingsPrefix + i].on("click", thingClicked, this, true);

}

function thingClicked(evt) {

    evt.currentTarget.visible = false;

    if (!--numThings) {

        this.congrats_mc.play();

    }

}

[mentalcase129]

Sorry for the slow response, Clay.  But thank you!