Collision Detection 2D Game

Question

I am following a Mozilla 2D game tutorial. This is not my original code nor my original idea. Link below.

I have gotten stuck on a particular aspect of the game: collision detection of the ball with the bricks. Everything worked fine with the program until I called the collisionDetection() function.

Here is the function:

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

Below calling this function, the ball flew around the canvas and the game mechanics worked perfectly. However, upon adding this call to my code, the ball stayed motionless at its starting point with no movement at all.

Obviously there is a problem with the collisionDetection() function but it all looks correct to me!

I also searched for a problem with the ball-to-wall and ball-to-paddle collision detection 'if statements' but everything seemed correct.

The entire code is below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"> </canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Circle variables
var radiusCircle = 10;
var xCircle = canvas.width/2;
var yCircle = canvas.height - radiusCircle;
var dx = 2;
var dy = -2;

// Keyboard movement variables
var keyLeft = false;
var keyRight = false;

// Paddle variables
var paddleHeight = 10;
var paddleWidth = 75;
var xPaddle = (canvas.width - paddleWidth)/2;

// Brick variables
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

var bricks = [];
for(c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0 };
    }
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        keyRight = true;
    }
    else if(e.keyCode == 37) {
        keyLeft = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        keyRight = false;
    }
    else if(e.keyCode == 37) {
        keyLeft = false;
    }
}

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

function drawBall() {
    ctx.beginPath();
    ctx.arc(xCircle, yCircle, radiusCircle, 0, Math.PI * 2, false);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath;
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(xPaddle, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath();
}

function drawBricks() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = "green";
            ctx.fill();
            ctx.closePath();
        }
    }
}

// Renders game
var draw = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
collisionDetection();

// Collision detection for ball and paddle and game over mechanic
if (xCircle + dx > canvas.width - radiusCircle || xCircle < radiusCircle) {
    dx = -dx;
    }

if (yCircle + dy < radiusCircle) {
    dy = -dy;
    }

else if (yCircle + dy > canvas.height - radiusCircle) {


    if (xCircle > xPaddle && xCircle < xPaddle + paddleWidth) {
        if (yCircle = yCircle - paddleHeight) {
            dy = -dy;
            }
        }   
    else {
    alert("GAME OVER!");
    document.location.reload();
    }
}

// Paddle movement mechanics
if (keyRight && xPaddle < canvas.width - paddleWidth) {
    xPaddle += 5;
    }
else if (keyLeft && xPaddle > 0) {
    xPaddle += -5;
    }

// Makes the ball move
xCircle += dx;
yCircle += dy;
}

setInterval(draw, 10);

</script>

</body>
</html>

Can someone please help me by pointing out an error in my code or or how the collisionDetection() function isn't working with another piece of code for the game mechanics? ie the ball movement or paddle movement.

I have also attached a photo of the game in its current, nonfunctional, state.

Thank you

Photo of game

Answer 1

In your code variables x and y does not defined. I suppose you mean xCircle and yCircle . Your collisionDetection function must looks like this:

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

Collision Detection 2D Game

Question

1 answers

solution1
0 2015-10-30 05:32:02

Collision Detection 2D Game

Question

1 answers

solution1 0 2015-10-30 05:32:02

solution1
0 2015-10-30 05:32:02