clearInterval不会停止setInterval

Question

我有一段用javascript制作的游戏。 事实是，即使我的clearInterval函数是全局声明的，也不想停止。 我在这里添加了我的绘制函数，该函数每次调用setInterval时都会渲染画布。

initbricks();
draw();
init_mouse();
var i = setInterval(draw,100);  

function play(){    
    document.getElementById("play").disabled = true;
}     

function reset(){
    clear();
    clearInterval(i);
}

//Initialize game
function init() {
    document.getElementById("play").addEventListener("click", play);
    document.getElementById("reset").addEventListener("click", reset);
}

//Load canvas after window has loaded
if (document.getElementById) window.onload=init;

function draw() {
    clear();
    circle(ballX,ballY,radius);  
    rect(paddlex, height-paddleh, paddlew, paddleh);

    //draw bricks
    for (i=0; i < NROWS; i++) {
        ctx.fillStyle = rowcolors[i];  
        for (j=0; j < NCOLS; j++) {
            if (bricks[i][j] == 1) {
                rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
                     (i * (BRICKHEIGHT + PADDING)) + PADDING,
                     BRICKWIDTH, BRICKHEIGHT);
            }
        }
    }

    // hit brick?
    rowheight = BRICKHEIGHT + PADDING;
    colwidth = BRICKWIDTH + PADDING;
    row = Math.floor(ballY/rowheight);
    col = Math.floor(ballX/colwidth);
    // if so, reverse the ball and mark the brick as broken
    if (ballY<NROWS*rowheight && row>=0 && col>=0 && bricks[row][col]==1) {
        dy = -dy;
        bricks[row][col] = 0;
    }

    // if game not over, move paddle
    if (ballY+dy<height)
        if (rightDown && paddlex+paddlew<width)
            paddlex += 5;
        else if (leftDown && paddlex>0)
            paddlex -= 5;

    // Right/Left stop condition
    if (ballX+dx>width-5 || ballX+dx<5)
        dx= -dx;

    // Up stop condition
    if (ballY+dy<5)
        dy= -dy;

    // Down stop condition
    else 
        //i f ball is on the paddle
        if (ballY+dy>height-20 && ballX>paddlex && ballX<paddlex+paddlew) 
            dy= -dy;

    // if ball is not on the paddle
    else if (ballY+dy>height+20){
        // game over, so stop the animation
        clearInterval(i);
    }                                                 
    ballX += dx;
    ballY += dy;
}

Answer 1

您有多个名为i变量，并且draw函数中的变量没有被赋予var声明说明符，因此它将覆盖您的timer变量。

无论如何（不希望使用双关语），您应该研究window.requestAnimationFrame来处理屏幕刷新，并且根本不使用计时器。 它将使您的游戏动画更加流畅。

Answer 2

for (i=0; i < NROWS; i++) {

似乎变量i已经被for循环所取代。

重命名您的区间变量名称