JavaScript - Beginner. Need Help Finishing A Simple Shoot Em Up Game!!!!

<script>

//NODES:
var nodeA = {name:"A"};
var nodeB = {name:"B"};
var nodeC = {name:"C"};
var nodeD = {name:"D"};
var nodeE = {name:"E"};
var nodeF = {name:"F"};
var nodeG = {name:"G"};
var nodeH = {name:"H"};
var nodeI = {name:"I"};
var nodeJ = {name:"J"};
var nodeK = {name:"K"};
//An array of all nodes in the system:
var systemArray = [nodeA, nodeB, nodeC, nodeD, nodeE, nodeF, nodeG, nodeH, nodeI, nodeJ, nodeK];

//Connecting Nodes (cNodes):
//(uni-directional, but cyclical)
nodeA.cNodes = [nodeB, nodeC];
nodeB.cNodes = [nodeD, nodeE, nodeF];
nodeC.cNodes = [nodeF, nodeG];
nodeD.cNodes = [nodeI, nodeH];
nodeE.cNodes = [nodeJ];
nodeF.cNodes = [nodeK];
nodeG.cNodes = [nodeK];
nodeJ.cNodes = [nodeA];
nodeK.cNodes = [nodeA];
nodeI.cNodes = [nodeA];
nodeH.cNodes = [nodeA];

//The path chosen (generated from code not included here)
var pathArray = [nodeA, nodeB, nodeE, nodeJ];

//nodeChoice will represent a cNode from any given node
var nodeChoice;

//chooseNode is supposed to assign nodeChoice the next element in pathArray if the player on on the right path (if at nodeB, nodeChoice = nodeE).
//However, if the user has taken a different path, its cNodes will not be in pathArray in which case a random cNode is assigned to nodeChoice
function chooseNode(_node) {
	//check each cNode to see if any are in pathArray
	for (var j = 0; j < _node.cNodes.length; j++) {
		//if a cNode is in pathArray, then we know to assign it nodeChoice...
		if (_node.cNodes[j] in pathArray) {
			nodeChoice = _node.cNodes[j];
			console.log("choiceNode CORRECT: " + nodeChoice.name); //(for debugging purposes only)
		}
		//...otherwise don't do anything in this forLoop/ifStatement
	};
	//if by this point nodeChoice is still undefined, meaning none of the current node's cNodes are in pathArray, assign it any one of its cNodes.
	if (nodeChoice == undefined) {
		nodeChoice = _node.cNodes[Math.floor(Math.random()* _node.cNodes.length)];
			console.log("choiceNode INCORRECT: " + nodeChoice.name);//(for debugging purposes only)
	};	
};

//Runtime:

chooseNode(nodeB);
//Result should be only nodeE.name since nodeD is not in the pathArray...
console.log(nodeChoice.name);

</script>

<h1>Image slider</h1>
<span id="number"></span>
<div id="sliderContainer">
<div id="leftButton"><a href="#" id="slideLeft"><</a></div>
<div id="rightButton" onclick="moveRight()">></div>
<div id="gallery"><img id="theImage" height="400"  style="position:relative;left:0px;" /></div>
</div>




<script type="text/javascript">

var theImages=["images/a.jpg","images/b.jpg","images/c.jpg", "images/d.jpg", "images/e.jpg"]; // Build the array of text
var arrayRows = theImages.length; //Get the length of the array (Note: This starts at 1 not 0 like the array)
var i=0; //Set a counter
document.getElementById('theImage').src = theImages[0];
document.getElementById('number').innerHTML = arrayRows - 1;

function moveRight1() {
	
	var pp = document.getElementById("theImage");
	var lft = parseInt(pp.style.left);
	var tim = setTimeout("moveRight1()",1);  // 1 controls the speed
	lft = lft+15;  // move by 15 pixels
	pp.style.left = lft+"px";
	if (lft > 600) {  // left edge of image past the right edge of screen
		
		clearTimeout(tim);
		pp.style.left = "-600px";
		i++;
if (i >= (arrayRows - 1)) {
i = 0;
}
		moveLeft1();
			
	
	}
}

