Javascript停止计时器，停止动画，画布答案

【问题标题】：Javascript stopping timers, stopping animation, canvas'sJavascript停止计时器，停止动画，画布
【发布时间】：2014-04-05 18:19:24
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<style>
    #container { 
    width: 320px; 
    height: 400px;
    border: 1px solid red;

    }
    #top { 
    width: 320px; 
    height: 80px;
    border: 1px solid blue;

    }

</style>

</head>
<body>

<div id="top">

<p> hello</p>
</div>


<div style="position: relative;" id="container">

 <canvas id="myCanvas" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
    <canvas id="plane" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
    <canvas id="buildings" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
       <canvas id="cloud" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

    <canvas id="buildings2" width="320" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

 <canvas id="canvas2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>



<script>
var c=document.getElementById("myCanvas");
var c2=document.getElementById("canvas2");
var c3=document.getElementById("plane");
var c4=document.getElementById("buildings");
var c5=document.getElementById("buildings2");
var c6=document.getElementById("cloud");

var heighting2 = 200;
var heightings3 = 200;
var plane;
var ground;
var score1 = "1"
var score = score1;
var increase = 6;
var delay = 40;
var scorez;
var fall = 100;
var moving = 1;
var locations = 380;
var locations2 = 580;
var cloud_loc = 50;

start();

function stop(){
    How would I completely stop my code?
}
function start(){
    backgrounds();
    var scorez = setInterval(scoring, delay);
    setInterval(planeUpdate, delay);
    setInterval(moving, delay);
    setInterval(donwer, delay);
    setInterval(obstic, delay);
    setInterval(obstic2, delay);
    setInterval(colid, delay);
    cloud();

}
function colid(){
    if(fall < 50){
        loes();
    }
    if(fall > 370){
        loes();

    }
}

function backgrounds(){
    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,0, 280);
    my_gradient.addColorStop(0,"white");
    my_gradient.addColorStop(1,"blue");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(0,0,320,400);

    ground = c.getContext("2d");
    ctx.fillStyle="black";
    ctx.fillRect(0,370 , 320 ,30);

}

function scoring(){
    scores();
    score2();

}
function scores(){
    score -= 3-(3+increase);
    locations -= moving;
    locations2 -= moving;

    moving -= 0-(score / 100000);


}
function score2(){
    var context = c2.getContext('2d');
    context.clearRect(0, 0, c2.width, c2.height);
    var w = c2.width;
    c2.width = 1;
    c2.width = w;

    var text=c2.getContext("2d");
    text.font="20px Georgia";
    text.fillText(score ,15,20);
    var text=c2.getContext("2d");
    text.font="20px Georgia";
    text.fillText(fall ,40,40);
    var text=c2.getContext("2d");
    text.font="20px Georgia";
    text.fillText(locations ,60,60);


}


function loes(){
    clearInterval(planeUpdate);
    clearInterval(moving);
    clearInterval(donwer);
    clearInterval(obstic);
    clearInterval(obstic2);
    clearInterval(colid);
    var text=c6.getContext("2d");
    text.font="80px Georgia";
    text.fillText("You lost!" ,0,160);



}


    plane = c3.getContext('2d');
    var img = new Image();
    img.src = "images/Plane.png"; //transparent png


function planeUpdate(){
    var context = c3.getContext('2d');
    context.clearRect(0, 0, c3.width, c3.height);
    var w = c3.width;
    c3.width = 1;
    c3.width = w;

        plane.drawImage(img, 40, fall, 50, 50);


}
function donwer(){
    //c.onmousedown = function(e){
        fall -= 2-3;
    //}
}

    var imgone = new Image();
        imgone.src = "images/building.png"; //transparent png


