Javascript 取消动画帧不工作_Javascript

Javascript 取消动画帧不工作

javascript

Javascript 取消动画帧不工作,javascript,Javascript,我复制了这只飞禽。但是cancelAnimationFrame（）似乎不起作用我不知道如何停止我的游戏 cancelAnimationFrame位于函数stop（）的内部，正在从调用stop 为管道的更新方法（）初始化我错过了什么谁能帮我解决这个问题 <head> <meta charset="utf-8"> <title></title> <style media="screen"> #app{

我复制了这只飞禽。但是cancelAnimationFrame（）似乎不起作用

我不知道如何停止我的游戏

cancelAnimationFrame位于函数stop（）的内部，正在从调用stop 为管道的更新方法（）初始化

我错过了什么

谁能帮我解决这个问题

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">

    #app{
      height:500px;
      width:300px;
      background-color: #000;
      position: relative;
    }

    #app div{
      position:absolute;
      overflow: hidden;
      background-color: #fff;
    }

    .bird{
      border-radius:50%;
      height: 20px;
      width:20px;
      left:20px;
    }

    .pipe{
      width: 30px;
    }
  </style>
</head>
<body>
  <div id="app">
  </div>
  <script type="text/javascript">
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
    class App{
      constructor(){
        this.app = document.getElementById('app');
        this.bird = new Bird();
        this.pipe = []
        this.pipe.push(new Pipe(-30,this.bird));
        this.pipe.push(new Pipe(-130,this.bird));
        this.pipe.push(new Pipe(-230,this.bird));
        document.addEventListener("keypress",()=>{
          this.bird.jump+=10;
        });
      }
      update(){
        this.bird.update();
        this.pipe.forEach(function(p){
          p.update();
        });
        // myArray.splice(0, 2)
        if(frame%330==0){
          this.pipe.push(new Pipe(-30,this.bird));
          this.pipe.push(new Pipe(-130,this.bird));
          this.pipe.push(new Pipe(-230,this.bird));
          if(frame>990)
            this.pipe.splice(0,3);
        }
      }
    }
    class Bird{
      constructor(){
        this.el=document.createElement("div");
        this.el.setAttribute("class","bird");
        this.el.style.top=(app.clientHeight/2-10)+"px";
        app.appendChild(this.el);
        this.jump=0;
      }
      update(){
        if(this.jump>0){
          this.jumpf();
          this.jump--;
        }else
          this.fall();
      }
      jumpf(){
      this.el.style.top=n2p(p2n(this.el.style.top)-10);
      }
      fall(){
        this.el.style.top=(p2n(this.el.style.top)<app.clientHeight)?(n2p(p2n(this.el.style.top)+5)) : this.el.style.top;
      }
    }

    class Pipe{
      constructor(right=-30,bird){
        this.el=[];
        this.bird=bird;
        this.el.push(document.createElement("div"));
        this.el.push(document.createElement("div"));
        this.pipeNum=1;
        this.height1=0;
        this.el.forEach(
          (pipe)=>{
            pipe.setAttribute("class","pipe");
            app.appendChild(pipe);
            pipe.style.right=right+"px";
            if(this.pipeNum==1){
              pipe.style.height=this.height1=n2p(Math.random()*400);
              pipe.style.bottom="0px";
              this.pipeNum++;
            }else{
              pipe.style.height=n2p((400-p2n(this.height1))*Math.random());
              pipe.style.top="0px";
              this.pipeNum--;
            }
          });
      }
      update(){
        this.el.forEach((pipe)=>{
          pipe.style.right=n2p(p2n(pipe.style.right)+1);
          if(this.pipeNum==1 && p2n(pipe.style.right)>230 && p2n(pipe.style.right)<=280 && (500-(p2n(pipe.style.bottom) + pipe.clientHeight)) < (p2n(this.bird.el.style.top)+this.bird.el.clientHeight)){
            pipe.style.background="red";
            stop();
          }else if(this.pipeNum==2 && p2n(pipe.style.right)>230 && p2n(pipe.style.right)<=280 && pipe.clientHeight > p2n(this.bird.el.style.top)){
            pipe.style.background="red";
            stop();
          }
          if(this.pipeNum==1)
            this.pipeNum++;
          else
            this.pipeNum--;
          if(app.count%330==0)
            app.removeChild(pipe);
        });
      }
    }
    var game = new App();
    var frame;
    function start(){
      game.update();
      frame=requestAnimationFrame(start);
    }
    start();
    function p2n(num){
      return parseInt(num.replace("px",""));
    }
    function n2p(num){
      return num+"px";
    }
    function stop(){
      if(frame)
      console.log("asdfas");
      cancelAnimationFrame(frame);
    }
  </script>