function moveLeft1() {
	
	document.getElementById('theImage').src = theImages[i];
	var pp = document.getElementById("theImage");
	var lft = parseInt(pp.style.left);
	var tim = setTimeout("moveLeft1()",1);  // 1 controls the speed
	lft = lft+15;  // move by 15 pixels
	pp.style.left = lft+"px";
	if (lft > 0) {  // left edge of image past the right edge of screen
		pp.style.left = "0px";
		clearTimeout(tim);
		
	}
	document.getElementById('number').innerHTML = i;
	
}


</script>

if (start > end) {
    for (i = start; i <= end; i++) {

if (start > end) {

if (start < end) {

function orderForm() {
	var formDaysStaying = document.getElementById("daysStaying").value;
	var formSeason = document.getElementById("season").value;
	var formPropertyType = document.getElementById("propertyType").value;
    document.getElementById("FEE").value = "$" + today.toFixed(2);
    document.getElementById("totalCost").value = "$" + today.toFixed(2);	
    document.getElementById("today").value = "$" + today.toFixed(2);
    document.getElementById("due").value = "$" + due.toFixed(2);	
    }


function formTotalCost(form) {
	const FEE = 55;
    var totalCost = (formPropertyType * formSeason) * formDaysStaying;
	var today = totalCost * .10;
	var due = (totalCost + FEE) - today;
    if (document.getElementById("daysStaying").value == "" ||
    isNaN(document.getElementById("daysStaying").value))
    alert("Please provide the number of days you will be staying.");
          // Submit the order to the server
          form.submit();
}

// awesome goblin game
// assetLoader
  /**
   * Ensure all assets are loaded before using them
   * @param {number} dic  - Dictionary name ('imgs', 'sounds', 'fonts')
   * @param {number} name - Asset name in the dictionary
   */
  function assetLoaded(dic, name) {
    // don't count assets that have already loaded
    if (this[dic][name].status !== 'loading') {
      return;
    }
    this[dic][name].status = 'loaded';
    assetsLoaded++;
    // progress callback
    if (typeof this.progress === 'function') {
      this.progress(assetsLoaded, this.totalAssest);
    }
    // finished callback
    if (assetsLoaded === this.totalAssest && typeof this.finished === 'function') {
      this.finished();
    }
  }
// before assetLoader.finished()
/**
 * Show asset loading progress
 * @param {integer} progress - Number of assets loaded
 * @param {integer} total - Total number of assets
 */
assetLoader.progress = function(progress, total) {
  var pBar = document.getElementById('progress-bar');
  pBar.value = progress / total;
  document.getElementById('p').innerHTML = Math.round(pBar.value * 100) + "%";
}
/**
 * Show the main menu after loading all assets
 */
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

function mainMenu() {
  $('#progress').hide();
  $('#main').show();
  $('#menu').addClass('main');
}

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
	bgReady = true;
};
bgImage.src = "images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
	heroReady = true;
};
heroImage.src = "images/hero_sheet.png";

// Treasure image
var treasureReady = false;
var treasureImage = new Image();
treasureImage.onload = function () {
	treasureReady = true;
};
treasureImage.src = "images/treasure.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
	monsterReady = true;
};
monsterImage.src = "images/monster.png";

// Game objects
var backgrounder = {
	speed: 0,
	x: 0,
	y: 0
};
var hero = {
	speed: 256, // movement in pixels per second
	x: 0,
	y: 0
};
var monster = {
	speed: 256, 
	x: 0,
	y: 0
};
var treasure = {
	x:0,
	y:0
};
var treasureCaught = 0;
var treasureTimer= 0;
var treasureTime= 50;
var monstersCaught = 0;
var delta = 0;
var lives = 3;
var directionMonster = 0;
var directionDuration = 20;



var goThisWay = 1;
// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode];
}, false);

