poruszanie po mapie js + ajax Opcje

[wezyrno]

Kod

$(document).ready(function() {

    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");

    canvas.tabIndex = 0;
    canvas.focus();
    canvas.addEventListener('keydown', function(e) {
        console.log(e);
        var key = null;
        switch (e.which) {
        case 39:
            // Right
            if (playerX < worldWidth) {
                advAJAX.get({
                    url:"../ajax/poruszanie.php?ruch=prawo",
                    onSuccess: function(obj) {
                        if(obj.responseText == '1') {
                            playerX++;
                        }
                    }
                });
            }
            break;
        }

        vX = playerX - Math.floor(0.5 * vWidth);
        if (vX < 0) vX = 0;
        if (vX+vWidth > worldWidth) vX = worldWidth - vWidth;
        
        
        vY = playerY - Math.floor(0.5 * vHeight);
        if (vY < 0) vY = 0;
        if (vY+vHeight > worldHeight) vY = worldHeight - vHeight;
        
        
        draw();
    }, false);

    var board = [];

    canvas.width = 512;
    canvas.height = 352;

    board = loadMap(1);
    imageObj = new Image();
    tiles = [];

    var loadedImagesCount = 0;
    for (x = 0; x <= NUM_OF_TILES; x++) {
        var imageObj = new Image(); // new instance for each image
        imageObj.src = "../grafika/obrazy/o" + x + ".png";

        imageObj.onload = function() {
            // console.log("Added tile ... "+loadedImagesCount);
            loadedImagesCount++;
            if (loadedImagesCount == NUM_OF_TILES) {
                // Onces all tiles are loaded ...
                // We paint the map
                draw();
            }
        };
        tiles.push(imageObj);
    }


    function draw() {
        context.clearRect(0,0,canvas.width, canvas.height);
        for (y = 0; y <= vHeight; y++) {
            for (x = 0; x <= vWidth; x++) {
                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[y+vY][x+vX]], theX, theY, 32, 32);
            }
        }
        context.fillStyle = 'red';
        context.fillRect((playerX-vX)*32, (playerY-vY)*32, 32, 32);
    }
});

I problem polega na tym, że gdy poruszę obrazkiem w prawo za pierwszym razem nie przesuwa się na mapie, za drugim, trzecim etc. już przesuwa się.
Po stronie ajaxa mam tylko sprawdzanie czy postac nie natknela sie na blokade oraz zapisanie kordów do bazy.

Ten post edytował wezyrno 7.10.2012, 12:06:56

[!*!]

Pokaż to online http://jsfiddle.net/

[wezyrno]

Ale sam kod JS, bez łączności z kodem php działa poprawnie, więc po co mam go tam wklejać.

[!*!]

To skąd My mamy wiedzieć jak działa.