Паузы в играх HTML5

Предыстория

Будучи в процессе разработки своей первой html5 игры я столкнулся с рядом трудностей, для большинства из них полно готовых решений в сети, однако грамотного ответа на вопрос:«Как сделать паузу в html5 игре?» — Я не нашел. Всех кому данная тема интересна или необходима — прошу далее…

Подробнее о решениях

Все решения найденные мной в интернете так или иначе действуют по принципу while.
Примеры ниже:

Пример 1

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two second later');
}

demo();

В данном случае мы задаем паузу на какое-то время, по его прошествии игра продолжается…
Данное решение не подойдет в большинстве случаев хотя бы потому, что мы не знаем на сколько пользователь поставит паузу, а также во время выполнения функции пользователь не сможет взаимодействовать с меню.

Пример 2

function render(){
if(canRender == false){
requestAnimationFrame(render);
}else{
//some code
requestAnimationFrame(render);
}

Постоянный перезапуск и отслеживания действий пользователя, память тратится в пустую.

Мое решение

Итак, выделив основные проблемы найденных на просторах интернета решений, я, собрав все вместе, получил следующее:

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

let sqrt=document.getElementById('sqrt'),rend=0,pause=false,functions=[];

Теперь объявим саму функцию рендеринга, которую и нужно ставить на паузу:

function render(){
rend+=1.5;
sqrt.style = 'bottom:' + rend +'vh';
if(rend<80){
requestAnimationFrame(render);
}else{
rend=0;
return;
}
}

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

function render(){
if(pause!=false){
//Добавляем имя функции в массив для дальнейшего запуска
functions.push("render()");
//прекращаем выполнение функции
return;
}
rend+=1.5;
sqrt.style = 'bottom:' + rend +'vh';
if(rend<80){
requestAnimationFrame(render);
}else{
rend=0;
return;
}
}

Итак, дело за малым, добавляем функцию для обработки pause/unpause

function SetPause(){
if(pause==true){
UnPause();
}else{
pause=true;
}
}

function UnPause(){
pause=false;
//проходим по всем приостановленным функциям и запускаем их снова
for(i=0;i<functions.length;i++){
eval(functions[i]);
}
//обнуляем массив для дальнейшего использования
functions =[];
}

Все готово, мы получили механизм не кушающий память за зря и дающий возможность взаимодействия со страницей во время паузы.

Данная статья была написана в целях помощи. Если кто либо видел такое решение ранее — прошу прощения. Спасибо за внимание!