使用画架构建等距地图

Question

我正在尝试通过关注博客文章来构建等距 http://melkybee.wordpress.com/2013/02/28/creating-an-isometric-world-with-easeljs/

我按照他说的那样制作了一个JSON文件

{
"Main":{
    "0":["1","5","5","2"],
    "1":["8","0","0","6"],
    "2":["8","0","9","6"],
    "3":["4","7","7","3"]   
    }
}

然后这是我的HTML文件

<script type="text/javascript">
    var bmp;
    var stage;
    var img;
    var mapData;

    init: function(){

        stage = new createjs.Stage("testCanvas");
        var image ={images:["img/tileUnits.png"]};
        img = new createjs.SpriteSheet(image);


        var that = this;
        $.getJSON('data/game-map.json', function(data){
            that.mapData = data['main'];
            that.createTileMap(img, that.mapData);
        });
    }

    createTileMap: function(img, data){
        for (i=0; i<4;i++){
            for(j=0;j<4;j++){
                bmp = new createjs.Sprite(img);
                bmp.x = (j-i)*x;
                bmp.y = (i+j)*y;
                bmp.regX = 65;
                bmp.regY = 32.5;
                bmp.currentFrame=data[i][j];
                context.stage.addChild(bmp);

            }
        }
        stage.update();

    }
</script>

但是当我测试时我只得到灰色背景。有帮助吗？