Question

我做了这个脆弱的鸟类克隆。但是cancelAnimationFrame（）似乎不起作用

我不知道如何停止游戏。

cancelAnimationFrame位于函数stop（）内部，正在调用stop class Pipe更新了methode（）。

我错过了什么。

请任何人帮我解决这个问题

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

Answer 1

可能是因为这段代码：

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

cancelAnimationFrame不工作

1 个答案: