shuffling position of three images in html/javascript

Question

I am trying to achieve shuffle three images in a random order This is what i have achieved so far shuffle jsfiddle

I wanted to shuffle them with each other randomly

$(document).ready(function () {
            shuffle(1);
        });
        var shipsArray = new Array();
        shipsArray = ["1", "2", "3"];
        function shuffle(level) {

            for (i = 0; i < 30; i++) {
                var j = i % 3;

                var favorite = shipsArray[Math.floor(Math.random() * shipsArray.length)];
                if (j != favorite) {
                    var newposition = $("#ship" + shipsArray[favorite]).position();
                    var tempPosition = $("#ship" + shipsArray[j]).position();
                    $("#ship" + shipsArray[j]).animate({ "left": newposition.left, "top": newposition.top });
                    $("#ship" + shipsArray[favorite]).animate({ "left": tempPosition.left, "top": tempPosition.top });
                }

            }
        }

Will the ships always be three? If so, I can attempt to solve it. — MightyPork, Feb 01 '14 at 10:55
ya!! what i want is the ships should interchange positions randomly In jsfiddle its not shuffling but in my html file its shuffling — Vignesh Subramanian, Feb 01 '14 at 11:02
possible duplicate of [javascript Sort list randomly](http://stackoverflow.com/questions/17118259/javascript-sort-list-randomly) — Paul S., Feb 01 '14 at 11:08
@PaulS. I dont need to shuffle array, the problem is i want to swap the images — Vignesh Subramanian, Feb 01 '14 at 11:12
@11684 yeah i need to shuffle these three images in any random order — Vignesh Subramanian, Feb 01 '14 at 11:33

MightyPork · Accepted Answer · 2014-02-01T12:08:37.527

Here is my final solution (sort of).

I had to resort to using setTimeout() to do the timing right.

JSFiddle

HTML (unchanged, just for completeness)

<div id="MainDiv">
    <img id="ship1" src="http://cdn-img.easyicon.net/png/154/15462.png" />
    <img id="ship2" src="http://cdn-img.easyicon.net/png/154/15462.png" />
    <img id="ship3" src="http://cdn-img.easyicon.net/png/154/15462.png" />
</div>

CSS (also unchanged)

#MainDiv {position:absolute;}
#MainDiv img {position:absolute;}
#ship1 {top:10px; left:200px;}
#ship2 {top:210px; left:0px;}
#ship3 {top:210px; left:400px;}

JS

var ships = [] /* array of ships */
var time_anim = 500 /* anim time */

$(document).ready(function () {
    ships = $("#MainDiv img"); /* find ships */
    shuffle(6); /* wheeee */
});

function shuffle(level) {
    /* do the animation */
    var c = randInt(2, 3)
    cycle(getElements(ships, c))

    if (level > 1) {
        setTimeout(function () {
            shuffle(level - 1)
        }, time_anim)
    }
}

function randInt(min, max) {
    /* get random integer */
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function cycle(items) {
    /* cycle ships in array */
    var pos0 = $(items[0]).position()

    for (i = 1; i < items.length; i++) {
        var sh = items[i];
        var shp = $(sh).position();

        $(items[i - 1]).animate({
            "left": shp.left,
                "top": shp.top
        }, time_anim);
    }

    $(sh).animate({
        "left": pos0.left,
            "top": pos0.top
    }, time_anim);
}

function getElements(arr, n) {
    /* Get n random elements from array */
    var used = []
    var result = []

    while (result.length < n && result.length < arr.length) {
        var i = randInt(0, arr.length - 1)
        if (jQuery.inArray(i, used) !== -1) {
            continue;
        }

        used.push(i)
        result.push(arr[i])
    }

    return result;
}

(Maybe it can be done a bit easier, but w/e - it works.

`console.log(JSON.stringify(items))` gives `Uncaught TypeError: Converting circular structure to JSON` — Paul S., Feb 01 '14 at 11:59
It works perfectly in Firefox, dunno why Chrome refuses to animate them. — MightyPork, Feb 01 '14 at 11:59
your code is not really reliable, and tbh I have no idea how or why it works. Now I tried it and the ships ended in some really weird positions (not the three where they started). — MightyPork, Feb 01 '14 at 16:06
@MightyPork this is what i was trying :D http://jsfiddle.net/n2Zh6/30/ ya that happens when i goto some other tab n come back :D i dono why that happens — Vignesh Subramanian, Feb 01 '14 at 16:19

shuffling position of three images in html/javascript

1 Answers1