CODEWITHSUNDEEP
javascriptcanvas
Vlad Balanescu
Vlad Balanescu

Reputation: 674

clearInterval won't stop setInterval

I have this piece of game for a bricks game in javascript. The thing is that my clearInterval function doesn't want to stop even if it's globally declared. I added here my draw function which renders the canvas each time when that setInterval is called.

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

Upvotes: 1

Views: 341

Answers (2)

user3162662
user3162662

Reputation: 793

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

it seems that variable i has been replaced by the for loop.

Rename your interval variable name

Upvotes: 2

Alnitak
Alnitak

Reputation: 339816

You've got multiple variables called i, and the one in the draw function hasn't been given a var declaration specifier so it's overwriting your timer variable.

In any event (pun not intended) you should investigate window.requestAnimationFrame to handle your screen refreshes, and not use timers at all. It'll make your game animation much smoother.

Upvotes: 2

Related Questions