Question

I was starting to teach myself how to work with HTML5 Canvas and decided to learn by making a short game/demo.

I wanted to make a simple blocks bounce around the screen, bounce off the walls, and bounce off each other.

I’m stuck on getting them to bounce off each other. It seems like code that makes it bounce away is making it bounce back immediately after. I see where the code fails but I don’t know how to fix it 🙁 Can anyone help?

(Side question: I know I’m not working as clean/efficiently/professionally as possible in this example but if I wanted to improve with feedback and opinions about the ‘best’ method for this type of example, like a code review or something, is it ok to ask a question on stackoverflow?)

jsfiddle:
http://jsfiddle.net/vdcSv/

HTML:

<canvas id="canvas" Width="400" Height="300"></canvas>

Javscript:

    function CheckBallCollision(BallsArray, index) {
        for (var i = 0; i < BallsArray.length; i++) {
            if (index != i) {
                if (BallsArray[index].Xdir == 1) {
                    if ((BallsArray[index].Xmax >= BallsArray[i].Xmin)) {
                        if ((BallsArray[index].Ymin <= BallsArray[i].Ymin) && (BallsArray[index].Ymax >= BallsArray[i].Ymin) ||
                       ((BallsArray[index].Ymax >= BallsArray[i].Ymax) && (BallsArray[index].Ymin <= BallsArray[i].Ymax))) {
                            BallsArray[index].Xdir = -BallsArray[index].Xdir;
                        }
                    }
                } else if (BallsArray[index].Xdir == -1) {
                    if ((BallsArray[index].Xmin <= BallsArray[i].Xmax)) {
                        if ((BallsArray[index].Ymin <= BallsArray[i].Ymin) && (BallsArray[index].Ymax >= BallsArray[i].Ymin) ||
                       ((BallsArray[index].Ymax >= BallsArray[i].Ymax) && (BallsArray[index].Ymin <= BallsArray[i].Ymax))) {
                            BallsArray[index].Xdir = -BallsArray[index].Xdir;
                        }
                    }
                }


            }
        }
    }

Ball Object:

function Ball() {
    this.Xmin = 0;//top left X coord
    this.Ymin = 0;//top left y coord
    this.Height = 25; 
    this.Width = 25;
    this.Xmax = this.Xmin + this.Width;
    this.Ymax = this.Ymin + this.Height;
    this.Xdir = 0; // 0 not moving, 1 moving right, -1 moving left
    this.Ydir = 0;
    this.Red = 0;
    this.Green = 0;
    this.Blue = 200;
    this.Opacity = 1;
    this.Speed = 1;
}

Answer 1

Got it working by changing the <= to ==

It’s messy and things often miss the necessary bounce off a block 🙁 I’m sure part of the reason is falling back on the == instead of <=. If anyone has a better solution – I’m all ears 🙂

http://jsfiddle.net/vdcSv/1/

function CheckBallCollision(BallsArray, index) {
        for (var i = 0; i < BallsArray.length; i++) {
            if (index != i) {
                if (BallsArray[index].Xdir == 1) {
                    if ((BallsArray[index].Xmax == BallsArray[i].Xmin)) {
                        if ((BallsArray[index].Ymin <= BallsArray[i].Ymin) && (BallsArray[index].Ymax >= BallsArray[i].Ymin) ||
                       ((BallsArray[index].Ymax >= BallsArray[i].Ymax) && (BallsArray[index].Ymin <= BallsArray[i].Ymax))) {
                            BallsArray[index].Xdir = -BallsArray[index].Xdir;
                        }
                    }
                } else if (BallsArray[index].Xdir == -1) {
                    if ((BallsArray[index].Xmin == BallsArray[i].Xmax)) {
                        if ((BallsArray[index].Ymin <= BallsArray[i].Ymin) && (BallsArray[index].Ymax >= BallsArray[i].Ymin) ||
                       ((BallsArray[index].Ymax >= BallsArray[i].Ymax) && (BallsArray[index].Ymin <= BallsArray[i].Ymax))) {
                            BallsArray[index].Xdir = -BallsArray[index].Xdir;
                        }
                    }
                }

        }
    }
}