将Tiled地图添加到Phaser以及角色更改面临的问题

Question

我为Phaser制作的游戏创建了一个Tiled地图，尽管有一个教程，我似乎无法加载它。我正在使用webstorm在javascript中制作游戏。一切的命名似乎没问题，我没有错误弹出窗口，但它只加载黑色背景而不是地图。

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
function preload() {

game.load.spritesheet('player', 'res/player_strip8.png', 80 , 190);
game.load.spritesheet('player-right', 'res/player_right.png');
game.load.spritesheet('player-left', 'res/player_left.png');
game.load.tilemap('map', 'res/Game_map.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('tiles', 'res/back-ground.png');}

var map;
var tileset;
var layer;
var player;
var facing = 'left';

function create() {
map = game.add.tilemap('map');
//game.stage.backgroundColor = '#00FFFF';
game.physics.startSystem(Phaser.Physics.ARCADE);

   players = game.add.group();
players.enableBody = true;
createPlayer("");

map.addTilesetImage('Back-ground', 'tiles');
groundLayer = map.createLayer('GroundLayer');

Cursors = game.input.keyboard.createCursorKeys();
}
function update() {
playerUpdate();
}
function createPlayer(x,y){
var player = players.create(0,0,'player-right');
player.body.bounce.y = 0.5;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
}
function playerUpdate(){
game.physics.arcade.collide(players, players);

players.forEach(function (p) {
    p.body.velocity.x = 0;
    if(Cursors.left.isDown){
       //players.create('player-left');
        //players.animation('left')
        p.body.velocity.x = -150;
        //player = players.create(0,0,'player-left');
    } else if (Cursors.right.isDown){
       //players.create('player-right');
        //players.animation('right')
        p.body.velocity.x = 150
       // player = players.create(0,0,'player-right');
    }
    if (Cursors.up.isDown && p.body.touching.down  ){
        p.body.velocity.y = -350
    }
})
}
function createPlatform() {
}