Question

I am making a game and I am trying to create a game end function. How would I go about resetting all images to their starting positions?

Answer 1

You can programaticly store all positions of a image class inside a Object inside a array.
And after you can loop the array restoring theirs positions back.

var positions = new Array(0); //positions array

function objPos(obj){

    return({
        'obj':obj,
        'x':obj.style.left,
        'y':obj.style.top
    });
}


function savePositions(imgContainer){

    var imgs = imgContainer.getElementsByTagName('IMG');

    for(var i=0; i<imgs.length; i++){

        positions[i]=objPos( imgs[i] );

    }
}

function restoreStoredPositions(){

    for(var i=0; i<positions.length; i++){

        var img=positions[i];
        img.style.top=positions[i].y;
        img.style.left=positions[i].x;
    }
}

Call the savePositions function on the initial state, and you can call restoreStoredPositions later. If you want persistent data, stringy the array to JSON and you can store it to a Cookie or HTML5 LocalStorage.

I know this is pure JS but this is just a concept that I wrote now.
You can adapt this to use the each() and the jquery selector on place of the getElementBy…
I used the style.top and left just for readability, computedStyles is the correct path.