Холст не работает должным образом в браузере Google Chrome

Question

Я сделал свою первую игру в HTML5 + CSS3 + JS, и у меня есть некоторые проблемы с ней. Это простая игра Змеи (http://5nake.ugu.pl/).

Давайте рассмотрим проблему. Когда вы идете в игру («Gra jednoosobowa») с включенными анимациями (вы можете включать/выключать их в настройках («Ustawienia»)), все рисуется правильно, но оно не очищается, поэтому все заканчивается имеющие части змеи, как везде. Конечно, играть в такую ​​игру невозможно. Однако в Firefox или Opera все работает правильно.

Другая проблема заключается в том, что когда вы теряете, должна быть быстрая анимация, в которой змея разбивается на отдельные фрагменты и спускается по полотну. Затем должен быть показан текст («Koniec gry») в течение 2 секунд, игра должна попросить игрока записать его имя, и должен быть показан экран рекордов («Wyniki»). Еще раз Google Chrome ничего не делает по этому поводу, и когда вы проигрываете, игра просто зависает. В JS Console нет отчетов. Вот соответствующий код:

function gameOver() { 
    stopGame(); 
    storage.set("activeGameData", null); 
    display.gameOver(function() { 
     announce("Koniec gry"); 
     setTimeout(function() { 
      snake.game.showScreen("hiscore", board.getScore()); 
     }, 2500); 
    }); 
} 

И display.gameOver():

function gameOver(callback) { 
    addAnimation(1000, { 
     render : function(pos) { 
      canvas.style.left = 
       0.2 * pos * (Math.random() - 0.5) + "em"; 
      canvas.style.top = 
       0.2 * pos * (Math.random() - 0.5) + "em"; 
     }, 
     done : function() { 
      canvas.style.left = "0"; 
      canvas.style.top = "0"; 
      explode(callback); 
     } 
    }); 
} 

Вот explode() функция:

function explode(callback) { 
// At the beginning there are many lines of some Math.random() with position, 
// velocity and rotation of every fragment of the snake which I skipped. 
    addAnimation(3000, { 
     before : function(pos) { 
      ctx.clearRect(0,0,cols,rows); 
     }, 
     render : function(pos, delta) { 
      explodePieces(pieces, pos, delta); 
     }, 
     done : callback 
    }); 
} 

И explodePieces():

function explodePieces(pieces, pos, delta) { 
    // Some calculations on every fragment's position, velocity 
    // and rotation skipped. 
     ctx.save(); 
     ctx.translate(piece.pos.x, piece.pos.y); 
     ctx.rotate(piece.rot * pos * Math.PI * 4); 
     ctx.translate(-piece.pos.x, -piece.pos.y); 
     drawObject(piece.type, 
      piece.pos.x - 0.5, 
      piece.pos.y - 0.5, 
      1, piece.rotation 
     ); 
     ctx.restore(); 
    } 
} 

Система анимации работает следующим образом: requestAnimationFrame() выполняет цикл анимации. Первый аргумент addAnimation() - это время, в течение которого анимация должна длиться долго. Во-вторых, это объект, который может иметь 3 свойства:

• перед: он готовит холст для каждого кадра анимации
• визуализации: она имеет отношение для показа каждого кадра анимации (`pos` является положение в анимации в диапазоне 0-1)
• сделано: вещи, которые выполняются после окончания анимации.

Существует также странная проблема, когда вы пытаетесь играть в игру на мобильном устройстве. Игра работает корректно (почти) в Safari (iOS) и Firefox Mobile (Android). Я не проверял его на какой-либо другой ОС. Однако даже в Safari и Firefox, когда вы переключаетесь на экран рекордов после проигрывания, кнопка внизу («Меню»), которая должна вернуть вас в главное меню, не работает, хотя она работает в настольные браузеры. Вот код, который должен сделать вещь:

dom.bind(backButton, "click", function(e) { 
     game.showScreen("main-menu"); // The showScreen function is working for sure. 
}); 

Вот dom.bind():

function bind(element, event, handler) { 
    if (typeof element == "string") { 
     element = $(element)[0]; 
    } 
    element.addEventListener(event, handler, false) 
} 

Я был бы признателен за любую помощь.

Адрес github для просмотра кода: https://github.com/lewapkon/HTML5Snake.
Файл, ответственный за графику: scripts/display.canvas.js.
Файл, где функция gameOver: scripts/screen.game.js.
Файл для рекордов меню: скрипты/screen.hiscore.js.

Answer 1

Похоже, что animValue не определен, но Firefox каким-то образом игнорирует это. Он объявлен в screen.settings.js, но никогда не назначал значение. Поскольку я понятия не имею, что это должно быть определено как, пожалуйста, изучите его и уточните свой вопрос.