Shuffle an Array

As game developers we are always going to need a way to shuffle an array, to randomize it, to mix it up. For example a word in Hangman game or a deck of cards, or puzzle tiles on a scrambled picture type of game. And all we need to do to accomplish that is pick random places in the array and swap the values. Now as a beginning programmer I tried to say something like






To try to swap the values 1 and 2. But of course the problem here is that array[0] will equal 2 which is fine, but it erases the 1 value in the 0 position before it can be placed into place 2!

So our array will be [2,2] instead of [2,1]


The correct way to swap two values in an array is to create a temporary variable to hold the value



var temp=array[0];




And now our array will equal [2,1]


By doing this several times we can swap anything that can be put into an array. Here is example of shuffling words in a sentence

Here is the code for the example above

var StateMain = {
    preload: function() {
        //load the button image into the library
        game.load.image("button", "images/btnGenerate.png");
    create: function() {
        //set the text
        this.words = "Text to Mix Up Here";
        //define button and text
        var btnGet = game.add.sprite(,, "button");
        this.text1 = game.add.text(, game.height / 3, this.words);
        this.text1.fill = "#ffffff";
        btnGet.anchor.set(0.5, 0.5);
        this.text1.anchor.set(0.5, 0.5);
        //Add the event to the button
        btnGet.inputEnabled = true;, this);
    getText: function() {
        //make the string into an array of words by splitting on the space
        var wordArray = this.words.split(" ");
        //send the array to the mix up function
        wordArray = this.mixUp(wordArray);
        //make the array back into a string by joining the array by the space
        this.words = wordArray.join(" ");
        this.text1.text = this.words;
    mixUp: function(array) {
        //loop through several times
        for (var i = 0; i < 10; i++) {
            //pick two random places
            var place1 = Math.floor(Math.random() * array.length);
            var place2 = Math.floor(Math.random() * array.length);
            //make a temp variable to hold place1's value
            var temp = array[place1];
            //now move the value of place2 into place1's slot
            array[place1] = array[place2];
            //take the temp value and place it in place2's slot
            array[place2] = temp;
        return array;
    update: function() {}

Source Code Available in the FILE VAULT!


Leave a Reply