Проблема с обработкой хром-полотна

Question

Я создал небольшую javascript-игру, и я протестировал ее на своем локальном компьютере во всех основных браузерах, и она отлично работает. После этого я загрузил игру на свой сервер хостинга, и игра не будет отображаться в Chrome, область холста серая, но она отлично работает в firefox, кто-нибудь знает почему? Вот ссылка на демо

http://djordjepetrovic.rs/igrica/

Answer 1

В файле catcher_game.js я нашел по крайней мере, на это:

draw: function(){ 
    basket_catcherImg = new Image(); 
    basket_catcherImg.src = 'images/basket.png'; 
    ctx.drawImage(basket_catcherImg, this.x, this.y, this.w, this.h); 
// ... 

Это не будет работать очень хорошо. Он работает локально на вашем компьютере, поскольку изображение кэшируется с диска.

Загрузка изображений является асинхронной операцией, так что ваши drawImage нужно ждать, пока загрузится изображение - правильный путь:

draw: function(){ 
    var me = this; 
    basket_catcherImg = document.createElement('img'); 
    basket_catcherImg.onload = function() { 
     ctx.drawImage(basket_catcherImg, me.x, me.y, me.w, me.h); 
    } 
    basket_catcherImg.src = 'images/basket.png'; 
    //... 

Вы должны сделать это с другими подобными экземплярами IMG, а также.

Причина, по которой вам нужно me, объясняется тем, что this заменен на элемент изображения при вызове обратного вызова onload. Поэтому вам нужно сохранить ссылку на исходный контекст this.

Также замените new Image() на createElement('img'), как есть в настоящее время an issue in Chrome, который не справляется с этим правильно.

Приятная графика, кстати!