Hi,
i made a game,where you controll a paddle to bounce back a ball and it hits the bricks on top.
The problem is that my eventhandlers don't work after i've added delay function,to make a counter(counting from 3 to 1 before game starts).
Any tips?Is it scope problem?

Code:
var ballx = 100;
var bally = 100;    //coord x and y,radius of a ball
var ballr = 10;
var recx;
var recy;           //coord x and y,width and height of a paddle
var recw = 100;
var rech = 15;
var dx = 2;        //x coord step for animated movement of ball
var dy = 2;        //y coord step for animated movement of ball
var rx = 5;        //x coord step for animated movement of paddle
var WIDTH;        //width of main canvas
var HEIGHT;       //height of main canvas
var ctx;               //drawn shape
var leftDown = false;   
var rightDown = false;        //keyboard arrow buttons
var upDown = false;
var downDown = false;
var mouseXmin;
var mouseXmax;
var intervalId;
var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;
var y=4;

window.addEventListener("load",init,false);               //event for loading main func
window.addEventListener("keydown",buttonpressed,false);   //event for checking if button is pressed
window.addEventListener("keyup",buttonreleased,false);    //event to check if button is released
window.addEventListener("mousemove",mousemoved,false);    //event for controlling paddle with mouse movement

function init_mouse(){    //initialize coord for mouse movement

mouseXmin = document.getElementById('can').offsetLeft;
mouseXmax = mouseXmin + (WIDTH-recw);             //doesn't work that pretty...check?

}

function init_bricks(){ //initialize bricks

   NROWS = 5;
   NCOLS = 3;
   BRICKWIDTH = (WIDTH/NCOLS) - 1;
   BRICKHEIGHT = 15;
   PADDING = 1;
   
   bricks = new Array(NROWS);
   for(i=0; i<NROWS; i++){
      bricks[i] = new Array(NCOLS);
	  for(j=0; j<NCOLS; j++){
	     bricks[i][j] = 1;
      }
   } 
}

function mousemoved(e){    //function that enables movement of paddle with mouse

if(e.pageX > mouseXmin && e.pageX < mouseXmax) recx = e.pageX ;//- mouseXmin; <---why would you need that?Movement is bugyy! FIX:)

}

function buttonpressed(e){                 //to check if any of keyboard arrow buttons are pressed
                                           
if(e.which==37) { leftDown = true; }
if(e.which==39) { rightDown = true; }
if(e.which==40) { upDown = true; }
if(e.which==38) { downDown = true; }

}

function buttonreleased(e){             //function to check if button up,down,left or right is released
                                         
if(e.which==37) { leftDown = false; }
if(e.which==39) { rightDown = false; }
if(e.which==40) { upDown = false; }
if(e.which==38) { downDown = false; }

}

function clear(){                     //function to clear the stage

ctx.clearRect(0,0,800,600);

}

function circle(x,y,r){               //function to draw circle shape

ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

}

function rect(x,y,w,h){     //function to draw rectangle shape

ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();

}

function checkforCoallision(){  //checks for borders of main canvas and if ball hits the paddle

if(ballx + dx > WIDTH-ballr || ballx + dx < ballr) dx = -dx;           
if(bally + dy < ballr ) dy = -dy;
else if (bally + dy > HEIGHT - ballr){
        if(ballx +  ballr > recx && ballx + ballr < recx + recw)
		   dy = -dy;
		else {clearInterval(intervalId); alert('Game Over,Baby!');} bounce();}

}

function draw(){           //function that draws the desired shapes and animates them

clear();                  //clears the main canvas,so the animation would look smooth

checkforCoallision();    //checks for borders of main canvas and if ball hits the paddle
		
if(leftDown) recx -= rx;                                //enables movement of paddle right and left
if(rightDown) recx += rx;

for(i=0; i<NROWS; i++){              //drawing bricks
   for(j=0; j<NCOLS; j++){
      if(bricks[i][j] == 1) {         //checking if brick exists
         rect(j * (BRICKWIDTH+PADDING)+PADDING,i * (BRICKHEIGHT+PADDING) + PADDING, BRICKWIDTH, BRICKHEIGHT)
	  }  
   }
}

//have we hit a 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;
  }

circle(ballx,bally,ballr);
rect(recx,recy,recw,rech);

ballx += dx;
bally += dy;

}



/* function init(){
ctx = document.getElementById('can').getContext('2d');
WIDTH = document.getElementById('can').offsetWidth ;       //gets the width of main canvas
HEIGHT = document.getElementById('can').offsetHeight ;     //gets the height of main canvastto
recx = WIDTH / 2;                                            //setting the coord x of a paddle
recy = HEIGHT - rech;                                      //setting the coord y of a paddle
init_mouse();
init_bricks();
intervalId = setInterval(draw,10);                          //calls draw func on desired interval,which is represented by number next to it
return intervalId;

}  */

function delay() {

if(y<=0) { 
document.getElementById('content2').innerHTML = "<canvas id='can' width='300' height='300'>This text is displayed if your browser does not support HTML5 Canvas.</canvas>";
ctx = document.getElementById('can').getContext('2d');
WIDTH = document.getElementById('can').offsetWidth ;       //gets the width of main canvas
HEIGHT = document.getElementById('can').offsetHeight ;     //gets the height of main canvastto
recx = WIDTH / 2;                                            //setting the coord x of a paddle
recy = HEIGHT - rech;                                      //setting the coord y of a paddle
init_mouse();
init_bricks();
intervalId = setInterval(draw,10);                          //calls draw func on desired interval,which is represented by number next to it
return intervalId;
 }
else { 
        Object = document.getElementById('content2');
		y = y - 1;
		Object.innerHTML = "<div style='text-align:center;width:25em;margin: 0px auto;height:100px;position:absolute;top:50%;margin-top:-50px;'>"+y+"</div>";
			setTimeout("delay()", 1000);}
}