Help with Javascript Breakout Game

Hello all,

So I read this tutorial on MDN for creating a breakout game using Javascript and Canvas as part of a project for the web development course I’m currently taking. I’m happy to say that it went well! However, I’m trying to modify the code for it so that instead of getting one point for each brick you hit, your score doubles for each brick you hit.

I have copied some of the code for the breakout game below. You’ll see some code that is commented out in the variables section as well as in the Collision Detection function towards the bottom. The commented out code is the work my web development instructor and me did when I asked him for his assistance after class on Wednesday. But because we were unsuccessful in getting the code to work the way I envisioned it, he suggested that I seek out one of the assistant instructors for help.

var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
//var score = 1;
//var score2 = score*2;
var lives = 3;
var bricks = [];
for(c=0; c<brickColumnCount; c++) {
bricks[c] = [];
for(r=0; r<brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0, status: 1 };

function collisionDetection() {
for(c=0; c<brickColumnCount; c++) {
for(r=0; r<brickRowCount; r++) {
var b = bricks[c][r];
if(b.status == 1) {
if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
dy = -dy;
b.status = 0;
if(score == brickRowCount
brickColumnCount) {

I emailed the assistant instructor twice already, but have yet to receive any meaningful input from him(his daytime job is a web developer). Would I have to create new variables and/or functions for this, or would I only have to modify the existing code? If I have to add new code, does that mean I also have to comment out and/or remove some of the current code?

Please let me know if you have any questions or if there is anything you want me to clarify.

Thanks to all who responded to this post. I greatly appreciate your input!


I’ve admittedly only glanced at this very quickly - but it looks like you are only incrementing the score by one: score++ instead of by two: score += 2

However, this will affect the winning conditions, too.

You check for score == brickRowCount*brickColumnCount to see when the player has won, but what if there are 25 bricks (i.e. an odd number of bricks)? I imagine that might mess with it a bit, but I haven’t checked…

Aw, snap. @P1xt’s response got me to read your question more closely…what exactly do you mean by ‘score doubles’ - I misread it as ‘score double’ (i.e. 2), but I think you mean some sort of combo / cumulative multiplier kinda effect? If the latter, you may need some way to measure time between hits in order to say they happened in quick enough succession that the multiplier should be applied? Either that or you just score exponentially higher with every hit…

So I changed that line of code to “score *= 2;”. I don’t think I experienced any issues there. However, when I tried modifying the win condition multiple times, I began to notice some differences:

1.) When I changed the condition to score == allBricksAreDestroyed, the ball would literally be glued onto the first brick it hit.

2.) So I changed the condition to score == 32,768 because that is the final score you should get after destroying all 15 bricks (Note: 2^15 = 32,768). But when I did that, not only would ball still get stuck on the first brick it hit, but the alert box would pop up with the “Congratulations, you won!” message.

3.) The last modification I made was removing the comma from 32,768. So my win condition is now score == 32768. When I made this change, the ball neither got stuck on the first brick it hit nor did I subsequently get the alert box telling me won. However, I did notice that the score was constantly fixed at zero no matter how many bricks I hit.

I feel that we’re onto something here. I’m guessing the win condition is what might be throwing this off. Would you suggest changing the condition to score == 2^15?

So I uploaded my win condition to score == 2**15 as well as added the following conditions to the collisionDetection function:

if(score === 0) {
score += 2;
} else {
score *= 2;

And I’m happy to say that I’m getting exactly the kind of results both score-wise and game play-wise. The score is doubling each time a brick is hit and I’m not experiencing any technical issues such as the alert box popping up after the first brick is hit or the ball getting stuck on the first hit brick.

Thank you so much for your input, P1xt! I really appreciate it.