Changing my Jquery project to plain javascript

Question

I created a breakout game for a school project using jquery and a helpful online tutorial.

The working fiddle is here: http://jsfiddle.net/Kinetic915/kURvf/

EDIT revised fiddle: http://jsfiddle.net/Kinetic915/nVctR/

I have changed most to javascript but am having problems changing the jquery code that renders the ball to javascript.

I have Marked and left spaces in the areas where there are problems.

Thank you very much for any help given!!

//***********************************************************************************
 //                     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();

Can you distill this down to a smaller code example and more specific question? It's unlikely you'll get much help if you throw a bunch of code at us and ask us to find the problems and fix them. — Rob Hruska, May 08 '13 at 18:10
Where you use `$("#canvas")` you should do `document.getElementById("canvas");` if you're not using jQuery. But why not use jquery? — Matsemann, May 08 '13 at 18:10
my professor does not want us to use jquery. I set the var canvas = document.getElementById("canvas"); then I tried Cir = canvas.getContext("2d"); which does not work. — user2138152, May 08 '13 at 18:15
Sorry I am just not sure where the error lies which is why I posted everything. I attempted to post another question that was more succinct but also did not get a answer so I tried here :/ — user2138152, May 08 '13 at 18:16
I cut down the code hopefully this helps us both! thank you! — user2138152, May 08 '13 at 18:22
http://stackoverflow.com/questions/5808162/getcontext-is-not-a-function — DontVoteMeDown, May 08 '13 at 18:28

score 0 · Answer 1 · answered May 08 '13 at 18:27

Ages ago I wrote a similar code in pure JavaScript here this code uses pure javascript and no library.The code is well commented(I think :))

I generally attached events like this

document.onkeydown = function(e)
        {
            e = e || window.event;

            switch (e.keyCode) { // which key was pressed?              

                case 32: // release ball.
                if(!game.ball.isFree)
                {
                    game.ball.isFree = true;
                    game.ball.directionX = game.ball.directionY = 1;
                    game.ball.x = game.ball.offsetLeft;                 
                    game.ball.y =   game.screen.offsetHeight - game.ball.offsetTop;
                }
                    break;

                case 37: // left, rotate player left
                    game.bar.direction = -1;
                    break;

                case 39: // right, rotate player right
                    game.bar.direction = 1;
                    break;
            }
        }

        document.onkeyup = function(e)
        {
            e = e || window.event;

            switch (e.keyCode) 
            {                   
                case 37:
                case 39:
                    game.bar.direction = 0;
                    break;
            }
        }
    },

Ofcourse you have many other places which might need porting so a helpful break down of questions would be easier to answer :)

Hope this helps

Changing my Jquery project to plain javascript

1 Answers1