// Reset the game when the player catches a monster
var reset = function () {
	hero.x = canvas.width / 2;
	hero.y = canvas.height / 2;

	// Throw the monster somewhere on the screen randomly
	monster.x = 32 + (Math.random() * (canvas.width - 64));
	monster.y = 32 + (Math.random() * (canvas.height - 64));
};
//restart the game
var restartGame = function (){
	
//when you die screen turns black
ctx.fillStyle="#000000";//color
ctx.fillRect(32,32,canvas.width-64,canvas.height-64);//draw rectangle with the bushes still in place
//show that you're dead
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.textAlign = "center";
ctx.fillText("GameOver Press R to reset",canvas.width/2, canvas.height/2);
//R to reset pressed	
if (82 in keysDown){
	//reset assets
	lives = 3;
	treasureCaught = 0;
}	
	
};
// Update game objects
var update = function (modifier) {
	if (38 in keysDown) { // Player holding up
		
		//check if hero walks from screen
		if (hero.y <= 32){
			//if hero walks from screen top, stay at exact y axle
			hero.y = hero.y;
		} 
		else{
			//move hero up
		hero.y -= hero.speed * modifier;
		}
		// end of upmovement
	}
	if (40 in keysDown) { // Player holding down
		//check if hero walks from screen
		if (hero.y >= canvas.height -64){
			//if hero walks from screen bottom, stay at exact y axle
			hero.y = hero.y;
		} 
		else{
			//move hero down
		hero.y += hero.speed * modifier;
		}// end of downmovement
	}
	
	if (37 in keysDown) { // Player holding left
		//check if hero walks from screen
		if (hero.x <= 32){
			//if hero walks from screen left, stay at exact x axle
		hero.x = hero.x;
			
		}
		else{
			//move hero left
		hero.x -= hero.speed * modifier;
		}//end of left movement
	}
	if (39 in keysDown) { // Player holding right
		//check if hero walks from screen
		if (hero.x >= canvas.width -64){
			//if hero walks from screen right, stay at exact x axle
			hero.x=hero.x;
		}
		else{
			//move hero right
		hero.x += hero.speed * modifier;
		}//end of right movement
	}

	// Are they touching? MONSTER
	if (
		hero.x <= (monster.x + 32)
		&& monster.x <= (hero.x + 32)
		&& hero.y <= (monster.y + 32)
		&& monster.y <= (hero.y + 32)
	) {
		--lives;
		reset();
	}
	// Are they touching? TREASURE
	if (
		hero.x <= (treasure.x + 32)
		&& treasure.x <= (hero.x + 32)
		&& hero.y <= (treasure.y + 32)
		&& treasure.y <= (hero.y + 32)
	) {
		treasureTimer = treasureTime;
		++treasureCaught;

	}
};
//make our monster move :)
var monsterMove = function (modifier){
	
	
	
	++directionMonster;
	
	if (directionMonster <= directionDuration){
		//bewegingen
		//rechts => links
	if (goThisWay == 1)	{
		monster.x = monster.x - (monster.speed * modifier);
	if (monster.x <= 32){
		goThisWay = 2;
	}
	}
	//links => rechts
	if (goThisWay == 2)	{
		monster.x = monster.x + (monster.speed * modifier);
	if (monster.x >= canvas.width-64){
		goThisWay=1;
	}
	}
	//boven => onderen
	if (goThisWay == 3)	{
		monster.y = monster.y + (monster.speed * modifier);
	if (monster.y >= canvas.height-64){
		goThisWay=4;

	}
	}
	//onderen => boven
	if (goThisWay == 4)	{
		monster.y = monster.y - (monster.speed * modifier);
	if (monster.y <= 32){
		goThisWay=3;

	}
	}		
	//bepalen welke richting
	if (directionMonster ==directionDuration){
		directionMonster = 0;
		goThisWay = Math.floor((Math.random() * 4) + 1);
		//console.log (goThisWay);
	}	
	}
	};
