Remove object from array

Help & Support
1

In my new project, I use an array to store 6 different images I want to randomly load onto 9 image elements. I want to set a limit so that only 1 of the images can load onto 3 of the planes (of 9 planes, only 3 can have the picture of a star, for example. If there are 3 stars each other image can only appear twice at most and no more stars can appear).
As it is I have this set up to limit how many times each images appear:

RandomImage.prototype.initialize = function() 
{
    var image; //Selected image to render on plane
    var newImages; //Array of images if any image reaches a count of 3
    
    //Variables to track how many times an image has been
    //picked to limit the number of each image to 3
    var spades = 0;
    var diamonds = 0;
    var shoes = 0;
    var clubs = 0;
    var sevens = 0;
    var stars = 0;
    
    var planes = this.app.root.findByTag("symbol"); //Image elements in scene
    
    //Randomly select an image for each plane
    for(i=0;i<planes.length;i++)
    {
        image = this.images[Math.floor(Math.random()*this.images.length)]; //this.images is a script attribute array of assets
        
        if(image.name === "Diamonds.png")
        {
            if(diamonds < 3)
            {
                diamonds += 1;
                console.log("Num Diamonds: " + diamonds);
            }
            else if(diamonds === 3)
            {
                //Remove this image from array and limit others to 2
            }
        }
        else if(image.name === "Clubs.png")
        {
            if(clubs < 3)
            {
                clubs += 1;
                console.log("Num Clubs: " + clubs);
            }
            else if(clubs === 3)
            {
                //Remove this image from array and limit others to 2
            }
        }
        else if(image.name === "horseshoe.png")
        {
            if(shoes < 3)
            {
                shoes += 1;
                console.log("Num Shoes: " + shoes);
            }
            else if(shoe === 3)
            {
                //Remove this image from array and limit others to 2
            }
        }
        else if(image.name === "seven.png")
        {
            if(sevens < 3)
            {
                seven += 1;
                console.log("Num Sevens: " + sevens);
            }
            else if(sevens === 3)
            {
                //Remove this image from array and limit others to 2
            }
        }
        else if(image.name === "spades.png")
        {
            if(spades < 3)
            {
                spades += 1;
                console.log("Num Spades: " + spades);
            }
            else if(spades === 3)
            {
                //Remove this image from array and limit others to 2
            }
        }
        else if(image.name === "star.png")
        {
            if(stars < 3)
            {
                stars += 1;
                console.log("Num Star: " + stars);
            }
            else if(stars === 3)
            {
                //Remove this image from array and limit others to 2
            }
        }
        
        planes[i].element.texture = image.resource;
    }
};

I’m looking for something like this to happen almost every time.

scratchEG
scratchEG.png1398×583 471 KB

2

Do you always want 3 of the same image to appear in 3 of the 9 image elements? Or is it up to 3? ie Do you always want a winning scratch card?

3

Up to 3. The image above is a best case scenario that randomly occurred. Whenever a win comes up I want it to be something like what is shown.

Would using indexOf and splice work?

4

Ooo… This would make an interesting interview question… I need to remember this one!

Assume for the moment we had 4 symbols (spade (S), heart (H), club ©, diamond (D)). and 5 tiles to scratch.

There should be a probability table for winning on each one, say 10% for each and 60% for losing.

First I would check if the user had ‘won’ by doing a standard random number test.

If the player had lost, I would add 2 of each symbol representation (string, number, asset etc) to an array (S, S, H, H, C, C, D, D).

Shuffle the array and then change the tiles to those symbols.

Say the the player won instead (S).

I would 2 copies of the non-winning symbols to the array (H, H, C, C, D, D).

Shuffle the array (H, C, D, C, D, H).

Work out how many tiles I need to ‘fill’ with non winning symbols (5 - 3 = 2) and make a subset of the shuffled array (H, C).

Add 3 copies of the winning symbol to the array (H, C, S, S, S).

Shuffle again (S, S, C, H, S)

And assign to the tiles.

5

That makes so much more sense than what I was going for, and actually works into the final bit I haven’t added yet.

6

I saw what you trying for and it was something similar to what I had done in the past on a large budget game :sweat_smile:

It will work (and the direct answer to your question is to use array.splice), you just won’t be able to do an easy probability table.

7

I guess I should have asked this earlier, is there a built in shuffle function or do I have to write one?

8

Google around, there’s a few that work quite well or write your own.

9

Was looking into when I asked, figured it wouldn’t hurt to ask if there was one already implemented.
I’ll post the example I found in case anyone else comes looking:

shuffleArray = function(array)
{
    var currIndex = array.length, tempValue, randIndex;
    
    while(0 !== currIndex)
    {
        randIndex = Math.floor(Math.random() * currIndex);
        currIndex -= 1;
        
        tempValue = array[currIndex];
        array[currIndex] = array[randIndex];
        array[randIndex] = tempValue;
    }
    
    return array;
};

EDIT: Actually this doesn’t seem to work… see new topic Function call freezes browser when debugging