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); } 

不断重启和跟踪用户操作，会浪费内存。

我的决定

因此，我着重强调了Internet上解决方案的主要问题，将所有内容放在一起，得到了以下内容：

首先，我们声明重新渲染的对象本身，对象位置的全局变量和要暂停的变量，以及一个数组，稍后我们将对其进行介绍。

 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; } } 

所以，事情很小，我们添加了一个函数来处理暂停/取消暂停

 function SetPause(){ if(pause==true){ UnPause(); }else{ pause=true; } } function UnPause(){ pause=false; //         for(i=0;i<functions.length;i++){ eval(functions[i]); } //     functions =[]; } 

一切准备就绪，我们有了一种不会白费力气的内存的机制，并提供了在暂停期间与页面进行交互的机会。

本文旨在帮助您。 如果有人以前曾见过这样的解决方案，我深表歉意。 感谢您的关注！