Jquery $ .getJSON неправильно отображается в HTML5 Canvas

Question

Я уверен, что здесь не соблюдаю правильные правила кодирования игр, но я очень много учусь на ходу.

Ссылочный URL: http://www.rustyeight.com/game

У меня естьКанал JSON, который я использую как часть движка рендеринга карт на основе спрайтов.Я использую метод JQuery $ .getJSON для извлечения информации из канала (maps.js) и заполнения массива его содержимым.

Затем я вызываю эту функцию с помощью функции рисования.

function draw(ctx){
    map(ctx);
    makeMan(ctx);
}

Мне показалось странным, что я не объявил массив в функции $ .getJSON, весь массивэлементы появлялись как неопределенные, когда я пытался получить к ним доступ.Поэтому я просто переместил вызов переменной и все другие процессы в функцию, и она, кажется, работает нормально.

У меня также есть функция, которая рисует символьные данные из объекта.

Проблема IТеперь я понимаю, что независимо от того, где находится вызов функции makeMan (), персонаж всегда отображается под картой.У меня такое ощущение, что эта проблема основана на том факте, что я не смог получить доступ к массиву карт вне вызова json.Я также предполагаю, что действительно неэффективно принудительно вводить контекст в функцию каждый раз, когда я вызываю функцию рисования.

Пожалуйста, обратитесь к ссылке выше для кода.Пожалуйста, дайте мне знать, если вам нужны какие-либо разъяснения.Я дергаю себя за волосы!

Answer 1

Поскольку ваша функция map () использует AJAX, она становится асинхронной.Поэтому, пока браузер не выполняет HTTP-запрос, он продолжает работу и выполняет оставшуюся часть сценария.В этом случае он отображает человека.

Итак, все, что происходит, - это выполнение всего сценария, отображение человека, ТОГДА завершение httpRequest и отображение карты поверх него.

Вам следует вызватьmakeMan () после вызова AJAX, либо указав функцию обратного вызова для выполнения после ее завершения, либо просто вставив ее в конец функции AJAX карты.

И я только что вспомнил jQuery.when, это именно то, что вам нужно.