0

I'm trying to make a mini game where there is a character standing from one position to another. when I make the character can return to the previous position, of course the character must flip position

example

this is what i did so far

     if(mv=='next'){
        var nxtpoint = parseInt(current)+1;
        var nxtpositionx =parseInt($("#pointmap-"+nxtpoint).attr('x'));
        var nxtpositiony = parseInt($("#pointmap-"+nxtpoint).attr('y'));
        var crntnxtbtn = $("#nxt-"+current);
        var crntprvbtn = $("#prv-"+current);
        var nxtbtn = $("#nxt-"+nxtpoint);
        var prvbtn = $("#prv-"+nxtpoint);
        charmv.css('transform','rotateY(0deg)');            
        charmv.animate({ "x": nxtpositionx+charpositionx, "y": nxtpositiony+charpositiony }, "slow" );
        if(nxtbtn){
            nxtbtn.css('display','block');
        }
        prvbtn.css('display','block');

        crntnxtbtn.css('display','none');
        crntprvbtn.css('display','none');
    }
    
    if(mv=='prev'){
        var prvpoint = parseInt(current)-1;
        var prvpositionx = parseInt($("#pointmap-"+prvpoint).attr('x'));
        var prvpositiony = parseInt($("#pointmap-"+prvpoint).attr('y'));
        var crntnxtbtn = $("#nxt-"+current);
        var crntprvbtn = $("#prv-"+current);
        var nxtbtn = $("#nxt-"+prvpoint);
        var prvbtn = $("#prv-"+prvpoint);
        // charmv.css('transform','rotateX(180deg)');
        // charmv.css('transform-origin','center');
        charmv.css('transform','scale(-1, 1)')
        charmv.animate({ "x": prvpositionx+charpositionx, "y": prvpositiony+charpositiony }, "slow" );            
        
        if(prvbtn){
            prvbtn.css('display','block');
        }
        nxtbtn.css('display','block');
        crntnxtbtn.css('display','none');
        crntprvbtn.css('display','none');
    }

but the flip changes the character's position and is not where it should be

Please help

Gasta
  • 35
  • 7
  • Did you tried this? https://stackoverflow.com/questions/23899718/scale-and-mirror-svg-object – Pal Singh Jul 21 '22 at 03:28
  • 1
    Maybe this will help: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin Also, it seems you're transforming the container of that sprite instead of the sprite itself? It's being flipped on it's left edge. – J. Titus Jul 21 '22 at 03:30
  • thank you, need transform:-box:fillbox and transform-origin:center; – Gasta Jul 24 '22 at 02:09

0 Answers0