</body>


#应用程序{
高度：500px；
宽度：300px；
背景色：#000；
位置：相对位置；
}
#应用程序部{
位置：绝对位置；
溢出：隐藏；
背景色：#fff；
}
伯德先生{
边界半径：50%；
高度：20px；
宽度：20px；
左：20px；
}
.烟斗{
宽度：30px；
}
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
var cancelAnimationFrame=window.cancelAnimationFrame | | window.mozCancelAnimationFrame；
类应用程序{
构造函数（）{
this.app=document.getElementById（'app'）；
this.bird=新鸟（）；
this.pipe=[]
这个.pipe.push（新管道（-30，这个.bird））；
这个.pipe.push（新管道（-130，这个.bird））；
这个.pipe.push（新管道（-230，这个.bird））；
document.addEventListener（“按键键”），（）=>{
这个.bird.jump+=10；
});
}
更新（）{
this.bird.update（）；
this.pipe.forEach（函数（p）{
p、 更新（）；
});
//myArray.splice（0,2）
如果（帧%330==0）{
这个.pipe.push（新管道（-30，这个.bird））；
这个.pipe.push（新管道（-130，这个.bird））；
这个.pipe.push（新管道（-230，这个.bird））；
如果（帧>990）
该管道接头（0,3）；
}
}
}
班鸟{
构造函数（）{
this.el=document.createElement（“div”）；
这个.el.setAttribute（“类”、“鸟”）；
this.el.style.top=（app.clientHeight/2-10）+“px”；
append.child（this.el）；
这个.jump=0；
}
更新（）{
如果（此跳转>0）{
这个.jumpf（）；
这个.跳--；
}否则
这个秋天（）；
}
jumpf（）{
this.el.style.top=n2p（p2n（this.el.style.top）-10）；
}
秋天{
this.el.style.top=（p2n（this.el.style.top）{
setAttribute（“类”、“管道”）；
附件二（管道）；
pipe.style.right=right+px；
if（this.pipeNum==1）{
pipe.style.height=this.height1=n2p（Math.random（）*400）；
pipe.style.bottom=“0px”；
这个.pipeNum++；
}否则{
pipe.style.height=n2p（（400-p2n（this.height1））*Math.random（）；
pipe.style.top=“0px”；
这是胡椒；
}
});
}
更新（）{
此.el.forEach（（管道）=>{
pipe.style.right=n2p（p2n（pipe.style.right）+1）；
如果（this.pipeNum==1&&p2n（pipe.style.right）>230&&p2n（pipe.style.right）230&&p2n（pipe.style.right）p2n（this.bird.el.style.top））{
pipe.style.background=“红色”；
停止（）；
}
if（this.pipeNum==1）
这个.pipeNum++；
其他的
这是胡椒；
如果（应用程序计数%330==0）
附件：removeChild（管道）；
});
}
}
var game=新应用程序（）；
var框架；
函数start（）{
game.update（）；
帧=请求动画帧（开始）；
}
start（）；
函数p2n（num）{
返回parseInt（num.replace（“px”）和“”）；
}
函数n2p（num）{
返回num+“px”；
}
函数停止（）{
如果（帧）
控制台日志（“asdfas”）；
取消动画帧（帧）；
}

可能是因为以下代码：

function start(){
  game.update();
  // game.update calls stop if conditions met
  // stop calls cancelAnimationFrame
  // then function start called again on following line
  frame=requestAnimationFrame(start);
}

我认为你可以做到这一点：

   var stopGame;

   function start(){
      stopGame = false;
      game.update();
      if (stopGame === false) {
          frame=requestAnimationFrame(start);
      }
    }

function stop(){
  if(frame) {
     console.log("asdfas");
     cancelAnimationFrame(frame);
     stopGame = true;
  }
}