Collision detection between Divs

Question

I am running into some troubles with my simple Brick Breaker game. I made a simple animation for my ball object but I have a hard time with it detecting when it comes into contact with other elements on the page. Not to mention, I can't seem to keep my player tile from moving outside the container div I made for it. I simply want the ball to bounce off the player paddle, wall and bricks.

$(function(){
$(document).keydown(function(e){
    var Playerposition = $("#player").position();
    var Ballposition = $("#ball").position();
    switch (e.keyCode){
        case 37: //Left Movement
            $("#player").css('left', Playerposition.left - 20 + 'px');
        break;
        case 39://Right movement   
            $("#player").css('left', Playerposition.left + 20 + 'px');
        break;   
    }
});
var top = 275;
var left = 325;
var interval = 5; // time interval in milliseconds
var increment = 1;
var move = function() {
     if(left > 750) {
        increment = -increment;
     }
     if(left < 0) {
        increment = -increment
     }
    if(top > 325){
    increment = -increment; 
    }
    if(top < 0) {
    increment = -increment;
     }
    top = top + increment;
     left = left + increment;
     $('#ball').css('left', left + 'px');
    $('#ball').css('top', top + 'px');
};
setInterval(move, interval)});

I do have gameQuery installed, as well as Jquery. This is my game so far with my current html/css/javascript: jfiddle Sorry it does match up well, it looks fine with a full webpage.

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

Here you have it:

jQuery/JavaScript collision detection

Check the detectOverlapping method souce.

Cheers

edited May 23 '17 at 12:29

Community

1
1

answered Jan 12 '14 at 08:31

Edgar Villegas Alvarado

18,204
2
42
61

score 0 · Answer 2 · answered Jan 14 '14 at 21:43

If you want collision detection to work with gameQuery you have to use the provided .x(),.y() or .xy() function and not directly change the sprite position with .css()

This is true for all of the elements of the game, that includes groups and tilemaps too.

Collision detection between Divs

2 Answers2