// Draw everything
var render = function () {
	if (bgReady) {
	 //backgrounder.x = backgrounder.x +1;	
	backgrounder.x = 0;
		ctx.drawImage(bgImage, backgrounder.x, 0);
	}
	

	if (heroReady) {
		ctx.drawImage(heroImage, hero.x, hero.y);
	}

	if (monsterReady) {
		ctx.drawImage(monsterImage, monster.x, monster.y);
	}
if (treasureReady) {
		ctx.drawImage(treasureImage, treasure.x, treasure.y);
	}
	// Score
	ctx.fillStyle = "rgb(250, 250, 250)";
	ctx.font = "24px Helvetica";
	ctx.textAlign = "left";
	ctx.textBaseline = "top";
	ctx.fillText("Treasure caught: " + treasureCaught, 32, canvas.height-64);
	ctx.fillText("Lives: " + lives, 32, 32);
};
var spawnTreasure = function(){
	
	if (treasureTimer >= treasureTime){
treasure.x = 32 + (Math.random() * (canvas.width - 64));
	treasure.y = 32 + (Math.random() * (canvas.height - 64));
	treasureTimer = 0;
	
	}
	
	++treasureTimer;
};
// The main game loop
var main = function () {
	var now = Date.now();
	delta = now - then;

if (lives > 0){
	update(delta / 1000);		
		render();
monsterMove(delta / 1000);
spawnTreasure();
} 
else {
	restartGame();
}
	then = now;
	

	// Request to do this again ASAP
	requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// Let's play this game!
var then = Date.now();
reset();
main();

var selected = 0;    
var choiceOne;    
var choiceTwo;   
var matches = 0;     
var numOfTries = 0;
var interval = 700;
var gamePlace = document.getElementById("wrap");
var backcard="img/memoryBg.png";
var timeStart;
var timeFinish;
var time;
                            
function nameEnter(){
    var name = prompt("Please enter your name");
    if (name != null){
        document.title =
        "Welcome " + name + "!";
        }
            }
			
function game(){
var nOfPairs = document.getElementById("nPairs").value;

timeStart = new Date().getTime();

if (nOfPairs==1){
var cards=[];
    cards[0] = 'img/card1.png';
    cards[1] = 'img/card1.png';
}	
if (nOfPairs==2){
var cards=[];
    cards[0] = 'img/card1.png';
    cards[1] = 'img/card1.png';
    cards[2] = 'img/card2.png';
    cards[3] = 'img/card2.png';
cards.sort(function shuffle(){
   return Math.random() - 0.5;});
}
if (nOfPairs==3){
var cards=[];
    cards[0] = 'img/card1.png';
    cards[1] = 'img/card1.png';
    cards[2] = 'img/card2.png';
    cards[3] = 'img/card2.png';
    cards[4] = 'img/card3.png';
    cards[5] = 'img/card3.png';
cards.sort(function shuffle(){
   return Math.random() - 0.5;});
}
if (nOfPairs==4){
var cards=[];
    cards[0] = 'img/card1.png';
    cards[1] = 'img/card1.png';
    cards[2] = 'img/card2.png';
    cards[3] = 'img/card2.png';
    cards[4] = 'img/card3.png';
    cards[5] = 'img/card3.png';
    cards[6] = 'img/card4.png';
    cards[7] = 'img/card4.png';
	
cards.sort(function shuffle(){
   return Math.random() - 0.5;});
}
if (nOfPairs==5){
var cards=[];
    cards[0] = 'img/card1.png';
    cards[1] = 'img/card1.png';
    cards[2] = 'img/card2.png';
    cards[3] = 'img/card2.png';
    cards[4] = 'img/card3.png';
    cards[5] = 'img/card3.png';
    cards[6] = 'img/card4.png';
    cards[7] = 'img/card4.png';
    cards[8] = 'img/card5.png';
    cards[9] = 'img/card5.png';
    cards.sort(function shuffle(){
   return Math.random() - 0.5;});
}
if (nOfPairs==6){
var cards=[];
    cards[0] = 'img/card1.png';
    cards[1] = 'img/card1.png';
    cards[2] = 'img/card2.png';
    cards[3] = 'img/card2.png';
    cards[4] = 'img/card3.png';
    cards[5] = 'img/card3.png';
    cards[6] = 'img/card4.png';
    cards[7] = 'img/card4.png';
    cards[8] = 'img/card5.png';
    cards[9] = 'img/card5.png';
    cards[10] = 'img/card6.png';
    cards[11] = 'img/card6.png';
    cards.sort(function shuffle() {
   return Math.random() - 0.5;});
}
if (nOfPairs==7){
var cards=[];
    cards[0] = 'img/card1.png';
    cards[1] = 'img/card1.png';
    cards[2] = 'img/card2.png';
    cards[3] = 'img/card2.png';
    cards[4] = 'img/card3.png';
    cards[5] = 'img/card3.png';
    cards[6] = 'img/card4.png';
    cards[7] = 'img/card4.png';
    cards[8] = 'img/card5.png';
    cards[9] = 'img/card5.png';
    cards[10] = 'img/card6.png';
    cards[11] = 'img/card6.png';
    cards[12] = 'img/card7.png';
    cards[13] = 'img/card7.png';
cards.sort(function shuffle(){
   return Math.random() - 0.5;});
}
if (nOfPairs==8){
var cards=[];
    cards[0] = 'img/card1.png';
    cards[1] = 'img/card1.png';
    cards[2] = 'img/card2.png';
    cards[3] = 'img/card2.png';
    cards[4] = 'img/card3.png';
    cards[5] = 'img/card3.png';
    cards[6] = 'img/card4.png';
    cards[7] = 'img/card4.png';
    cards[8] = 'img/card5.png';
    cards[9] = 'img/card5.png';
    cards[10] = 'img/card6.png';
    cards[11] = 'img/card6.png';
    cards[12] = 'img/card7.png';
    cards[13] = 'img/card7.png';
    cards[14] = 'img/card8.png';
    cards[15] = 'img/card8.png';
cards.sort(function shuffle(){
   return Math.random() - 0.5;});
}
                
if(nOfPairs>8||nOfPairs<1){
    alert("Please enter the number from 1 to 8");
    }else{
		for(i = 0; i<=nOfPairs*2-1; i++){
            var cardDiv = document.createElement("div");
                cardDiv.setAttribute("id",""+i+"");
                cardDiv.style.height="65px";
                cardDiv.style.width="65px";
                cardDiv.style.float='left';
                gamePlace.appendChild(cardDiv);
                document.getElementById(""+i+"").innerHTML='<img src="img/memoryBg.png">';
								
                cardDiv.onclick=function(){cardClick(this.id);}; 
                    }
            }
                
function cardClick(card){
 
    if (selected==2){   
        return ;
    }
   
    if (selected==0){   
        choiceOne=card;
        document.images[card].src = cards[card];
        selected = 1; 
    }else { 
        selected = 2;
        choiceTwo = card;
        document.images[card].src =cards[card];
        var timer=setInterval(checking,interval); 
    }
    function checking()
{
    clearInterval(timer);
    numOfTries++;
    document.getElementById("tries").innerHTML = numOfTries;
    
    if (cards[choiceTwo]==cards[choiceOne]){   
        matches++;
        document.images[choiceOne].src = "img/memoryBgI.png";
        document.images[choiceTwo].src = "img/memoryBgI.png";
        //choiceTwo.onclick=null;
    } else { 
        document.images[choiceOne].src = "img/memoryBg.png";
        document.images[choiceTwo].src = "img/memoryBg.png";
        selected = 0;
        return ;
    }
	if (matches == nOfPairs){ 
		  timeFinish = new Date().getTime();
		  time = Math.round (((timeFinish - timeStart)/1000));
          alert("Congrats! You needed " + numOfTries + " tries, and " + time + " seconds.");
        }
        selected = 0;
        return ;
}
}
            }

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