javascript - directionally append an image tag

Question

Hi I'm looking to move an image tag across divs based on mouse click, I have created a tile grid system with two different types of tile - "deathsquare" & "mapsquare". The player can only spawn inside the "mapsquare" tiles and I'm trying to use this for the moment too.

Grid -

            <div id="28_25" class="deathsquare"></div>
            <div id="29_25" class="deathsquare"></div>
            <div id="30_25" class="deathsquare"></div>

            <div id="1_20" class="mapsquare"></div>
            <div id="2_20" class="mapsquare"></div>
            <div id="3_20" class="mapsquare"></div>
            <div id="4_20" class="mapsquare"></div>

This is the JSFiddle http://jsfiddle.net/zCZkA/16/ I can't seem to move the player up the "mapsquare" classes using the onclick arrow. Anyone have any suggestions?

Thanks!

Answer 1

You'll probably want to ensure that your rendered squares are systematically placed in order. Your squares currently are not. After you have sorted out that issue you can keep track of where your player is like so...

$('#up').click(function(){
    var player = $('#player');
    var currentDiv = player.parent().attr('id'); // gets you 3_5 or something like that
    player.remove();
    //do logic to move up 
    var placement = currentDiv.split('_');
    var newSquare = [parseInt(placement[0])++,placement[1]].join('_');
    $('#' + newSquare).append(player);

});