Breakout in jquery to plain javascript

Asked May 07 '13 at 22:06

Active Mar 10 '16 at 07:26

Viewed 238 times

I created the breakout game in jquery with help of a handy tutorial. My professor now tells me it must be in plain javascript and I am having trouble converting to plain javascript.

The fiddle is here: http://jsfiddle.net/Kinetic915/9bLEk/6/

the code loads properly. I am finding a problem changing the code that renders the ball. It works with jquery here:

Cir = $('#canvas')[0].getContext("2d");

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

The lower works by itself in a separate fiddle, but NOT inside of the project.

var canvas = document.getElementById("canvas");
var Cir = canvas.getContext("2d");

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

Any help appreciated!

edited May 07 '13 at 22:11

Turnip

33,774
14
81
102

asked May 07 '13 at 22:06

user2138152

what is this game supposed to do? all i see is a ball drop – James Daly May 07 '13 at 22:15
It will drop off the paddle. Click on the screen where the game is located and use the arrow keys to move the paddle. Obviously that will illustrate it works currently using jquery. I am attempting to achieve the same game using javascript with your help! – user2138152 May 08 '13 at 02:05
it's currently not working with jQuery either – James Daly May 08 '13 at 02:56
is that fiddle not rendering correctly? Ive tried it from several computer successfully. http://jsfiddle.net/Kinetic915/B77UB/1/ – user2138152 May 08 '13 at 03:08
Ive changed several lines to use plain javascript but cannot figure out how to make the rendering of the ball work without using jquery and also move the paddle according to key press without jquery. – user2138152 May 08 '13 at 03:09
the ball drops then nothing – James Daly May 08 '13 at 03:38
if it does not hit the paddle and ends in the gutter the animation will stop. The paddle is moved with the arrow keys – user2138152 May 09 '13 at 21:08
most updated: http://jsfiddle.net/Kinetic915/nVctR/ – user2138152 May 09 '13 at 21:13
most is now in javascript except paddle movement as well as rendering of the circle (above) which I cannot ifgure out – user2138152 May 09 '13 at 21:14
still now working for me using chrome – James Daly May 09 '13 at 21:32
very strange can you post a pic or video? just tried with chrome working perfect – user2138152 May 09 '13 at 21:43
try http://jsfiddle.net/Kinetic915/nVctR/show – user2138152 May 09 '13 at 21:46
i think the problem is not having focus on the area the code is rendering? in order to move the paddle you have to click on the render area. – user2138152 May 09 '13 at 21:56
got it working - can you add the code that isn't specifically working guess I'm confused because it looks fine - when using canvas most of it is pure js anyway – James Daly May 10 '13 at 00:46
have you tried addEventListener – James Daly May 10 '13 at 00:49
something like canvas.addEventListener('keydown', function (evt) { if (evt.keyCode == 39) rightpress = false; }, false); – James Daly May 10 '13 at 00:50
Ohh gotcha, thats what I was thinking as far as the keydown goes but I didnt know the exact syntax. Sure! I will add the code that makes it fail. Thank you for your help! I will highlight it in the project. – user2138152 May 11 '13 at 02:40
well.... got it working with exactly I thought would make it work. didn't work before. Murphy's law I suppose. The only part now in jquery is $(document).keydown(Keypress); $(document).keyup(Keyoff); what is the javascript equivalent? – user2138152 May 11 '13 at 04:01
got working with window.onkeydown = Keypress; window.onkeyup = Keyoff; – user2138152 May 11 '13 at 04:15
thanks for the help! :D – user2138152 May 11 '13 at 04:24

Breakout in jquery to plain javascript

0 Answers0