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循環所取代。

重命名您的區間變量名稱