将我的Jquery项目更改为纯javascript

我使用jquery和一个有用的在线教程为一个学校项目创建了一个breakout游戏。

工作小提琴在这里:http://jsfiddle.net/Kinetic915/kURvf/

编辑修改小提琴:http://jsfiddle.net/Kinetic915/nVctR/

我已经改变了大部分的javascript，但我有问题改变的jquery代码，使球javascript。

我在有问题的地方做了标记并留了空格。

非常感谢您给予的任何帮助!

//***********************************************************************************
 //                     START CODE
 //***********************************************************************************
// VARIABLES and other initializing functions are here

 function start() {
//******************************************************************************
//JQUERY
// HERE IS THE MAIN PROBLEM!!!!!!
 // HERE IS THE MAIN PROBLEM!!!!!!
 Cir = $('#canvas')[0].getContext("2d");
//JQUERY
//changing to Cir = canvas.getContext("2d"); causes the code to FAIL.
 return setInterval(drawCIRCLE, 10);
 }
 function windowsize() {
     //success with javascript

     WIDTH.width = window.innerWidth;
     HEIGHT.height = window.innerHeight;
     WIDTH = window.innerWidth;
     HEIGHT = window.innerHeight;

//Previous JQUERY:
     // WIDTH = $("#canvas")[0].width = $(window).width();
     //  HEIGHT = $("#canvas")[0].height = $(window).height();
 }
 windowsize();
 var x = WIDTH / 2 - 30; //divide by 2 start in middle of window
 var y = HEIGHT / 2;

//THIS DRAWS THE CIRCLE

 function circle() {
     //Cir.clearRect(0, 0, WIDTH, HEIGHT);
     Cir.beginPath();
     Cir.arc(x, y, 10, 0, Math.PI * 2, true);
     Cir.closePath();
     Cir.fill();
 }
 // Initialization of the Block array, rendering of the gutter area and coordinate box 
 were here

//*********************************************************
// HERE IS THE CODE THAT RENDERS THE BALL MOVEMENT ETC.

 //draw a circle
 function drawCIRCLE() {
     clear();
     circle();
     drawPADDLE();  //calls draw paddle function
     drawGUTTER();  // calls draw gutter function
     drawCOORBOX();  // calls draw coordinate box function
     drawBRICKS();  //calls the function to draw the boxes
 //have we hit a brick?
 rowheight = brickheight + padding;
 colwidth = brickwidth + padding;
 row = Math.floor(y / rowheight);
 col = Math.floor(x / colwidth);
 //if so, reverse the ball and mark the brick as broken
 if (y < numrows * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
     dy = -dy;
     bricks[row][col] = 0;
 }
 if (x + dx > WIDTH || x + dx < 0) dx = -dx;
 if (y + dy < 0) dy = -dy;
 else if (y + dy > ((HEIGHT - paddleh) - ppoffset) || y + dy > HEIGHT) {
     if (x > paddlex && x < paddlex + paddlew)
     //switch! once first is true, then second goes
     dy = -dy;
     else if (y + dy > ((HEIGHT - paddleh) - ppoffset) && y + dy > HEIGHT) {
         clearInterval(intervalId);
     }

 }
 x += dx;
 y += dy;
 if (rightpress) paddlex += 5;
 else if (leftpress) paddlex -= 5;
 }

 function clear() {
 Cir.clearRect(0, 0, WIDTH, HEIGHT);
//Is this jquery? I suspect this part of the code making the circle rendering fail.
 }
 start();
 init_paddle();
 initbricks();