0
私はこの華やかな鳥クローンを作った。しかしcancelAnimationFrame（）はうまくいかないようです。cancelAnimationFrame Not Working
そして私はゲームを止める方法を知らない。
cancelAnimationFrameはfunction stop（）内にあり、 クラスのパイプ更新メソッドから呼び出されています（）。
何が欠けていますか？
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);
}
は、私はあなたがこれを行うことができると思う：
誰も私がこの問題
おそらく理由は、このコードの<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>