function obstic(){
    if(locations > -51){
    if(locations < 500){
        if(locations > 330){
            heighting2 = Math.floor((Math.random()*200)+100);
        }
    }
        var context = c4.getContext('2d');
        context.clearRect(0, 0, c4.width, c4.height);
        var w = c4.width;
        c4.width = 1;
        c4.width = w;
        var build = c4.getContext('2d');
        build.drawImage(imgone, locations, 400 - heighting2, heighting2/4, heighting2);
    }else{
        var context = c4.getContext('2d');
        context.clearRect(-55, 0, 55, c4.height);
        var w = c4.width;
        c4.width = 1;
        c4.width = w;
        locations = 380;
    }



}
function obstic2(){
    if(locations2 > -51){
        if(locations2 < 500){
            if(locations2 > 330){
                heightings3 = Math.floor((Math.random()*200)+100);
            }
        }
        var context = c5.getContext('2d');
        context.clearRect(0, 0, c5.width, c5.height);
        var w = c4.width;
        c5.width = 1;
        c5.width = w;
        var build = c5.getContext('2d');
        build.drawImage(imgone, locations2, 400 - heightings3, heightings3/4, heightings3);
    }else{
        var context = c4.getContext('2d');
        context.clearRect(-55, 0, 55, c4.height);
        var w = c4.width;
        c4.width = 1;
        c4.width = w;
        locations2 = 380;
    }



}

function cloud(){
        var cloud = new Image();
        var storm = c6.getContext('2d');
        cloud.onload = function(){
        storm.drawImage(cloud, 0, 0, 100, 50);

        };
        cloud.src = "images/Cloud.gif"; //transparent png

        var cloud = new Image();
        var storm = c6.getContext('2d');
        cloud.onload = function(){
        storm.drawImage(cloud, 50, 0, 100, 50);

        };
        cloud.src = "images/Cloud.gif"; //transparent png

        var cloud = new Image();
        var storm = c6.getContext('2d');
        cloud.onload = function(){
        storm.drawImage(cloud, 75, 0, 100, 50);

        };
        cloud.src = "images/Cloud.gif"; //transparent png


        var cloud = new Image();
        var storm = c6.getContext('2d');
        cloud.onload = function(){
        storm.drawImage(cloud, 100, 0, 100, 50);

        };
        cloud.src = "images/Cloud.gif"; //transparent png

        var cloud = new Image();
        var storm = c6.getContext('2d');
        cloud.onload = function(){
        storm.drawImage(cloud, 135, 0, 100, 50);

        };
        cloud.src = "images/Cloud.gif"; //transparent png

        var cloud = new Image();
        var storm = c6.getContext('2d');
        cloud.onload = function(){
        storm.drawImage(cloud, 170, 0, 100, 50);

        };

        cloud.src = "images/Cloud.gif"; //transparent png

        var cloud = new Image();
        var storm = c6.getContext('2d');
        cloud.onload = function(){
        storm.drawImage(cloud, 195, 0, 100, 50);

        };
        cloud.src = "images/Cloud.gif"; //transparent png


        var cloud = new Image();
        var storm = c6.getContext('2d');
        cloud.onload = function(){
        storm.drawImage(cloud, 220, 0, 100, 50);

        };
        cloud.src = "images/Cloud.gif"; //transparent png



}

</script> 
</body>
</html>

到目前为止，我的代码运行良好，唯一的问题是当飞机撞到地面时

飞机继续下降
建筑物仍然在屏幕上滚动

在函数stop 中，我将如何停止程序？还有如何检查飞机是否撞到建筑物？

【问题讨论】：

标签： javascript

【解决方案1】：

如您所见here，setInterval 方法返回一个指向计时器的指针，您可以稍后将其发送给clearInterval。所以你可以创建一些全局变量并使用它们。

例如：

function start(){
    backgrounds();
    var scorez = setInterval(scoring, delay);
    timer1 = setInterval(planeUpdate, delay);
    timer2 = setInterval(moving, delay);
    timer3 = setInterval(donwer, delay);
    timer4 = setInterval(obstic, delay);
    timer5 = setInterval(obstic2, delay);
    timer6 = setInterval(colid, delay);
    cloud();

}

以及稍后在stop 方法中：

function stop(){
     clearInterval(timer1);
     clearInterval(timer2);
     clearInterval(timer3);
     clearInterval(timer4);
     clearInterval(timer5);
     clearInterval(timer6);
}

当然，您可能只想清除其中的一个子集，或者将它们放入数组中以获得更易读的代码。

【讨论】：